[producer] Logo du producteur

producer/views/layouts/main.php

@@ -126,6 +126,11 @@ if(!Yii::$app->user->isGuest) {
     <div class="container">
         <div id="left" class="col-md-3">
             <div class="fixed">
+                <?php if(strlen($producer->logo)): ?>
+                <div id="logo">
+                    <img class="img-logo" src="<?= Yii::$app->urlManager->baseUrl; ?>/uploads/<?= $producer->logo; ?>" alt="Logo <?= Html::encode($producer->name) ?>" />
+                </div>
+                <?php endif; ?>
                 <h1><?= Html::encode($producer->name); ?></h1> 
                 <h2><?= Html::encode($producer->type) ?> à <?= Html::encode($producer->city); ?> (<?= Html::encode($producer->postcode); ?>)</h2>
 

producer/web/css/screen.css

@@ -281,7 +281,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
 #left {
   background-color: #FFF8DC;
   text-align: center;
-  margin-top: 25px;
+  margin-top: 15px;
   padding: 0px;
   position: relative;
 }
@@ -290,52 +290,76 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   position: fixed;
   display: none;
 }
-/* line 204, ../sass/_layout.scss */
+/* line 205, ../sass/_layout.scss */
+#left #logo {
+  position: relative;
+  background-color: white;
+  width: 110px;
+  height: 110px;
+  margin: 0px auto;
+  margin-bottom: 20px;
+  -moz-border-radius: 110px;
+  -webkit-border-radius: 110px;
+  border-radius: 110px;
+  border: solid 1px gray;
+  text-align: center;
+  overflow: hidden;
+}
+/* line 217, ../sass/_layout.scss */
+#left #logo img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 90px;
+  max-height: 90px;
+}
+/* line 227, ../sass/_layout.scss */
 #left h1, #left h2, #left #infos, #left #infos a {
   color: #323232;
 }
-/* line 208, ../sass/_layout.scss */
+/* line 231, ../sass/_layout.scss */
 #left h1 {
   text-transform: uppercase;
   font-family: "highvoltageregular";
-  font-size: 35px;
-  line-height: 35px;
+  font-size: 25px;
+  line-height: 25px;
   font-weight: bold;
   padding-bottom: 5px;
   text-align: center;
   font-weight: normal;
 }
-/* line 219, ../sass/_layout.scss */
+/* line 242, ../sass/_layout.scss */
 #left h2 {
   font-family: "capsuularegular";
-  font-size: 20px;
+  font-size: 15px;
   font-weight: normal;
   text-align: center;
 }
-/* line 225, ../sass/_layout.scss */
+/* line 248, ../sass/_layout.scss */
 #left h2 .favorite {
   padding-left: 0px;
 }
-/* line 228, ../sass/_layout.scss */
+/* line 251, ../sass/_layout.scss */
 #left h2 .favorite .glyphicon {
   font-size: 14px;
 }
-/* line 233, ../sass/_layout.scss */
+/* line 256, ../sass/_layout.scss */
 #left h2 a {
   color: #323232;
 }
-/* line 239, ../sass/_layout.scss */
+/* line 262, ../sass/_layout.scss */
 #left nav#main-nav {
   background-color: white;
   border: solid 1px #e0e0e0;
   border-bottom: 0px none;
-  margin-top: 30px;
+  margin-top: 20px;
 }
-/* line 246, ../sass/_layout.scss */
+/* line 269, ../sass/_layout.scss */
 #left nav#main-nav ul li {
   display: block;
 }
-/* line 249, ../sass/_layout.scss */
+/* line 272, ../sass/_layout.scss */
 #left nav#main-nav ul li a {
   color: #323232;
   color: black;
@@ -345,23 +369,23 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   display: block;
   text-align: left;
 }
-/* line 258, ../sass/_layout.scss */
+/* line 281, ../sass/_layout.scss */
 #left nav#main-nav ul li a .glyphicon {
   font-size: 15px;
   margin-right: 3px;
 }
-/* line 263, ../sass/_layout.scss */
+/* line 286, ../sass/_layout.scss */
 #left nav#main-nav ul li a span.label {
   padding-bottom: 3px;
   font-family: "Arial";
   float: right;
 }
-/* line 271, ../sass/_layout.scss */
+/* line 294, ../sass/_layout.scss */
 #left nav#main-nav ul li.active span.label, #left nav#main-nav ul li a:hover span.label {
   background-color: #e67200;
   color: white;
 }
-/* line 277, ../sass/_layout.scss */
+/* line 300, ../sass/_layout.scss */
 #left nav#main-nav ul li a:hover, #left nav#main-nav ul li.active a {
   background: #FF7F00;
   color: white;
@@ -369,42 +393,39 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 284, ../sass/_layout.scss */
-#left nav#main-nav ul li#btn-administration {
-  border-left: solid 1px #e0e0e0;
-}
-/* line 287, ../sass/_layout.scss */
+/* line 309, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a {
   color: #FF7F00;
 }
-/* line 290, ../sass/_layout.scss */
+/* line 312, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a:hover {
   color: white;
 }
-/* line 298, ../sass/_layout.scss */
+/* line 320, ../sass/_layout.scss */
 #left nav#main-nav #user {
   color: #FF7F00;
   float: right;
   padding: 10px;
 }
 
-/* line 306, ../sass/_layout.scss */
+/* line 328, ../sass/_layout.scss */
 #main {
   background-color: #FFF8DC;
   border: solid 1px #e0e0e0;
+  margin-top: 15px;
   padding: 0px;
   background-color: white;
 }
-/* line 312, ../sass/_layout.scss */
+/* line 335, ../sass/_layout.scss */
 #main #img-big {
-  height: 150px;
+  height: 130px;
   overflow: hidden;
 }
-/* line 315, ../sass/_layout.scss */
-#main #img-big img {
+/* line 338, ../sass/_layout.scss */
+#main #img-big img.img-photo {
   width: 100%;
 }
-/* line 320, ../sass/_layout.scss */
+/* line 344, ../sass/_layout.scss */
 #main #infos-producer {
   padding: 5px 10px;
   margin-bottom: 0px;
@@ -414,20 +435,20 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   border-bottom: solid 1px #e0e0e0;
   color: gray;
 }
-/* line 329, ../sass/_layout.scss */
+/* line 353, ../sass/_layout.scss */
 #main #infos-producer strong {
   font-weight: bold;
 }
-/* line 333, ../sass/_layout.scss */
+/* line 357, ../sass/_layout.scss */
 #main #infos-producer .favorite {
   float: right;
   color: gray;
 }
-/* line 336, ../sass/_layout.scss */
+/* line 360, ../sass/_layout.scss */
 #main #infos-producer .favorite a {
   color: black;
 }
-/* line 342, ../sass/_layout.scss */
+/* line 366, ../sass/_layout.scss */
 #main h2#page-title {
   padding-left: 15px;
   padding-right: 15px;
@@ -442,36 +463,36 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   top: -10px;
   text-align: left;
 }
-/* line 356, ../sass/_layout.scss */
+/* line 380, ../sass/_layout.scss */
 #main h2#page-title #buttons {
   margin-bottom: 15px;
   font-family: "Arial";
 }
-/* line 363, ../sass/_layout.scss */
+/* line 387, ../sass/_layout.scss */
 #main #content {
   padding: 0px 20px 20px 20px;
   padding-bottom: 40px;
   min-height: 300px;
 }
-/* line 368, ../sass/_layout.scss */
+/* line 392, ../sass/_layout.scss */
 #main #content h1, #main #content h2, #main #content h3, #main #content h4, #main #content h5, #main #content h6 {
   font-family: "highvoltageregular";
   margin-top: 30px;
   margin-bottom: 20px;
 }
-/* line 373, ../sass/_layout.scss */
+/* line 397, ../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 378, ../sass/_layout.scss */
+/* line 402, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 382, ../sass/_layout.scss */
+/* line 406, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 387, ../sass/_layout.scss */
+/* line 411, ../sass/_layout.scss */
 #main #content h3 {
   font-family: "highvoltageregular";
   font-family: "capsuularegular";
@@ -481,29 +502,29 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   margin-bottom: 30px;
   margin-top: 45px;
 }
-/* line 396, ../sass/_layout.scss */
+/* line 420, ../sass/_layout.scss */
 #main #content h3 span {
   padding-top: 14px;
   color: #323232;
 }
-/* line 402, ../sass/_layout.scss */
+/* line 426, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 406, ../sass/_layout.scss */
+/* line 430, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 410, ../sass/_layout.scss */
+/* line 434, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
-/* line 416, ../sass/_layout.scss */
+/* line 440, ../sass/_layout.scss */
 #main #content form .form-group .hint-block {
   color: gray;
 }
 
-/* line 424, ../sass/_layout.scss */
+/* line 448, ../sass/_layout.scss */
 #footer-producer {
   text-align: center;
   position: absolute;
@@ -511,28 +532,28 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   left: 0px;
   width: 100%;
 }
-/* line 431, ../sass/_layout.scss */
+/* line 455, ../sass/_layout.scss */
 #footer-producer a {
   color: #FF7F00;
 }
-/* line 433, ../sass/_layout.scss */
+/* line 457, ../sass/_layout.scss */
 #footer-producer a:active {
   text-decoration: underline;
 }
 
-/* line 439, ../sass/_layout.scss */
+/* line 463, ../sass/_layout.scss */
 #footer {
   background-color: #FFF8DC;
   height: 100px;
   float: right;
   text-align: center;
 }
-/* line 445, ../sass/_layout.scss */
+/* line 469, ../sass/_layout.scss */
 #footer .content {
   padding-top: 20px;
   color: black;
 }
-/* line 449, ../sass/_layout.scss */
+/* line 473, ../sass/_layout.scss */
 #footer .content a {
   color: black;
   font-family: "capsuularegular";
@@ -540,11 +561,11 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   padding-left: 10px;
   padding-right: 10px;
 }
-/* line 456, ../sass/_layout.scss */
+/* line 480, ../sass/_layout.scss */
 #footer .content a:hover {
   text-decoration: underline;
 }
-/* line 463, ../sass/_layout.scss */
+/* line 487, ../sass/_layout.scss */
 #footer #code-source img {
   height: 20px;
 }

producer/web/sass/_layout.scss

@@ -192,7 +192,7 @@ ul.pagination {
 #left {
     background-color: $color-back ;
     text-align: center ;
-    margin-top: 25px ;
+    margin-top: 15px ;
     padding: 0px ;
     position: relative ;
     
@@ -201,6 +201,29 @@ ul.pagination {
         display: none ;
     }
     
+    $width-logo: 110px ;
+    #logo {
+        position: relative ;
+        background-color: white ;
+        width: $width-logo ;
+        height: $width-logo ; 
+        margin: 0px auto ;
+        margin-bottom: 20px ;
+        @include border-radius($width-logo) ;
+        border: solid 1px  gray ;
+        text-align: center;
+        overflow: hidden ;
+
+        img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            max-width: $width-logo - 20 ;
+            max-height: $width-logo - 20 ;
+        }
+    }
+    
     h1, h2, #infos, #infos a {
         color: $courant ;
     }
@@ -208,8 +231,8 @@ ul.pagination {
     h1 {
         text-transform: uppercase ;
         font-family: 'highvoltageregular' ;
-        font-size: 35px ;
-        line-height: 35px ;
+        font-size: 25px ;
+        line-height: 25px ;
         font-weight: bold ;
         padding-bottom: 5px ;
         text-align: center ;
@@ -218,7 +241,7 @@ ul.pagination {
     
     h2 {
         font-family: 'capsuularegular' ;
-        font-size: 20px ;
+        font-size: 15px ;
         font-weight: normal ;
         text-align: center ;
         
@@ -240,7 +263,7 @@ ul.pagination {
         background-color: white ;    
         border: solid 1px #e0e0e0 ;
         border-bottom: 0px none ;
-        margin-top: 30px;
+        margin-top: 20px;
         
         ul {
             li {
@@ -282,7 +305,6 @@ ul.pagination {
                 }
                 
                 &#btn-administration {
-                    border-left: solid 1px #e0e0e0 ;
                     
                     a {
                         color: $color1 ;
@@ -306,15 +328,17 @@ ul.pagination {
 #main {
     background-color: $color-back ;
     border: solid 1px #e0e0e0 ;
+    margin-top: 15px ;
     padding: 0px ;
     background-color: white ;
     
     #img-big {
-        height: 150px ;
+        height: 130px ;
         overflow: hidden ;
-        img {
+        img.img-photo {
             width: 100% ;
         }
+        
     }
     
     #infos-producer {