Crédit pain dans layout producer

Modification du style de l'info crédit pain dans le header.
Lien vers la page d'infos sur le frontend.

producer/views/layouts/main.php

@@ -78,7 +78,10 @@ $producer = $this->context->getProducer() ;
                         $user_etablissement = UserEtablissement::findOne(['id_user' => Yii::$app->user->identity->id, 'id_etablissement' => $producer->id ]) ;
                         if($user_etablissement):
                     ?>
-                        <div id="credit"><span>Crédit :</span> <?= number_format($user_etablissement->credit, 2); ?> €</div>
+                        <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>
+                        </div>
                         <?php endif; ?>
                 <?php endif; ?>
             </div>

producer/web/css/screen.css

@@ -229,23 +229,40 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
 /* line 169, ../sass/_layout.scss */
 #header #credit {
   position: absolute;
-  top: 0px;
+  top: -5px;
   right: 0px;
   color: white;
   font-family: "myriadpro-semibold";
-  border-bottom: solid 1px white;
-  padding: 7px 0px;
+  font-size: 18px;
 }
-/* line 178, ../sass/_layout.scss */
-#header #credit span {
-  font-family: "myriadpro-light";
+/* line 177, ../sass/_layout.scss */
+#header #credit .info {
+  padding-bottom: 5px;
+  border-bottom: solid 1px #BB8757;
+  text-align: right;
+}
+/* line 181, ../sass/_layout.scss */
+#header #credit .info a {
+  color: white;
+}
+/* line 189, ../sass/_layout.scss */
+#header #credit span.glyphicon {
+  font-size: 16px;
+}
+/* line 193, ../sass/_layout.scss */
+#header #credit #the-credit {
+  margin-top: 7px;
+  padding: 10px 15px;
+  padding-bottom: 8px;
+  background-color: #F8F1DD;
+  color: #BB8757;
 }
 
-/* line 184, ../sass/_layout.scss */
+/* line 203, ../sass/_layout.scss */
 #main {
   background-color: #F8F1DD;
 }
-/* line 187, ../sass/_layout.scss */
+/* line 206, ../sass/_layout.scss */
 #main #main-nav {
   width: 100%;
   position: relative;
@@ -253,14 +270,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 196, ../sass/_layout.scss */
+/* line 215, ../sass/_layout.scss */
 #main #main-nav ul li a {
   color: #BB8757;
   text-transform: uppercase;
   font-family: "myriadpro-regular";
   border-right: solid 1px #e0e0e0;
 }
-/* line 203, ../sass/_layout.scss */
+/* line 222, ../sass/_layout.scss */
 #main #main-nav ul li a:hover, #main #main-nav ul li.active a {
   background: none;
   border-bottom: solid 1px #BB8757;
@@ -268,18 +285,18 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 210, ../sass/_layout.scss */
+/* line 229, ../sass/_layout.scss */
 #main #main-nav ul li#btn-administration {
   background-color: #F8F1DD;
   float: right;
 }
-/* line 217, ../sass/_layout.scss */
+/* line 236, ../sass/_layout.scss */
 #main #main-nav #user {
   color: #BB8757;
   float: right;
   padding: 10px;
 }
-/* line 224, ../sass/_layout.scss */
+/* line 243, ../sass/_layout.scss */
 #main #page-title {
   padding-left: 15px;
   padding-right: 15px;
@@ -292,7 +309,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   top: -10px;
   text-align: center;
 }
-/* line 237, ../sass/_layout.scss */
+/* line 256, ../sass/_layout.scss */
 #main .container {
   padding: 0px;
   background-color: white;
@@ -300,30 +317,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 245, ../sass/_layout.scss */
+/* line 264, ../sass/_layout.scss */
 #main #content {
   padding-bottom: 20px;
   padding: 0px 20px 20px 20px;
 }
-/* line 249, ../sass/_layout.scss */
+/* line 268, ../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 254, ../sass/_layout.scss */
+/* line 273, ../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 259, ../sass/_layout.scss */
+/* line 278, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 263, ../sass/_layout.scss */
+/* line 282, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 268, ../sass/_layout.scss */
+/* line 287, ../sass/_layout.scss */
 #main #content h3 {
   font-family: "myriadpro-light";
   text-transform: uppercase;
@@ -332,35 +349,35 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   color: white;
   text-align: center;
 }
-/* line 275, ../sass/_layout.scss */
+/* line 294, ../sass/_layout.scss */
 #main #content h3 span {
   background-color: #BB8757;
   padding: 10px 20px;
   padding-top: 14px;
 }
-/* line 282, ../sass/_layout.scss */
+/* line 301, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 286, ../sass/_layout.scss */
+/* line 305, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 290, ../sass/_layout.scss */
+/* line 309, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
 
-/* line 296, ../sass/_layout.scss */
+/* line 315, ../sass/_layout.scss */
 #footer {
   background-color: #BB8757;
   height: 100px;
 }
-/* line 300, ../sass/_layout.scss */
+/* line 319, ../sass/_layout.scss */
 #footer .container {
   padding: 0px;
 }
-/* line 302, ../sass/_layout.scss */
+/* line 321, ../sass/_layout.scss */
 #footer .container .overflow {
   height: 30px;
   background-color: white;
@@ -368,12 +385,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 310, ../sass/_layout.scss */
+/* line 329, ../sass/_layout.scss */
 #footer .container .content {
   padding-top: 20px;
   color: white;
 }
-/* line 314, ../sass/_layout.scss */
+/* line 333, ../sass/_layout.scss */
 #footer .container .content a {
   color: white;
   text-decoration: underline;

producer/web/sass/_layout.scss

@@ -168,15 +168,34 @@ ul.pagination {
     
     #credit {
         position: absolute ;
-        top: 0px ;
+        top: -5px ;
         right: 0px ;
         color: white ;
         font-family: 'myriadpro-semibold' ;
-        border-bottom: solid 1px white ;
-        padding: 7px 0px ;
+        font-size: 18px ;
         
-        span {
-            font-family: 'myriadpro-light' ;
+        .info {
+            padding-bottom: 5px ;
+            border-bottom: solid 1px $color1 ;
+            text-align: right ;
+            a {
+                color: white ;
+            }
+        }
+        
+        span.text {
+        }
+        
+        span.glyphicon {
+            font-size: 16px ;
+        }
+        
+        #the-credit {
+            margin-top: 7px ;
+            padding: 10px 15px ;
+            padding-bottom: 8px ;
+            background-color: $color2 ;
+            color: $color1 ;
         }
     }
 }