[Espace producteur] Produits : lien "En savoir plus" pour afficher la description longue #1162

producer/views/order/order.php

@@ -327,7 +327,7 @@ $this->setTitle('Commander');
                                                     <img v-if="product.photo.length" class="photo-product"
                                                          :src="product.photo"/>
                                                 </td>
-                                                <td class="name">
+                                                <td class="name product-name-description-block">
                                                     <span class="name">{{ product.name }}</span>
                                                     <span class="other">
                                                             <span v-if="product.weight">({{ product.weight }}&nbsp;g)</span>
@@ -339,8 +339,11 @@ $this->setTitle('Commander');
                                                     <div class="description" v-if="product.description.length">
                                                         {{ product.description }}
                                                     </div>
-                                                    <div class="recipe" v-if="product.recipe.length">
-                                                        {{ product.recipe }}
+                                                    <div class="description-long" v-if="product.recipe.length">
+                                                        <a href="javascript:void(0);" class="show-more-link">En savoir plus</a>
+                                                        <div class="content">
+                                                            {{ product.recipe }}
+                                                        </div>
                                                     </div>
                                                 </td>
                                                 <td class="price-unit">

producer/views/site/index.php

@@ -166,14 +166,14 @@ $this->setPageTitle(Html::encode($producer->type . ' à ' . $producer->city));
     $columnsProducts[] = [
         'attribute' => 'name',
         'format' => 'raw',
-        'contentOptions' => ['class' => 'name'],
+        'contentOptions' => ['class' => 'name product-name-description-block'],
         'value' => function ($model) {
-            $html = '<span class="the-name">' . Html::encode($model->name) . '</span>';
+            $html = '<div class="name">' . Html::encode($model->name) . '</div>';
             if (strlen($model->description)) {
-                $html .= ' / ' . Html::encode($model->description);
+                $html .= '<div class="description">' . Html::encode($model->description).'</div>';
             }
             if (strlen($model->recipe)) {
-                $html .= '<br />' . nl2br(Html::encode($model->recipe));
+                $html .= '<div class="description-long"><a href="javascript:void(0);" class="show-more-link">En savoir plus</a><div class="content">' . nl2br(Html::encode($model->recipe)).'</div></div>';
             }
             return $html;
         }

producer/web/css/screen.css

@@ -220,75 +220,36 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   color: #F39C12;
 }
 
-/* line 142, ../sass/_layout.scss */
-#header-bap {
-  position: absolute;
-  right: 0px;
-  top: 0px;
-  width: 70px;
-  background-color: white;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  text-align: center;
-  z-index: 1000;
+/* line 143, ../sass/_layout.scss */
+.product-name-description-block .name {
+  font-family: "capsuularegular";
+  color: black;
+  font-size: 20px;
+  line-height: 25px;
+  font-weight: bold;
 }
-/* line 153, ../sass/_layout.scss */
-#header-bap .container {
-  padding-left: 0px;
-  padding-right: 0px;
+/* line 151, ../sass/_layout.scss */
+.product-name-description-block .other {
+  font-family: "capsuularegular";
+  color: black;
+  font-weight: bold;
+  font-size: 17px;
 }
 /* line 158, ../sass/_layout.scss */
-#header-bap a#logo {
-  color: black;
-  text-decoration: none;
-  position: relative;
-  top: 3px;
+.product-name-description-block .description,
+.product-name-description-block .description-long {
+  color: gray;
 }
 /* line 164, ../sass/_layout.scss */
-#header-bap a#logo img {
-  width: 45px;
-}
-/* line 169, ../sass/_layout.scss */
-#header-bap ul#nav-bap {
-  float: right;
-}
-/* line 173, ../sass/_layout.scss */
-#header-bap ul#nav-bap li a {
-  color: black;
-  font-size: 15px;
+.product-name-description-block .description-long a {
   color: #F39C12;
 }
-/* line 178, ../sass/_layout.scss */
-#header-bap ul#nav-bap li a:hover, #header-bap ul#nav-bap li a:focus {
-  color: #333;
-  color: #F39C12;
-  background: none;
-}
-/* line 185, ../sass/_layout.scss */
-#header-bap ul#nav-bap li ul {
-  background-color: white;
-  border-top: solid 2px #F39C12;
-  left: -141px;
-  top: 50px;
-  width: 200px;
-}
-/* line 193, ../sass/_layout.scss */
-#header-bap ul#nav-bap li ul li a {
-  text-transform: uppercase;
-  font-size: 13px;
-}
-/* line 197, ../sass/_layout.scss */
-#header-bap ul#nav-bap li ul li a:hover {
-  color: #f5b043;
-}
-/* line 201, ../sass/_layout.scss */
-#header-bap ul#nav-bap li ul li a small {
-  font-size: 10px;
-  line-height: 13px;
-  margin-left: 18px;
+/* line 167, ../sass/_layout.scss */
+.product-name-description-block .description-long .content {
+  display: none;
 }
 
-/* line 213, ../sass/_layout.scss */
+/* line 173, ../sass/_layout.scss */
 #left {
   background-color: #FFF8DC;
   text-align: center;
@@ -296,12 +257,12 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   padding: 0px;
   position: relative;
 }
-/* line 220, ../sass/_layout.scss */
+/* line 180, ../sass/_layout.scss */
 #left .fixed {
   position: fixed;
   display: none;
 }
-/* line 226, ../sass/_layout.scss */
+/* line 186, ../sass/_layout.scss */
 #left #logo {
   position: relative;
   background-color: white;
@@ -316,7 +277,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   text-align: center;
   overflow: hidden;
 }
-/* line 238, ../sass/_layout.scss */
+/* line 198, ../sass/_layout.scss */
 #left #logo img {
   position: absolute;
   top: 50%;
@@ -325,11 +286,11 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   max-width: 90px;
   max-height: 90px;
 }
-/* line 248, ../sass/_layout.scss */
+/* line 208, ../sass/_layout.scss */
 #left h1, #left h2, #left #infos, #left #infos a {
   color: #323232;
 }
-/* line 252, ../sass/_layout.scss */
+/* line 212, ../sass/_layout.scss */
 #left h1 {
   text-transform: uppercase;
   font-family: "highvoltageregular";
@@ -340,37 +301,37 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   text-align: center;
   font-weight: normal;
 }
-/* line 263, ../sass/_layout.scss */
+/* line 223, ../sass/_layout.scss */
 #left h2 {
   font-family: "capsuularegular";
   font-size: 15px;
   font-weight: normal;
   text-align: center;
 }
-/* line 269, ../sass/_layout.scss */
+/* line 229, ../sass/_layout.scss */
 #left h2 .favorite {
   padding-left: 0px;
 }
-/* line 272, ../sass/_layout.scss */
+/* line 232, ../sass/_layout.scss */
 #left h2 .favorite .glyphicon {
   font-size: 14px;
 }
-/* line 277, ../sass/_layout.scss */
+/* line 237, ../sass/_layout.scss */
 #left h2 a {
   color: #323232;
 }
-/* line 283, ../sass/_layout.scss */
+/* line 243, ../sass/_layout.scss */
 #left nav#main-nav {
   background-color: white;
   border: solid 1px #e0e0e0;
   border-bottom: 0px none;
   margin-top: 20px;
 }
-/* line 290, ../sass/_layout.scss */
+/* line 250, ../sass/_layout.scss */
 #left nav#main-nav ul li {
   display: block;
 }
-/* line 293, ../sass/_layout.scss */
+/* line 253, ../sass/_layout.scss */
 #left nav#main-nav ul li a {
   color: #323232;
   color: black;
@@ -380,23 +341,23 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   display: block;
   text-align: left;
 }
-/* line 302, ../sass/_layout.scss */
+/* line 262, ../sass/_layout.scss */
 #left nav#main-nav ul li a .glyphicon {
   font-size: 15px;
   margin-right: 3px;
 }
-/* line 307, ../sass/_layout.scss */
+/* line 267, ../sass/_layout.scss */
 #left nav#main-nav ul li a span.label {
   padding-bottom: 3px;
   font-family: "Arial";
   float: right;
 }
-/* line 315, ../sass/_layout.scss */
+/* line 275, ../sass/_layout.scss */
 #left nav#main-nav ul li.active span.label, #left nav#main-nav ul li a:hover span.label {
   background-color: #e08e0b;
   color: white;
 }
-/* line 321, ../sass/_layout.scss */
+/* line 281, ../sass/_layout.scss */
 #left nav#main-nav ul li a:hover, #left nav#main-nav ul li.active a {
   background: #F39C12;
   color: white;
@@ -404,22 +365,22 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
-/* line 330, ../sass/_layout.scss */
+/* line 290, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a {
   color: #F39C12;
 }
-/* line 333, ../sass/_layout.scss */
+/* line 293, ../sass/_layout.scss */
 #left nav#main-nav ul li#btn-administration a:hover {
   color: white;
 }
-/* line 341, ../sass/_layout.scss */
+/* line 301, ../sass/_layout.scss */
 #left nav#main-nav #user {
   color: #F39C12;
   float: right;
   padding: 10px;
 }
 
-/* line 349, ../sass/_layout.scss */
+/* line 309, ../sass/_layout.scss */
 #main {
   background-color: #FFF8DC;
   border: solid 1px #e0e0e0;
@@ -427,13 +388,13 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   padding: 0px;
   background-color: white;
 }
-/* line 356, ../sass/_layout.scss */
+/* line 316, ../sass/_layout.scss */
 #main #img-big {
   height: 130px;
   overflow: hidden;
   position: relative;
 }
-/* line 361, ../sass/_layout.scss */
+/* line 321, ../sass/_layout.scss */
 #main #img-big img.img-photo {
   width: 100%;
   position: absolute;
@@ -441,7 +402,7 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   left: 50%;
   transform: translate(-50%, -50%);
 }
-/* line 371, ../sass/_layout.scss */
+/* line 331, ../sass/_layout.scss */
 #main #infos-producer {
   padding: 5px 10px;
   margin-bottom: 0px;
@@ -451,20 +412,20 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   border-bottom: solid 1px #e0e0e0;
   color: gray;
 }
-/* line 380, ../sass/_layout.scss */
+/* line 340, ../sass/_layout.scss */
 #main #infos-producer strong {
   font-weight: bold;
 }
-/* line 384, ../sass/_layout.scss */
+/* line 344, ../sass/_layout.scss */
 #main #infos-producer .favorite {
   float: right;
   color: gray;
 }
-/* line 387, ../sass/_layout.scss */
+/* line 347, ../sass/_layout.scss */
 #main #infos-producer .favorite a {
   color: black;
 }
-/* line 393, ../sass/_layout.scss */
+/* line 353, ../sass/_layout.scss */
 #main h2#page-title {
   padding-left: 15px;
   padding-right: 15px;
@@ -479,36 +440,36 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   top: -10px;
   text-align: left;
 }
-/* line 407, ../sass/_layout.scss */
+/* line 367, ../sass/_layout.scss */
 #main h2#page-title #buttons {
   margin-bottom: 15px;
   font-family: "Arial";
 }
-/* line 414, ../sass/_layout.scss */
+/* line 374, ../sass/_layout.scss */
 #main #content {
   padding: 0px 20px 20px 20px;
   padding-bottom: 40px;
   min-height: 300px;
 }
-/* line 419, ../sass/_layout.scss */
+/* line 379, ../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 424, ../sass/_layout.scss */
+/* line 384, ../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 429, ../sass/_layout.scss */
+/* line 389, ../sass/_layout.scss */
 #main #content h1 {
   font-size: 30px;
 }
-/* line 433, ../sass/_layout.scss */
+/* line 393, ../sass/_layout.scss */
 #main #content h2 {
   font-size: 25px;
 }
-/* line 438, ../sass/_layout.scss */
+/* line 398, ../sass/_layout.scss */
 #main #content h3 {
   font-family: "capsuularegular";
   text-transform: uppercase;
@@ -517,29 +478,29 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   margin-bottom: 30px;
   margin-top: 45px;
 }
-/* line 446, ../sass/_layout.scss */
+/* line 406, ../sass/_layout.scss */
 #main #content h3 span {
   padding-top: 14px;
   color: #323232;
 }
-/* line 452, ../sass/_layout.scss */
+/* line 412, ../sass/_layout.scss */
 #main #content h4 {
   font-size: 20px;
 }
-/* line 456, ../sass/_layout.scss */
+/* line 416, ../sass/_layout.scss */
 #main #content h5 {
   font-size: 18px;
 }
-/* line 460, ../sass/_layout.scss */
+/* line 420, ../sass/_layout.scss */
 #main #content h6 {
   font-size: 16px;
 }
-/* line 466, ../sass/_layout.scss */
+/* line 426, ../sass/_layout.scss */
 #main #content form .form-group .hint-block {
   color: gray;
 }
 
-/* line 474, ../sass/_layout.scss */
+/* line 434, ../sass/_layout.scss */
 #footer-producer {
   text-align: center;
   position: absolute;
@@ -547,28 +508,28 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   left: 0px;
   width: 100%;
 }
-/* line 481, ../sass/_layout.scss */
+/* line 441, ../sass/_layout.scss */
 #footer-producer a {
   color: #F39C12;
 }
-/* line 483, ../sass/_layout.scss */
+/* line 443, ../sass/_layout.scss */
 #footer-producer a:active {
   text-decoration: underline;
 }
 
-/* line 489, ../sass/_layout.scss */
+/* line 449, ../sass/_layout.scss */
 #footer {
   background-color: #FFF8DC;
   height: 100px;
   float: right;
   text-align: center;
 }
-/* line 495, ../sass/_layout.scss */
+/* line 455, ../sass/_layout.scss */
 #footer .content {
   padding-top: 20px;
   color: black;
 }
-/* line 499, ../sass/_layout.scss */
+/* line 459, ../sass/_layout.scss */
 #footer .content a {
   color: black;
   font-family: "capsuularegular";
@@ -576,11 +537,11 @@ ul.pagination li a:hover, ul.pagination li a:focus, ul.pagination li a:active {
   padding-left: 10px;
   padding-right: 10px;
 }
-/* line 506, ../sass/_layout.scss */
+/* line 466, ../sass/_layout.scss */
 #footer .content a:hover {
   text-decoration: underline;
 }
-/* line 513, ../sass/_layout.scss */
+/* line 473, ../sass/_layout.scss */
 #footer #code-source img {
   height: 20px;
 }
@@ -1551,30 +1512,7 @@ termes.
 .order-order #main #app-order-order table#products td.photo img {
   width: 100px;
 }
-/* line 278, ../sass/order/_order.scss */
-.order-order #main #app-order-order table#products td.name .name {
-  font-family: "capsuularegular";
-  color: black;
-  font-size: 20px;
-  line-height: 25px;
-  font-weight: bold;
-}
-/* line 285, ../sass/order/_order.scss */
-.order-order #main #app-order-order table#products td.name .other {
-  font-family: "capsuularegular";
-  color: black;
-  font-weight: bold;
-  font-size: 17px;
-}
-/* line 291, ../sass/order/_order.scss */
-.order-order #main #app-order-order table#products td.name .description {
-  color: gray;
-}
-/* line 294, ../sass/order/_order.scss */
-.order-order #main #app-order-order table#products td.name .recipe {
-  color: gray;
-}
-/* line 300, ../sass/order/_order.scss */
+/* line 282, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices {
   margin-top: 10px;
   font-size: 10px;
@@ -1582,34 +1520,34 @@ termes.
   padding-bottom: 2px;
   margin-bottom: 0px;
 }
-/* line 308, ../sass/order/_order.scss */
+/* line 290, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices ul li {
   margin-bottom: 5px;
 }
-/* line 310, ../sass/order/_order.scss */
+/* line 292, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .decreasing-prices ul li strong {
   font-weight: bold;
 }
-/* line 318, ../sass/order/_order.scss */
+/* line 300, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit, .order-order #main #app-order-order table#products .price-total {
   width: 135px;
   text-align: center;
 }
-/* line 322, ../sass/order/_order.scss */
+/* line 304, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .price-unit .unit, .order-order #main #app-order-order table#products .price-total .unit {
   color: gray;
   font-size: 13px;
 }
-/* line 327, ../sass/order/_order.scss */
+/* line 309, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity {
   width: 175px;
 }
-/* line 329, ../sass/order/_order.scss */
+/* line 311, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity input.quantity {
   text-align: center;
   border-right: 0px none;
 }
-/* line 333, ../sass/order/_order.scss */
+/* line 315, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products .td-quantity .input-group-addon {
   padding: 5px;
   padding-left: 0px;
@@ -1617,69 +1555,69 @@ termes.
   border-left: 0px none;
   border-right: 0px none;
 }
-/* line 344, ../sass/order/_order.scss */
+/* line 326, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary h3 {
   margin-top: 0px;
   font-family: "capsuularegular";
   text-transform: none;
   margin-bottom: 5px;
 }
-/* line 351, ../sass/order/_order.scss */
+/* line 333, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul {
   margin-bottom: 15px;
   padding-left: 20px;
   font-size: 23px;
 }
-/* line 358, ../sass/order/_order.scss */
+/* line 340, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .quantity {
   font-size: 18px;
 }
-/* line 362, ../sass/order/_order.scss */
+/* line 344, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .name {
   font-family: "capsuularegular";
   font-size: 24px;
 }
-/* line 366, ../sass/order/_order.scss */
+/* line 348, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .summary ul li .other {
   font-family: "capsuularegular";
   font-size: 18px;
 }
-/* line 374, ../sass/order/_order.scss */
+/* line 356, ../sass/order/_order.scss */
 .order-order #main #app-order-order table#products tr.total .price-total {
   font-size: 23px;
 }
-/* line 382, ../sass/order/_order.scss */
+/* line 364, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery {
   margin-bottom: 20px;
 }
-/* line 385, ../sass/order/_order.scss */
+/* line 367, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .delivery .delivery-home {
   margin-bottom: 20px;
 }
-/* line 394, ../sass/order/_order.scss */
+/* line 376, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .comment {
   margin-bottom: 20px;
 }
-/* line 399, ../sass/order/_order.scss */
+/* line 381, ../sass/order/_order.scss */
 .order-order #main #app-order-order #content-step-payment .credit .info {
   margin-left: 20px;
   color: gray;
 }
-/* line 406, ../sass/order/_order.scss */
+/* line 388, ../sass/order/_order.scss */
 .order-order #main #app-order-order #specific-delays {
   margin-top: 15px;
 }
-/* line 414, ../sass/order/_order.scss */
+/* line 396, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos {
   margin-top: 30px;
 }
-/* line 416, ../sass/order/_order.scss */
+/* line 398, ../sass/order/_order.scss */
 .order-order #main #app-order-order #infos .panel-body {
   padding-top: 0px;
   white-space: pre-line;
 }
 
-/* line 426, ../sass/order/_order.scss */
+/* line 408, ../sass/order/_order.scss */
 #main #content .panel h3 {
   font-family: "highvoltageregular";
   margin: 0px;

producer/web/js/producer.js

@@ -77,8 +77,16 @@
 $(document).ready(function () {
     opendistrib_datepicker();
     opendistrib_fix_width_sidebar();
+    opendistrib_products();
 });
 
+function opendistrib_products() {
+    $('.product-name-description-block .show-more-link').unbind('click').click(function() {
+        $(this).hide();
+        $(this).parent().find('.content').show();
+    });
+}
+
 function opendistrib_datepicker() {
     $('input.datepicker').datepicker({dateFormat: 'dd/mm/yy'});
 }

producer/web/js/vuejs/order-order.js

@@ -289,6 +289,7 @@ var app = new Vue({
 
                     setTimeout(function() {
                         app.responsive();
+                        opendistrib_products();
                     }, 500);
 
                     app.loading = false ;
@@ -623,6 +624,10 @@ var app = new Vue({
             else {
                 this.categoryCurrent = category ;
             }
+
+            setTimeout(function() {
+                opendistrib_products();
+            }, 500);
         }
     },
     computed : {

producer/web/sass/_layout.scss

@@ -139,73 +139,33 @@ ul.pagination {
     }
 }
 
-#header-bap {
-    position: absolute ;
-    right: 0px ;
-    top: 0px ; 
-    width: 70px ;
-    background-color: white ; 
-    padding-top: 7px ;
-    padding-bottom: 7px ;
-    text-align: center ;
-    z-index: 1000 ;
-    
-    .container {
-        padding-left: 0px ;
-        padding-right: 0px ;
+.product-name-description-block {
+    .name {
+        font-family: 'capsuularegular' ;
+        color: black ;
+        font-size: 20px ;
+        line-height: 25px ;
+        font-weight: bold;
     }
-    
-    a#logo {
+
+    .other {
+        font-family: 'capsuularegular' ;
         color: black ;
-        text-decoration: none ;
-        position: relative ;
-        top: 3px ;
-        
-        img {
-            width: 45px ;
-        }
+        font-weight: bold;
+        font-size: 17px ;
     }
-    
-    ul#nav-bap {
-        float: right ;
-        li {
-            
-            a {
-                color: black ;
-                font-size: 15px ;
-                color: $color1 ;
-                
-                &:hover, &:focus {
-                    color: #333 ;
-                    color: $color1 ; 
-                    background: none ;
-                }
-            }
-            
-            ul {
-                background-color: $color2 ;
-                border-top: solid 2px $color1 ;
-                left: -141px ;
-                top: 50px ;
-                width: 200px ;
-                
-                li {
-                    a {
-                        text-transform: uppercase ;
-                        font-size: 13px ;
-                        
-                        &:hover {
-                            color: lighten($color1, 10) ;
-                        }
-                        
-                        small {
-                            font-size: 10px ;
-                            line-height: 13px ;
-                            margin-left: 18px ;
-                        }
-                    }
-                }
-            }
+
+    .description,
+    .description-long {
+        color: gray;
+    }
+
+    .description-long {
+        a {
+            color: $color1;
+        }
+        .content {
+            display: none;
         }
     }
 }

producer/web/sass/order/_order.scss

@@ -275,25 +275,7 @@
             }
             
             td.name {
-                .name {
-                    font-family: 'capsuularegular' ;
-                    color: black ;
-                    font-size: 20px ;
-                    line-height: 25px ;
-                    font-weight: bold;
-                }
-                .other {
-                    font-family: 'capsuularegular' ;
-                    color: black ;
-                    font-weight: bold;
-                    font-size: 17px ;
-                }
-                .description {
-                    color: gray;
-                }
-                .recipe {
-                    color: gray ;
-                }
+
             }
 
             .price-unit {