Refact graphique Home

CD67.FicheCollege.MVC/Content/cd67-custom.less

@@ -10,7 +10,6 @@
     margin: 0 !important;
 }
 
-
 .menu_principal a, .menu_principal div {
     background-color: @color1;
 }
@@ -43,6 +42,7 @@ legend {
 #topbar {
     background-color: lighten(@color1, 33%);
     border-bottom: 1px solid @color1;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 
 #title{
@@ -75,8 +75,6 @@ legend {
     color: darken(@color1, 25%);
 }
 
-
-
 /* Fond de la sidebar */
 .color2 {
     color: #5a5555;
@@ -161,15 +159,30 @@ header nav{
 }
 
 .home-content .row img {
-    width: 100%;
+    /*width: 90%;
+    margin-left: 5%;*/
 }
 
 .home-content .card {
     height: 100%;
+    width: 22em;
+    border-radius: 1em;
+    background-color: lighten(@color1, 30%);
+    margin: 2em 2em;
+    padding: 1em;
+}
+
+.home-content .card * {
+    width: 90%;
+    margin-left: 5%;
+}
+
+.home-content .card h3 {
+    text-align: center;
 }
 
 .home-content .card ul {
-    margin-top: 2em;
+    margin-top: 0.5em;
 }
 
 .home-content .card li {
@@ -181,8 +194,7 @@ header nav{
 }
 
 .home-content .card .input-search {
-    width: 30%;
-    min-width: 300px;
+    /*width: 100%;*/
 }
 
 .breadcrumb-arrow {
@@ -190,6 +202,11 @@ header nav{
     padding: 0.7em 0.5em 0.7em 0.5em;
 }
 
+.annotation {
+    color: #666666;
+    font-size: 0.9em;
+}
+
 /* Pages d'index */
 
 #content header {

CD67.FicheCollege.MVC/Views/Annees/Details.cshtml

@@ -10,35 +10,37 @@
 
 <div class="container home-content">
     <div class="row">
-        <div class="col-md-3">
-            <img src="~/images/img_stairs.jpg" alt="Colleges">
-        </div>
-        <div class="col-md-9 card">
-            <h3>@Html.ActionLink("Les collèges", "Index", "Colleges", new { annee_id = Model.Obj.Id }, null)</h3>
-            <p>
-                @Model.Obj.Colleges.Count() collèges enregistrés pour l'année scolaire @Model.Obj.Libelle
+        <div class="col-md-3 card">
+            <a href=@Url.Action("Index", "Colleges", new { annee_id = Model.Obj.Id }, null)>
+                <h3>Les collèges</h3>
+                <img src="~/images/school.svg" class="home-svg" alt="Colleges">
+            </a>
+            <p class="annotation">
+                @Model.Obj.Colleges.Count() collèges enregistrés
             </p>
-            <ul>
-                <li><input disabled type="text" class="form-control input-search" name="recherche" id="recherche" placeholder="Rechercher un collège..." data-auto="" value="@Request["recherche_college"]"></li>
-                <li>@Html.ActionLink("Voir tous les collèges", "Index", "Colleges", new { annee_id = Model.Obj.Id }, null)</li>
-            </ul>
+            <input type="text" class="form-control input-search" name="recherche" id="recherche" placeholder="Rechercher un collège..." data-auto="" value="@Request["recherche_college"]">
         </div>
-    </div>
 
-    <div class="row">
-        <div class="col-md-3">
-            <img src="~/images/img_biblio.jpg" alt="Actions">
+        <div class="col-md-3 card">
+            <a href=@Url.Action("Index", "ActionsEdu", new { annee_id = Model.Obj.Id }, null)>
+                <h3>Les Actions Educatives</h3>
+                <img src="~/images/paint-palette.svg" alt="Actions">
+            </a>
+            <p class="annotation">
+                @Model.Obj.ActionsEdu.Count() actions éducatives enregistrées
+            </p>
+            <input type="text" class="form-control input-search" name="recherche" id="recherche" placeholder="Rechercher une action..." data-auto="" value="@Request["recherche_action"]">
         </div>
-        <div class="col-md-9 card">
-            <h3>@Html.ActionLink("Les Actions Educatives", "Index", "ActionsEdu", new { annee_id = Model.Obj.Id }, null)</h3>
-            <p>
-                @Model.Obj.ActionsEdu.Count() actions éducatives enregistrées pour l'année scolaire @Model.Obj.Libelle
+
+        <div class="col-md-3 card">
+            <a href=@Url.Action("Index", "Restauration", new { annee_id = Model.Obj.Id }, null)>
+                <h3>Restauration</h3>
+                <img src="~/images/diet.svg" alt="Actions">
+            </a>
+            <p class="annotation">
+                @Model.Obj.Colleges.Where(c => c.RestaurationType_Id != null).Count() restaurations enregistrées
             </p>
-            
-            <ul>
-                <li><input disabled type="text" class="form-control input-search" name="recherche" id="recherche" placeholder="Rechercher une action..." data-auto="" value="@Request["recherche_action"]"></li>
-                <li>@Html.ActionLink("Voir toutes les actions", "Index", "ActionsEdu", new { annee_id = Model.Obj.Id }, null)</li>
-            </ul>
+            <input type="text" class="form-control input-search" name="recherche" id="recherche" placeholder="Rechercher un collège..." data-auto="" value="@Request["recherche_action"]">
         </div>
     </div>
 </div>