Afficher un bouton permettant d'afficher le menu (screen < 768px)

Lors de l'affichage smartphone, le menu disparait mais aucun bouton ne permet de le réafficher.

frontend/views/layouts/main.php

@@ -82,65 +82,74 @@ $is_home = (Yii::$app->controller->id == 'site' && Yii::$app->controller->action
                     </div>
                 <?php endif; ?>
 		<header id="header">
-                    <div id="the-header" class="container">
-                        <a id="link-home" href="<?= Yii::$app->urlManager->createUrl('site/index') ; ?>">
-                            <img class="icon" src="<?php echo Yii::$app->urlManager->getBaseUrl(); ?>/img/laboulange3.png" alt="" />
-                            <div class="text">
-                                <div class="bap">La boîte à pain</div>
-                                <div class="plateforme">Plateforme de réservation
-                                <?php if(YII_ENV == 'dev' || YII_ENV == 'demo'): ?><?php if(YII_ENV == 'dev'): ?>(dév)<?php elseif(YII_ENV == 'demo'): ?>(démo)<?php endif; ?><?php endif; ?></div>
-                            </div>
-                        </a>
-                        <nav>
-                        <?php
-                            echo Nav::widget([
-                                'encodeLabels' => false,
-                                'options' => ['class' =>'nav nav-pills'],
-                                'items' => [
-                                    [
-                                        'label' => '<span class="glyphicon glyphicon-th-list"></span> Accueil',
-                                        'url' => Yii::$app->urlManager->createUrl(['site/index']),
-                                        'active' => $this->getControllerAction() == 'site/index'
-                                    ],
-                                    [
-                                        'label' => '<span class="glyphicon glyphicon-grain"></span> Producteurs',
-                                        'url' => Yii::$app->urlManager->createUrl(['site/producers']),
-                                        'active' => $this->getControllerAction() == 'site/producers',
-                                        'options' => ['id' => 'link-producteurs']
-                                    ],
-                                    [
-                                        'label' => '<span class="glyphicon glyphicon-log-in"></span> Connexion',
-                                        'url' => Yii::$app->urlManager->createUrl(['site/login']),
-                                        'visible' => Yii::$app->user->isGuest,
-                                        'active' => $this->getControllerAction() == 'site/login'
-                                    ],
-                                    [
-                                        'label' => '<span class="glyphicon glyphicon-user"></span> Inscription',
-                                        'url' => Yii::$app->urlManager->createUrl(['site/signup']),
-                                        'visible' => Yii::$app->user->isGuest,
-                                        'active' => $this->getControllerAction() == 'site/signup'
-                                    ],
-                                    [
-                                        'label' => '<span class="glyphicon glyphicon-user"></span> '.((!Yii::$app->user->isGuest) ? Html::encode(Yii::$app->user->identity->prenom .' '.strtoupper(substr(Yii::$app->user->identity->nom, 0, 1))) : '').'. ',
-                                        'options' => ['id' => 'label1'],
-                                        'url' => '#',
+                    <nav class="navbar navbar-default">
+                        <div id="the-header" class="container">
+                            <div class="navbar-header">
+                                <a id="link-home" href="<?= Yii::$app->urlManager->createUrl('site/index') ; ?>">
+                                    <img class="icon" src="<?php echo Yii::$app->urlManager->getBaseUrl(); ?>/img/laboulange3.png" alt="" />
+                                    <div class="text">
+                                        <div class="bap">La boîte à pain</div>
+                                        <div class="plateforme">Plateforme de réservation
+                                        <?php if(YII_ENV == 'dev' || YII_ENV == 'demo'): ?><?php if(YII_ENV == 'dev'): ?>(dév)<?php elseif(YII_ENV == 'demo'): ?>(démo)<?php endif; ?><?php endif; ?></div>
+                                    </div>
+                                </a>
+                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                    <span class="icon-bar"></span>
+                                </button>
+                            </div>    
+                                <div id="w0-collapse" class="collapse navbar-collapse">
+                                <?php
+                                    echo Nav::widget([
+                                        'encodeLabels' => false,
+                                        'options' => ['class' =>'nav nav-pills navbar-nav navbar-right'],
                                         'items' => [
                                             [
-                                                'label' => 'Profil',
-                                                'url' => Yii::$app->urlManager->createUrl(['user/update']),
+                                                'label' => '<span class="glyphicon glyphicon-th-list"></span> Accueil',
+                                                'url' => Yii::$app->urlManager->createUrl(['site/index']),
+                                                'active' => $this->getControllerAction() == 'site/index'
                                             ],
                                             [
-                                                'label' => '<span class="glyphicon glyphicon-off"></span> Déconnexion',
-                                                'url' => Yii::$app->urlManager->createUrl(['site/logout']),
-                                            ]
-                                        ],
-                                        'visible' => !Yii::$app->user->isGuest
-                                    ],
-                                ]
-                            ]);
-                        ?>
-                        </nav>
-                    </div>
+                                                'label' => '<span class="glyphicon glyphicon-grain"></span> Producteurs',
+                                                'url' => Yii::$app->urlManager->createUrl(['site/producers']),
+                                                'active' => $this->getControllerAction() == 'site/producers',
+                                                'options' => ['id' => 'link-producteurs']
+                                            ],
+                                            [
+                                                'label' => '<span class="glyphicon glyphicon-log-in"></span> Connexion',
+                                                'url' => Yii::$app->urlManager->createUrl(['site/login']),
+                                                'visible' => Yii::$app->user->isGuest,
+                                                'active' => $this->getControllerAction() == 'site/login'
+                                            ],
+                                            [
+                                                'label' => '<span class="glyphicon glyphicon-user"></span> Inscription',
+                                                'url' => Yii::$app->urlManager->createUrl(['site/signup']),
+                                                'visible' => Yii::$app->user->isGuest,
+                                                'active' => $this->getControllerAction() == 'site/signup'
+                                            ],
+                                            [
+                                                'label' => '<span class="glyphicon glyphicon-user"></span> '.((!Yii::$app->user->isGuest) ? Html::encode(Yii::$app->user->identity->prenom .' '.strtoupper(substr(Yii::$app->user->identity->nom, 0, 1))) : '').'. ',
+                                                'options' => ['id' => 'label1'],
+                                                'url' => '#',
+                                                'items' => [
+                                                    [
+                                                        'label' => 'Profil',
+                                                        'url' => Yii::$app->urlManager->createUrl(['user/update']),
+                                                    ],
+                                                    [
+                                                        'label' => '<span class="glyphicon glyphicon-off"></span> Déconnexion',
+                                                        'url' => Yii::$app->urlManager->createUrl(['site/logout']),
+                                                    ]
+                                                ],
+                                                'visible' => !Yii::$app->user->isGuest
+                                            ],
+                                        ]
+                                    ]);
+                                ?>  
+                            </div>
+                        </div>
+                    </nav>
 		</header>
                 
                 <?php if(!Yii::$app->user->isGuest): ?>

frontend/web/css/ie.css

@@ -1,14 +1,45 @@
-/* Welcome to Compass. Use this file to write IE specific override styles.
- * Import this file using the following HTML or equivalent:
- * <!--[if IE]>
- *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
- * <![endif]--> */
-/* line 7, ../sass/ie.scss */
+@charset "UTF-8";
+/** 
+Copyright La boîte à pain (2018) 
+
+contact@laboiteapain.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+/* line 37, ../sass/ie.scss */
 #header #logo a {
   padding: 0px;
 }
 
-/* line 12, ../sass/ie.scss */
+/* line 42, ../sass/ie.scss */
 .home #header nav {
   width: 532px;
   width: 612px;
@@ -16,24 +47,24 @@
   width: 772px;
 }
 
-/* line 24, ../sass/ie.scss */
+/* line 54, ../sass/ie.scss */
 #main #content #presentation #fournil,
 #main #content #presentation #epicerie {
   border-top: 1px solid #e0e0e0;
 }
 
-/* line 30, ../sass/ie.scss */
+/* line 60, ../sass/ie.scss */
 #contact-form {
   position: relative;
   width: 100%;
 }
-/* line 33, ../sass/ie.scss */
+/* line 63, ../sass/ie.scss */
 #contact-form .control-label {
   /*text-align: left ;
   float: none ;*/
   float: left;
 }
-/* line 38, ../sass/ie.scss */
+/* line 68, ../sass/ie.scss */
 #contact-form .col-sm-6 {
   width: 50%;
 }

frontend/web/css/ie7.css

@@ -1,4 +1,40 @@
-/* line 1, ../sass/ie7.scss */
+@charset "UTF-8";
+/** 
+Copyright La boîte à pain (2018) 
+
+contact@laboiteapain.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/
+/* line 37, ../sass/ie7.scss */
 #header nav ul li a {
   padding-bottom: 0px;
   height: 76px;

frontend/web/css/print.css

@@ -1,3 +1,36 @@
-/* Welcome to Compass. Use this file to define print styles.
- * Import this file using the following HTML or equivalent:
- * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
+@charset "UTF-8";
+/** 
+Copyright La boîte à pain (2018) 
+
+contact@laboiteapain.net
+
+Ce logiciel est un programme informatique servant à aider les producteurs 
+à distribuer leur production en circuits courts. 
+
+Ce logiciel est régi par la licence CeCILL soumise au droit français et
+respectant les principes de diffusion des logiciels libres. Vous pouvez
+utiliser, modifier et/ou redistribuer ce programme sous les conditions
+de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
+sur le site "http://www.cecill.info".
+
+En contrepartie de l'accessibilité au code source et des droits de copie,
+de modification et de redistribution accordés par cette licence, il n'est
+offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
+seule une responsabilité restreinte pèse sur l'auteur du programme,  le
+titulaire des droits patrimoniaux et les concédants successifs.
+
+A cet égard  l'attention de l'utilisateur est attirée sur les risques
+associés au chargement,  à l'utilisation,  à la modification et/ou au
+développement et à la reproduction du logiciel par l'utilisateur étant 
+donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
+manipuler et qui le réserve donc à des développeurs et des professionnels
+avertis possédant  des  connaissances  informatiques approfondies.  Les
+utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
+logiciel à leurs besoins dans des conditions permettant d'assurer la
+sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
+à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 
+
+Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
+pris connaissance de la licence CeCILL, et que vous en avez accepté les
+termes.
+*/

frontend/web/sass/_responsive.scss

@@ -34,38 +34,56 @@ pris connaissance de la licence CeCILL, et que vous en avez accepté les
 termes.
 */
 
-@media screen and (max-width: 1000px) {
-
-    #content {
-        padding-top: 0px ;
-    }
-
+@media screen and (min-width: 768px) and (max-width: 1000px) {
+    
     #header {
-        position: relative ;
-
         nav {
-
+            
+            .navbar-nav {
+                padding-top: 30px ;
+            }
+            
             ul {
-                margin-top: 5px ;
-                float: left ;
                 li {
-                    float: right ;
-                    display: none ;
-
                     a {
-                        padding: 5px ;
-                        height: auto ;
-                        line-height: 20px ;
+                        padding: 3px 7px ;
+                        font-size: 13px ;
                     }
                 }
             }
         }
+    }
+    
+}
+
+@media screen and (max-width: 768px) {
 
+    #content {
+        padding-top: 0px ;
+    }
+
+    #header {
+        position: relative ;
+
+        .navbar-collapse {
+            border: 0px none ;
+        }
+        
         nav {
             width: 100% ;
             ul {
+                display: block ;
                 float: none ;
                 margin: 0px none ;
+                border: 0px none ;
+                
+                li {
+                    display: block ;
+                    float: none ;
+                    a {
+                        display: block ;
+                    }
+                }
             }
         }
 

frontend/web/sass/screen.scss

@@ -211,6 +211,7 @@ ul {
         
         #the-header {
             height: 80px ;
+            height: auto ;
         }
         
         #env-dev {
@@ -227,9 +228,12 @@ ul {
         }
 
         #link-home {
-            position: absolute ;
+            /*position: absolute ;
             top: 10px ;
-            left: 0px ;
+            left: 0px ;*/
+            float: left ;
+            padding-top: 10px ;
+            padding-bottom: 10px ;
             text-decoration: none ;
             font-size: 22px ;
             color: black ;
@@ -264,13 +268,31 @@ ul {
         }
         
         nav {
-            padding-top: 22px ;
+            //padding-top: 22px ;
+            padding-top: 0px ;
+            margin-bottom: 0px ;
+            border: 0px none ;
+            background: none ;
+            background-color: #f8f1dd ;
+            @include box-shadow(none) ;
+
+            .navbar-nav {
+                padding-top: 17px ;
+            }
+            
+            .navbar-toggle {
+                background-color: white ;
+            }
+            
             ul {
                 float: right ;
                 li {
                     a {
                         text-decoration: none ;
                         color: $courant ;
+                        @include box-shadow(none) ;
+                        background-color: transparent ;
+                        padding: 10px 20px ;
                         
                         &:hover {
                             color: black ;
@@ -280,6 +302,7 @@ ul {
                     
                     &.active {
                         a {
+                            background: none ;
                             background-color: white;
                         }
                     }