NEW Refactoring, Ajout du menu de niveau 2 et fix du footer

CD67.ModeleMVC.MVC/Content/cd67-model.css

@@ -41,6 +41,7 @@
 
 #wrapper {
     padding-left: 0;
+    padding-top: 60px;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
@@ -50,7 +51,7 @@
 
 #sidebar-wrapper {
     z-index: 1000;
-    position: absolute;
+    position: fixed;
     left: 250px;
     width: 0;
     height: 100%;
@@ -194,8 +195,12 @@ h1 {
 
 footer {
     padding: 1rem;
-    background-color: #efefef;
+    background-color: #ccc;
     text-align: center;
+    position:fixed;
+    left:0px;
+    bottom:0px;
+    width:100%;
 }
 
 
@@ -260,6 +265,7 @@ p {
 
     #sidebar-wrapper {
         width: 50px;
+        margin-top: 60px;
     }
 
         #sidebar-wrapper:hover {
@@ -280,7 +286,7 @@ p {
 
 
 #page-content-wrapper {
-    padding: 20px;
+    padding: 10px;
     position: relative;
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
@@ -305,8 +311,8 @@ p {
     width: auto;
 }
 
-.tabulation{
-    text-indent:20px;
+.tabulation {
+    text-indent: 20px;
 }
 
 ul {
@@ -319,7 +325,7 @@ ul {
     background: #eee;
     overflow: hidden;
     width: 100%;
-    margin-bottom : 15px;
+    margin-bottom: 15px;
 }
 
     #breadcrumbs-one li {
@@ -327,7 +333,7 @@ ul {
     }
 
     #breadcrumbs-one a {
-        padding: .7em 1em .7em 4em;
+        padding: .7em 1em .7em 2em;
         float: left;
         text-decoration: none;
         color: #444;
@@ -354,11 +360,11 @@ ul {
 
     #breadcrumbs-one a::after {
         z-index: 2;
-        border-left-color: orangered;
+        border-left-color: #eeeeee;
     }
 
     #breadcrumbs-one a::before {
-        border-left-color: orangered;
+        border-left-color: #eeeeee;
         right: -1.1em;
         z-index: 1;
     }
@@ -389,7 +395,27 @@ ul {
 }
 
 #content {
-    padding-left : 15px;
-  
-    min-height : 400px;
+    padding-left: 15px;
+    min-height: 500px;
+}
+
+/*Menu de niveau 2*/
+#menu-l2 {
+    text-align: center;
+}
+
+#li-menu-l2 {
+    display: inline;
+}
+
+#a-li-menu-l2 {
+    color: black;
+    padding: 6px 30px;
+    margin: 0 20px;
+}
+
+#title-l2 {
+    text-align: center;
+    text-decoration : underline;
+    margin-right : 3%;
 }

CD67.ModeleMVC.MVC/Scripts/sidebar_menu.js

@@ -1,40 +1,39 @@
-$("#menu-toggle").click(function (e) {
-    e.preventDefault();
-    $("#wrapper").toggleClass("toggled");
-    
-    
-});
-$("#menu-toggle-2").click(function (e) {
-    e.preventDefault();
-    $("#wrapper").toggleClass("toggled-2");
+//$("#menu-toggle").click(function (e) {
+//    e.preventDefault();
+//    $("#wrapper").toggleClass("toggled");
+//});
+
+//$("#menu-toggle-2").click(function (e) {
+//    e.preventDefault();
+//    $("#wrapper").toggleClass("toggled-2");
    
-    $('#menu ul').hide();
+//    $('#menu ul').hide();
  
-});
+//});
 
-function initMenu() {
-    $('#menu ul').hide();
-    $('#menu ul').children('.current').parent().show();
-    //$('#menu ul:first').show();
-    $('#menu li a').click(
-      function () {
-          var checkElement = $(this).next();
-          if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
-              return false;
-          }
-          if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
-              $('#menu ul:visible').slideUp('normal');
-              checkElement.slideDown('normal');
-              return false;
-          }
-      }
-      );
-}
+//function initMenu() {
+//    $('#menu ul').hide();
+//    $('#menu ul').children('.current').parent().show();
+//    //$('#menu ul:first').show();
+//    $('#menu li a').click(
+//      function () {
+//          var checkElement = $(this).next();
+//          if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
+//              return false;
+//          }
+//          if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
+//              $('#menu ul:visible').slideUp('normal');
+//              checkElement.slideDown('normal');
+//              return false;
+//          }
+//      }
+//      );
+//}
 
-function collapseMenu() {
+//function collapseMenu() {
    
-                $('#menu ul:visible').slideUp('normal');
+//                $('#menu ul:visible').slideUp('normal');
                 
-}
+//}
 
-$(document).ready(function () { initMenu(); });
+//$(document).ready(function () { initMenu(); });

CD67.ModeleMVC.MVC/Views/Home/About.cshtml

@@ -4,9 +4,10 @@
     Layout = "~/Views/Shared/_AppLayout.cshtml";
 }
 
-<h2>About</h2>
-
-<br />
-@Html.ActionLink("Gestion des Vikings", "index", "VIKINGS")
-<br /><br />
-@Html.ActionLink("Gestion des types de Vikings", "index", "TYPE_VIKING")
+<h2 id="title-l2">About</h2>
+<div>
+    <ul id="menu-l2">
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/VIKINGS">Vikings</a></li>
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/TYPE_VIKING">Type de Vikings</a></li>
+    </ul>
+</div>

CD67.ModeleMVC.MVC/Views/Home/Index.cshtml

@@ -4,9 +4,10 @@
     Layout = "~/Views/Shared/_AppLayout.cshtml";
 }
 
-<h2>Accueil</h2>
-
-<br />
-@Html.ActionLink("Gestion des Vikings", "index", "VIKINGS")
-<br /><br />
-@Html.ActionLink("Gestion des types de Vikings", "index", "TYPE_VIKING")
+<h2 id="title-l2">Accueil</h2>
+<div>
+    <ul id="menu-l2">
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/VIKINGS">Vikings</a></li>
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/TYPE_VIKING">Type de Vikings</a></li>
+    </ul>
+</div>

CD67.ModeleMVC.MVC/Views/Shared/_AppLayout.cshtml

@@ -18,122 +18,91 @@
     <link href="~/Content/cd67-model.css" rel="stylesheet">
     <link href="~/Content/cd67-custom.css" rel="stylesheet">
     <link href="~/Content/font-awesome.min.css" rel="stylesheet">
-
+    
+    <sidebar class="background-color2 navbar-fixed-top nav-stacked" id="sidebar-wrapper">
+        <ul class="sidebar-nav nav-stacked" id="menu">
+            <li>
+                <a class="active" href="/"><span class="fa-stack fa-lg pull-left "><i class="fa fa-home fa-stack-1x  "></i></span> Accueil</a>
+            </li>
+            <li>
+                <a href="/VIKINGS"><span class="fa-stack fa-lg pull-left"><i class="fa fa-gg fa-stack-1x "></i></span>Vikings</a>
+            </li>
+            <li>
+                <a href="/TYPE_VIKING"><span class="fa-stack fa-lg pull-left"><i class="fa fa-leanpub fa-stack-1x "></i></span>Types de Vikings</a>
+            </li>
+            <li>
+                <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-connectdevelop fa-stack-1x "></i></span>Contact</a>
+            </li>
+        </ul>
+    </sidebar>
 </head>
 
 <body>
-    <nav class="navbar navbar-default no-margin" onmouseover=collapseMenu() >
-        <!-- Menu en mode mobile et tablette -->
-
-        <div class="navbar-toggle">
-
-            <a class="brand" href="#"><img src="~/Images/LogoCD67.png" alt=""></a>
-
-            <button type="button" class="collapsed" data-toggle="collapse" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
-        </div>
-        <!-- Menu en mode PC -->
-        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+    <nav class="navbar-fixed-top navbar-default no-margin">
+        <div id="topbar" class="navbar navbar-inner">
+            <ul>
+                <li><a class="brand" href="/"><img src="~/Images/LogoCD67.png" alt=""></a></li>
 
-            <div id="topbar" class="navbar">
-                <div class="navbar-inner">
-                    <ul>
-                        <li class="active"><button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button></li>
-                        <li><a class="brand" href="#"><img src="~/Images/LogoCD67.png" alt=""></a></li>
-
-                    </ul>
-                    <ul id="titre" class="nav navbar ">
-                        <li><h1>Titre</h1></li>
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right" >
-                        <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                <span class="glyphicon glyphicon-user"></span>
-                                <strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.prenom_nom)</strong>
-                                <span class="glyphicon glyphicon-chevron-down"></span>
-                            </a>
-                            <ul class="dropdown-menu">
-                                <li>
-                                    <div class="navbar-login">
-                                        <div class="row">
-                                            <div class="col-lg-4">
-                                                <p class="text-center">
-                                                    <span class="glyphicon glyphicon-user icon-size"></span>
-                                                </p>
-                                            </div>
-                                            <div class="col-lg-8">
-                                                <p class="text-left"><strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.login)</strong></p>
-                                                <p class="text-left small">@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.email)</p>
-                                                @*<p class="text-left">
-                                                     <a href="#" class="btn btn-primary btn-block btn-sm">Paramètres</a>
-                                                </p>*@
-                                            </div>
-                                        </div>
+            </ul>
+            <ul id="titre" class="nav navbar ">
+                <li><h1>Titre</h1></li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                        <span class="glyphicon glyphicon-user"></span>
+                        <strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.prenom_nom)</strong>
+                        <span class="glyphicon glyphicon-chevron-down"></span>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li>
+                            <div class="navbar-login">
+                                <div class="row">
+                                    <div class="col-lg-4 ">
+                                        <p class="text-center">
+                                            <span class="glyphicon glyphicon-user icon-size"></span>
+                                        </p>
+                                    </div>
+                                    <div class="col-lg-8">
+                                        <p class="text-left"><strong>@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.login)</strong></p>
+                                        <p class="text-left small">@Utilisateur.getInfoUtilisateur(Utilisateur.InfoStandard.email)</p>
+                                        <p class="text-left">
+                                            <a href="#" class="btn btn-primary btn-block btn-sm">Paramètres</a>
+                                        </p>
                                     </div>
-                                </li>
-                                @*<li>
-                                        <div class="navbar-login navbar-login-session">
-                                            <div class="row">
-                                                <div class="col-lg-12">
-                                                    <p>
-                                                        <a href="#" class="btn btn-danger btn-block">Fermer la session</a>
-                                                    </p>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </li>*@
-                            </ul>
+                                </div>
+                            </div>
                         </li>
                     </ul>
-                </div>
-            </div>
-
+                </li>
+            </ul>
         </div>
     </nav>
-    <div id="wrapper" >
+    <div id="wrapper">
         <!-- Sidebar -->
 
-        <div class="background-color2" id="sidebar-wrapper" >
-            <ul class="sidebar-nav nav-stacked" id="menu">
 
-                <li>
-                    <a class="active" href="#"><span class="fa-stack fa-lg pull-left "><i class="fa fa-home fa-stack-1x  "></i></span> Accueil</a>
-                </li>
-                <li>
-                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-gg fa-stack-1x "></i></span>Vikings</a>
-                    <ul class="nav-pills nav-stacked" style="list-style-type:none;">
-                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-plus fa-stack-1x "></i></span>Nouveau</a></li>
-                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-search fa-stack-1x "></i></span>Recherche</a></li>
-
-                    </ul>
-                </li>
-                <li>
-                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-leanpub fa-stack-1x "></i></span>Types de Vikings</a>
-                    <ul class="nav-pills nav-stacked" style="list-style-type:none;">
-                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-plus fa-stack-1x "></i></span>Nouveau</a></li>
-                        <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-search fa-stack-1x "></i></span>Recherche</a></li>
-
-                    </ul>
-                </li>
-                <li>
-                    <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-connectdevelop fa-stack-1x "></i></span>Contact</a>
-                </li>
-            </ul>
-        </div>
         <div class="page-wrap" onmouseover=collapseMenu()>
-            @Html.MvcSiteMap().SiteMapPath()           
+            @Html.MvcSiteMap().SiteMapPath()
+        </div>
+        <div>
+
         </div>
 
-        <div id="content" onmouseover=collapseMenu()> 
+        <div id="content" onmouseover=collapseMenu()>
             @RenderBody()
         </div>
     </div>
-   
+
+
+
+
 
     <!-- /#wrapper -->
     <!-- jQuery -->
     <script src="~/Scripts/jquery-3.1.0.min.js" defer></script>
     <script src="~/Scripts/bootstrap.min.js" defer></script>
-    <script src="~/Scripts/sidebar_menu.js" async></script>
+
     <footer onmouseover=collapseMenu()>
         <div class="container">
             <div class="row">

CD67.ModeleMVC.MVC/Views/TYPE_VIKING/Index.cshtml

@@ -5,7 +5,13 @@
     Layout = "~/Views/Shared/_AppLayout.cshtml";
 }
 
-<h2>Index</h2>
+<h2 id="title-l2">Type de Vikings</h2>
+<div>
+    <ul id="menu-l2">
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/VIKINGS">Vikings</a></li>
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/">Accueil</a></li>
+    </ul>
+</div>
 
 <p>
     @Html.ActionLink("Ajouter", "Create")

CD67.ModeleMVC.MVC/Views/VIKINGS/Index.cshtml

@@ -5,7 +5,13 @@
     Layout = "~/Views/Shared/_AppLayout.cshtml";
 }
 
-<h2>Index</h2>
+<h2 id="title-l2">Vikings</h2>
+<div>
+    <ul id="menu-l2">
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/">Accueil</a></li>
+        <li id="li-menu-l2"><a id="a-li-menu-l2" class="btn-primary btn-sm" href="~/TYPE_VIKING">Type de Vikings</a></li>
+    </ul>
+</div>
 
 <p>
     @Html.ActionLink("Ajouter", "Create")