Producer : mise en page header

Amélioration globale de la mise en page.
Ajout des informations concernant la prise de commande (heure limite, délai) ainsi que le lien "favoris".

producer/views/layouts/main.php

@@ -72,19 +72,27 @@ $producer = $this->context->getProducer() ;
     
     <header id="header">
             <div class="container">
-                <h1><?= Html::encode($producer->nom); ?></h1>
-                <h2><?= Html::encode($producer->type) ?> à <?= Html::encode($producer->ville); ?> (<?= Html::encode($producer->code_postal); ?>)</h2>
+                <h1><?= Html::encode($producer->nom); ?> <span>/ <?= Html::encode($producer->type) ?> à <?= Html::encode($producer->ville); ?> (<?= Html::encode($producer->code_postal); ?>)</span></h1>
                 <?php if(!Yii::$app->user->isGuest):  ?>
                     <?php 
                         $user_etablissement = UserEtablissement::findOne(['id_user' => Yii::$app->user->identity->id, 'id_etablissement' => $producer->id ]) ;
                         if($user_etablissement):
                     ?>
                         <div id="credit">
-                            <div class="info"><a href="<?= Yii::$app->urlManagerFrontend->createAbsoluteUrl('site/creditpain'); ?>"><span class="text">Crédit </span><span class="glyphicon glyphicon-info-sign"></span></a></div>
-                            <div id="the-credit"><?= number_format($user_etablissement->credit, 2); ?> €</div>
+                            <span class="info"><a href="<?= Yii::$app->urlManagerFrontend->createAbsoluteUrl('site/creditpain'); ?>"><span class="text">Crédit </span><span class="glyphicon glyphicon-info-sign"></span></a></span>
+                            <span id="the-credit"><?= number_format($user_etablissement->credit, 2); ?> €</span>
                         </div>
                         <?php endif; ?>
                 <?php endif; ?>
+                
+                <div id="infos">
+                    <span data-toggle="tooltip" data-placement="bottom" title="Heure limite de commande">
+                        <span class="glyphicon glyphicon-time"></span> Commande avant 
+                        <strong><?php echo Html::encode($producer->heure_limite_commande) ?> h</strong></span>, 
+                    <span data-toggle="tooltip" data-placement="bottom" title="Exemple : commande le lundi pour le <?php if($producer->delai_commande == 1): ?>mardi<?php elseif($producer->delai_commande == 2): ?>mercredi<?php elseif($producer->delai_commande == 3): ?>jeudi<?php elseif($producer->delai_commande == 4): ?>vendredi<?php elseif($producer->delai_commande == 5): ?>samedi<?php elseif($producer->delai_commande == 6): ?>dimanche<?php elseif($producer->delai_commande == 7): ?>lundi d'après<?php endif; ?>"><strong><?= Html::encode($producer->delai_commande) ?> jour<?php if($producer->delai_commande > 1): ?>s<?php endif; ?></strong> à l'avance</span>                    
+                    <?php if(!Yii::$app->user->isGuest): ?><span class="favorite"><span class="glyphicon glyphicon-star"></span> <a href="<?= Yii::$app->urlManagerProducer->createUrl(['producer/favorite']); ?>" data-toggle="tooltip" data-placement="bottom" title="Ajouter à mes favoris">Favoris</a></span><?php endif; ?>
+                    <div class="clr"></div>
+                </div>
             </div>
     </header>
     

producer/web/css/screen.css

@@ -199,8 +199,8 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
 #header {
   background-color: #BB8757;
   text-align: center;
-  padding-top: 40px;
-  padding-bottom: 70px;
+  padding-top: 25px;
+  padding-bottom: 50px;
   border-bottom: solid 1px #e0e0e0;
 }
 /* line 146, ../sass/_layout.scss */
@@ -208,61 +208,93 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   position: relative;
   padding: 0px;
 }
-/* line 151, ../sass/_layout.scss */
+/* line 152, ../sass/_layout.scss */
 #header h1, #header h2 {
   color: white;
 }
-/* line 155, ../sass/_layout.scss */
+/* line 156, ../sass/_layout.scss */
 #header h1 {
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   font-size: 35px;
-  padding-bottom: 20px;
+  line-height: 35px;
   font-weight: bold;
+  padding-bottom: 5px;
+  text-align: left;
 }
-/* line 163, ../sass/_layout.scss */
-#header h2 {
-  font-family: "myriadpro-it";
-  font-size: 18px;
-  padding-bottom: 15px;
+/* line 165, ../sass/_layout.scss */
+#header h1 span {
+  font-family: "myriadpro-light";
+  font-size: 27px;
+  font-weight: normal;
+}
+/* line 172, ../sass/_layout.scss */
+#header #infos {
+  text-align: left;
+  padding-bottom: 10px;
+  padding-top: 8px;
+  margin-bottom: 0px;
+  color: #F8F1DD;
+  font-size: 14px;
+}
+/* line 180, ../sass/_layout.scss */
+#header #infos .favorite {
+  border-left: solid 1px #F8F1DD;
+  padding-left: 10px;
+}
+/* line 185, ../sass/_layout.scss */
+#header #infos a {
+  color: white;
+  text-decoration: underline;
+}
+/* line 190, ../sass/_layout.scss */
+#header #infos strong {
+  font-weight: bold;
 }
-/* line 169, ../sass/_layout.scss */
+/* line 195, ../sass/_layout.scss */
 #header #credit {
-  position: absolute;
-  top: -5px;
-  right: 0px;
+  position: relative;
+  top: 10px;
+  float: right;
   color: white;
   font-family: "myriadpro-semibold";
-  font-size: 18px;
+  font-size: 16px;
 }
-/* line 177, ../sass/_layout.scss */
+/* line 203, ../sass/_layout.scss */
 #header #credit .info {
   padding-bottom: 5px;
   border-bottom: solid 1px #BB8757;
   text-align: right;
 }
-/* line 181, ../sass/_layout.scss */
+/* line 207, ../sass/_layout.scss */
 #header #credit .info a {
   color: white;
 }
-/* line 189, ../sass/_layout.scss */
+/* line 212, ../sass/_layout.scss */
+#header #credit span.text {
+  font-family: "myriadpro-regular";
+}
+/* line 216, ../sass/_layout.scss */
 #header #credit span.glyphicon {
   font-size: 16px;
 }
-/* line 193, ../sass/_layout.scss */
+/* line 220, ../sass/_layout.scss */
 #header #credit #the-credit {
   margin-top: 7px;
-  padding: 10px 15px;
-  padding-bottom: 8px;
+  padding: 6px 15px;
+  padding-bottom: 4px;
   background-color: #F8F1DD;
   color: #BB8757;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
 }
 
-/* line 203, ../sass/_layout.scss */
+/* line 231, ../sass/_layout.scss */
 #main {
   background-color: #F8F1DD;
 }
-/* line 206, ../sass/_layout.scss */
+/* line 234, ../sass/_layout.scss */
 #main #main-nav {
   width: 100%;
   position: relative;
@@ -270,14 +302,14 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   background-color: white;
   border-bottom: solid 1px #e0e0e0;
 }
-/* line 215, ../sass/_layout.scss */
+/* line 243, ../sass/_layout.scss */
 #main #main-nav ul li a {
   color: #BB8757;
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   border-right: solid 1px #e0e0e0;
 }
-/* line 222, ../sass/_layout.scss */
+/* line 250, ../sass/_layout.scss */
 #main #main-nav ul li a:hover, #main #main-nav ul li.active a {
   background: none;
   border-bottom: solid 1px #BB8757;
@@ -285,18 +317,18 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 229, ../sass/_layout.scss */
+/* line 257, ../sass/_layout.scss */
 #main #main-nav ul li#btn-administration {
   background-color: #F8F1DD;
   float: right;
 }
-/* line 236, ../sass/_layout.scss */
+/* line 264, ../sass/_layout.scss */
 #main #main-nav #user {
   color: #BB8757;
   float: right;
   padding: 10px;
 }
-/* line 243, ../sass/_layout.scss */
+/* line 271, ../sass/_layout.scss */
 #main #page-title {
   padding-left: 15px;
   padding-right: 15px;
@@ -309,7 +341,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   top: -10px;
   text-align: center;
 }
-/* line 256, ../sass/_layout.scss */
+/* line 284, ../sass/_layout.scss */
 #main .container {
   padding: 0px;
   background-color: white;
@@ -317,30 +349,30 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   border-left: solid 1px #e0e0e0;
   border-right: solid 1px #e0e0e0;
 }
-/* line 264, ../sass/_layout.scss */
+/* line 292, ../sass/_layout.scss */
 #main #content {
   padding-bottom: 20px;
   padding: 0px 20px 20px 20px;
 }
-/* line 268, ../sass/_layout.scss */
+/* line 296, ../sass/_layout.scss */
 #main #content h1, #main #content h2, #main #content h3, #main #content h4, #main #content h5, #main #content h6 {
   font-family: "myriadpro-regular";
   margin-top: 30px;
   margin-bottom: 20px;
 }
-/* line 273, ../sass/_layout.scss */
+/* line 301, ../sass/_layout.scss */
 #main #content h1.first, #main #content h2.first, #main #content h3.first, #main #content h4.first, #main #content h5.first, #main #content h6.first {
   margin-top: 0px;
 }
-/* line 278, ../sass/_layout.scss */
+/* line 306, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 282, ../sass/_layout.scss */
+/* line 310, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 287, ../sass/_layout.scss */
+/* line 315, ../sass/_layout.scss */
 #main #content h3 {
   font-family: "myriadpro-light";
   text-transform: uppercase;
@@ -349,7 +381,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   color: white;
   text-align: center;
 }
-/* line 294, ../sass/_layout.scss */
+/* line 322, ../sass/_layout.scss */
 #main #content h3 span {
   background-color: #BB8757;
   padding: 10px 20px;
@@ -358,29 +390,29 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   color: #BB8757;
   border: dotted 1px #BB8757;
 }
-/* line 305, ../sass/_layout.scss */
+/* line 333, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 309, ../sass/_layout.scss */
+/* line 337, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 313, ../sass/_layout.scss */
+/* line 341, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
 
-/* line 319, ../sass/_layout.scss */
+/* line 347, ../sass/_layout.scss */
 #footer {
   background-color: #BB8757;
   height: 100px;
 }
-/* line 323, ../sass/_layout.scss */
+/* line 351, ../sass/_layout.scss */
 #footer .container {
   padding: 0px;
 }
-/* line 325, ../sass/_layout.scss */
+/* line 353, ../sass/_layout.scss */
 #footer .container .overflow {
   height: 30px;
   background-color: white;
@@ -388,12 +420,12 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   border-right: solid 1px #e0e0e0;
   border-bottom: solid 1px #e0e0e0;
 }
-/* line 333, ../sass/_layout.scss */
+/* line 361, ../sass/_layout.scss */
 #footer .container .content {
   padding-top: 20px;
   color: white;
 }
-/* line 337, ../sass/_layout.scss */
+/* line 365, ../sass/_layout.scss */
 #footer .container .content a {
   color: white;
   text-decoration: underline;

producer/web/sass/_layout.scss

@@ -139,13 +139,14 @@ ul.pagination {
 #header {
     background-color: $color1 ;
     text-align: center ;
-    padding-top: 40px ;
-    padding-bottom: 70px ;
+    padding-top: 25px ;
+    padding-bottom: 50px ;
     border-bottom: solid 1px #e0e0e0 ;
     
     .container {
         position: relative ;
         padding: 0px ;
+        
     }
     
     h1, h2 {
@@ -156,23 +157,48 @@ ul.pagination {
         text-transform: uppercase ;
         font-family: 'myriadpro-regular' ;
         font-size: 35px ;
-        padding-bottom: 20px ;
+        line-height: 35px ;
         font-weight: bold ;
+        padding-bottom: 5px ;
+        text-align: left ;
+        
+        span {
+            font-family: 'myriadpro-light' ;
+            font-size: 27px ;
+            font-weight: normal ;
+        }
     }
     
-    h2 {
-        font-family: 'myriadpro-it' ;
-        font-size: 18px ;
-        padding-bottom: 15px ;
+    #infos {
+        text-align: left ;
+        padding-bottom: 10px ;
+        padding-top: 8px; 
+        margin-bottom: 0px ;
+        color: $color2 ;
+        font-size: 14px ;
+        
+        .favorite {
+            border-left: solid 1px $color2 ;
+            padding-left: 10px ;
+        }
+        
+        a {
+            color: white ;
+            text-decoration: underline ;
+        }
+        
+        strong {
+            font-weight: bold ;
+        }
     }
     
     #credit {
-        position: absolute ;
-        top: -5px ;
-        right: 0px ;
+        position: relative ;
+        top: 10px ;
+        float: right ;
         color: white ;
         font-family: 'myriadpro-semibold' ;
-        font-size: 18px ;
+        font-size: 16px ;
         
         .info {
             padding-bottom: 5px ;
@@ -184,6 +210,7 @@ ul.pagination {
         }
         
         span.text {
+            font-family: 'myriadpro-regular' ;
         }
         
         span.glyphicon {
@@ -192,10 +219,11 @@ ul.pagination {
         
         #the-credit {
             margin-top: 7px ;
-            padding: 10px 15px ;
-            padding-bottom: 8px ;
+            padding: 6px 15px ;
+            padding-bottom: 4px ;
             background-color: $color2 ;
             color: $color1 ;
+            @include border-radius(7px) ;
         }
     }
 }