Commit 51af204a authored by Soulet Corentin's avatar Soulet Corentin
Browse files

Poffinage du DashBoard

parent 4935a732
...@@ -114,6 +114,10 @@ body { ...@@ -114,6 +114,10 @@ body {
color: #fff; color: #fff;
} }
.breadcrumb
{
display: block;
}
.dashboard .card-body { .dashboard .card-body {
background: #449644; background: #449644;
...@@ -146,7 +150,7 @@ body { ...@@ -146,7 +150,7 @@ body {
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
@-webkit-keyframes beating { @-webkit-keyframes beating {
0% {transform: scale(0.1,0.1);} 0% {transform: scale(0.1,0.1);}
10% {transform: scale(0.3,0.3)} 10% {transform: scale(0.3,0.3)}
...@@ -260,7 +264,7 @@ a[aria-expanded="true"] { ...@@ -260,7 +264,7 @@ a[aria-expanded="true"] {
.sameHauteur{ .sameHauteur{
align-items: center; align-items: center;
} }
/** dark CSS */ /** dark CSS */
.dark { .dark {
......
body{padding-top:5rem;background-color:#fff}.footer-text{display:block;text-align:center}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.box{margin-bottom:20px;border:2px solid #000;border-radius:6px;line-height:40px;text-align:center;padding-top:10px;background-color:#c3cee4}.content-input{height:500px}.article{padding-left:1rem;padding-bottom:1rem}[class*=col-xs]{width:auto}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;align-items:center}@media (min-width:768px){.container{width:1170px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}#accordion-faq .card{margin-bottom:10px}.content-box{display:flex;margin:0 0 45px;padding:30px;background-color:#9d9d9d;color:#fff}.dashboard .card-body{background:#449644;display:flex;justify-content:center;width:auto}.card-body-item{height:100%;width:100%}.card-body-item:nth-child(1){break-after:always}.card-body-item span{font-size:2.5em;color:#fff}.wrapper{display:flex;width:100%}#sidebar{width:250px;margin-left:-250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:0}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#sidebar ul.components{padding:20px 0;border-bottom:1px solid #47748b}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{text-decoration:none;color:#fff;padding:10px;font-size:1.1em;display:block}#sidebar ul li a:hover{color:#7386d5;background:#fff}#sidebar ul li.active>a,a[aria-expanded=true]{color:#fff;background:#6d7fcc}#content{width:100%;padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:calc(100% - 250px)}.content-input{height:500px}.task{padding:2px;margin-top:10px;border-radius:5px;border:2px solid #112f41}.sameHauteur{align-items:center}.dark{background-color:#112f41;color:#fff}.dark .task{border-color:#878787}.dark .modal-content{background-color:#1e4363}.dark .btn{background-color:#1c88cc}.dark .dropdown-menu{background-color:#1e4363}.dark .dropdown-item{color:#fff}.dark .card{background-color:#1e4363}.dark .breadcrumb{background-color:#1e4363}.dark a{color:#fff}.dark .btn-link{color:#fff}.dark .card .btn{background-color:transparent} body{padding-top:5rem;background-color:#fff}.footer-text{display:block;text-align:center}.contenttype-title{display:flex}.contenttype-title h3{flex:1 0}.contenttype-all-button{margin-top:5px}.list-group-item-flex{display:flex}.list-group-item-tools{display:block;width:30px}.list-group-item-image{margin-right:10px}.list-group-item-content{flex:1 0}.box{margin-bottom:20px;border:2px solid #000;border-radius:6px;line-height:40px;text-align:center;padding-top:10px;background-color:#c3cee4}.content-input{height:500px}.article{padding-left:1rem;padding-bottom:1rem}[class*=col-xs]{width:auto}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;align-items:center}@media (min-width:768px){.container{width:1170px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}#accordion-faq .card{margin-bottom:10px}.content-box{display:flex;margin:0 0 45px;padding:30px;background-color:#9d9d9d;color:#fff}.breadcrumb{display:block}.dashboard .card-body{background:#449644;display:flex;justify-content:center;width:auto}.card-body-item{height:100%;width:100%}.card-body-item:nth-child(1){break-after:always}.card-body-item span{font-size:2.5em;color:#fff}.wrapper{display:flex;width:100%}#sidebar{width:250px;margin-left:-250px;position:fixed;top:0;left:0;height:100vh;z-index:999;background:#7386d5;color:#fff;transition:all .3s}#sidebar.active{margin-left:0}#sidebar .sidebar-header{padding:20px;background:#6d7fcc}#sidebar ul.components{padding:20px 0;border-bottom:1px solid #47748b}#sidebar ul p{color:#fff;padding:10px}#sidebar ul li a{text-decoration:none;color:#fff;padding:10px;font-size:1.1em;display:block}#sidebar ul li a:hover{color:#7386d5;background:#fff}#sidebar ul li.active>a,a[aria-expanded=true]{color:#fff;background:#6d7fcc}#content{width:100%;padding:40px;min-height:100vh;transition:all .3s;position:absolute;top:0;right:0}#content.active{width:calc(100% - 250px)}.content-input{height:500px}.task{padding:2px;margin-top:10px;border-radius:5px;border:2px solid #112f41}.sameHauteur{align-items:center}.dark{background-color:#112f41;color:#fff}.dark .task{border-color:#878787}.dark .modal-content{background-color:#1e4363}.dark .btn{background-color:#1c88cc}.dark .dropdown-menu{background-color:#1e4363}.dark .dropdown-item{color:#fff}.dark .card{background-color:#1e4363}.dark .breadcrumb{background-color:#1e4363}.dark a{color:#fff}.dark .btn-link{color:#fff}.dark .card .btn{background-color:transparent}
\ No newline at end of file \ No newline at end of file
...@@ -3,16 +3,18 @@ ...@@ -3,16 +3,18 @@
{% block content %} {% block content %}
<main role="main" class="container-fluid dashboard"> <main role="main" class="container-fluid dashboard">
<!-- Health Breadcrumbs--> <!-- Health Breadcrumbs-->
<br>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
Health Health <span class="float-right"><i class="fas fa-heartbeat"></i></span>
</li> </li>
</ol> </ol>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header">Heart rate <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header">Heart rate
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
...@@ -23,7 +25,7 @@ ...@@ -23,7 +25,7 @@
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Heart Rate</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -31,7 +33,7 @@ ...@@ -31,7 +33,7 @@
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header">Body Temperature <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header">Body Temperature
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
...@@ -42,7 +44,7 @@ ...@@ -42,7 +44,7 @@
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Heart Rate</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -52,25 +54,25 @@ ...@@ -52,25 +54,25 @@
<!-- Environment Breadcrumbs--> <!-- Environment Breadcrumbs-->
<p> <p>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"> Environment</li> <li class="breadcrumb-item"> Environment <span class="float-right"><i class="fas fa-leaf"></i></span> </li>
</ol> </ol>
</p> </p>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header"> Méteo <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header"> Meteo
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
<i style="color: white;" class="fas fa-sun fa-5x"></i> <i style="color: white;" class="fas fa-cloud-sun fa-5x"></i>
</div> </div>
<div class="card-body-item"> <div class="card-body-item">
<span>50 °C</span> <span>50 °C</span>
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Meteo</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -78,19 +80,19 @@ ...@@ -78,19 +80,19 @@
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header">Wind <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header">Wind
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
<i style="color: white;" class="fas fa-wind fa-5x"></i> <i style="color: white;" class="fas fa-wind fa-5x"></i>
<i style="color: white;" class="fas fa-arrow-up fa-5x"></i>
</div> </div>
<div class="card-body-item"> <div class="card-body-item">
<span>North > 60 km/h</span> <span><i style="color: white;" class="fas fa-arrow-up"></i> North > 60 km/h</span>
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Meteo</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -100,21 +102,21 @@ ...@@ -100,21 +102,21 @@
<!-- Ressources Breadcrumbs--> <!-- Ressources Breadcrumbs-->
<p> <p>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"> Ressources</li> <li class="breadcrumb-item"> Ressources <span class="float-right"><i class="fas fa-box"></i></span></li>
</ol> </ol>
</p> </p>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header"> Water Capacity <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header"> Water Capacity
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
<i style="color: white;" class="fas fa-tint fa-5x"></i> <i style="color: white;" class="fas fa-tint fa-5x"></i>
</div> </div>
<div class="card-body-item"> <div class="card-body-item">
<span style="padding-left: 50px">3 ml/m<sup>3</sup> </span> <span style="padding-left: 50px">149 L </span>
<div class="progress"> <div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div> <div class="progress-bar bg-info" style="width:30%"></div>
</div> </div>
...@@ -122,7 +124,7 @@ ...@@ -122,7 +124,7 @@
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Water Capacity</span> <span class="float-left">View History and Details </span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -130,7 +132,7 @@ ...@@ -130,7 +132,7 @@
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header">Power Capacity <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header">Power Capacity
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
...@@ -144,7 +146,7 @@ ...@@ -144,7 +146,7 @@
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Electricity Capacity</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -155,19 +157,19 @@ ...@@ -155,19 +157,19 @@
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header"> Peoples <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header"> Peoples
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
<i style="color: white;" class="fas fa-user fa-5x"></i> <i style="color: white;" class="fas fa-users fa-5x"></i>
</div> </div>
<div class="card-body-item"> <div class="card-body-item">
<span style="padding-left: 30px">3 m<sup>3</sup> </span> <span style="padding-left: 30px"> 15 </span>
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Population</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
...@@ -175,7 +177,7 @@ ...@@ -175,7 +177,7 @@
<div class="col-sm"> <div class="col-sm">
<!-- Icon Cards--> <!-- Icon Cards-->
<div class="card"> <div class="card">
<div class="card-header"> Food Stock <span class="float-right"><i class="fas fa-heartbeat"></i></span> <div class="card-header"> Food Stock
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="card-body-item"> <div class="card-body-item">
...@@ -191,7 +193,7 @@ ...@@ -191,7 +193,7 @@
</div> </div>
</div> </div>
<a class="card-footer" href="#"> <a class="card-footer" href="#">
<span class="float-left">View detailed History of Food Stock</span> <span class="float-left">View History and Details</span>
<span class="float-right"><i class="fas fa-angle-right"></i></span> <span class="float-right"><i class="fas fa-angle-right"></i></span>
</a> </a>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment