Poffinage du DashBoard

public/assets/css/style.css

@@ -114,6 +114,10 @@ body {
   color: #fff;
 }
 
+.breadcrumb
+{
+  display: block;
+}
 
 .dashboard .card-body {
   background: #449644;
@@ -146,7 +150,7 @@ body {
   animation-iteration-count: infinite;
     }
 
-   
+
     @-webkit-keyframes beating {
     0%   {transform: scale(0.1,0.1);}
     10%  {transform: scale(0.3,0.3)}
@@ -260,7 +264,7 @@ a[aria-expanded="true"] {
  .sameHauteur{
      align-items: center;
 }
- 
+
 
 /** dark CSS */
  .dark {

public/assets/dist/style.min.css

-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}
\ No newline at end of file
+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

views/dashboard.html

@@ -3,16 +3,18 @@
 {% block content %}
 <main role="main" class="container-fluid dashboard">
   <!-- Health Breadcrumbs-->
+  <br>
   <ol class="breadcrumb">
     <li class="breadcrumb-item">
-      Health
+      Health   <span class="float-right"><i class="fas fa-heartbeat"></i></span>
     </li>
+
   </ol>
   <div class="row">
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
@@ -23,7 +25,7 @@
           </div>
         </div>
         <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>
         </a>
       </div>
@@ -31,7 +33,7 @@
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
@@ -42,7 +44,7 @@
           </div>
         </div>
         <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>
         </a>
       </div>
@@ -52,25 +54,25 @@
   <!-- Environment Breadcrumbs-->
   <p>
     <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>
   </p>
   <div class="row">
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <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 class="card-body-item">
             <span>50 °C</span>
           </div>
         </div>
         <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>
         </a>
       </div>
@@ -78,19 +80,19 @@
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
             <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 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>
         <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>
         </a>
       </div>
@@ -100,21 +102,21 @@
   <!-- Ressources Breadcrumbs-->
   <p>
     <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>
   </p>
   <div class="row">
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
             <i style="color: white;" class="fas fa-tint fa-5x"></i>
           </div>
           <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-bar bg-info" style="width:30%"></div>
             </div>
@@ -122,7 +124,7 @@
 
         </div>
         <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>
         </a>
       </div>
@@ -130,7 +132,7 @@
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
@@ -144,7 +146,7 @@
           </div>
         </div>
         <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>
         </a>
       </div>
@@ -155,19 +157,19 @@
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <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 class="card-body-item">
-            <span style="padding-left: 30px">3 m<sup>3</sup> </span>
+            <span style="padding-left: 30px"> 15  </span>
           </div>
 
         </div>
         <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>
         </a>
       </div>
@@ -175,7 +177,7 @@
     <div class="col-sm">
       <!-- Icon Cards-->
       <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 class="card-body">
           <div class="card-body-item">
@@ -191,7 +193,7 @@
           </div>
         </div>
         <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>
         </a>
       </div>