Wrap product summary description in div tag and truncate content in o…

…ne line, ending with three dots for long text
openfoodfoundation · Jul 2, 2024 · 8d48a0b · 8d48a0b
1 parent 5bb4782
commit 8d48a0b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/app/views/shop/products/_summary.html.haml b/app/views/shop/products/_summary.html.haml
@@ -10,7 +10,8 @@
       %h3
         %a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
           %span{"ng-bind" => "::product.name"}
-      .product-description{ "data-controller": "add-blank-to-link", "ng-bind-html": "::product.description_html", "ng-click": "triggerProductModal()", "ng-show": "product.description_html.length" }
+      .product-description{ "data-controller": "add-blank-to-link", "ng-click": "triggerProductModal()", "ng-show": "product.description_html.length" }
+        %div{ "ng-bind-html": "::product.description_html" }
       %div{ "ng-switch" => "enterprise.visible" }
         .product-producer
           = t :products_from

diff --git a/app/webpacker/css/darkswarm/_shop-product-rows.scss b/app/webpacker/css/darkswarm/_shop-product-rows.scss
@@ -144,23 +144,25 @@
           }
 
           .product-description {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
             margin-bottom: 0.75rem;
             cursor: pointer;
-            // Force product description to be on one line
-            // and truncate with ellipsis
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            overflow: hidden; 
-            // line-clamp is not supported in Safari
-            line-height: 1rem;
-            height: 1.75rem;
-
-            > div {
+
+            div {
+              // Force product description to be on one line
+              // and truncate with ellipsis
+
               margin-bottom: 1.5rem; // Equivalent to p (trix doesn't use p as separator by default, so emulate div as p to be backward compatible)
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+
+              > * {
+                display: inline;
+              }
+
+              br {
+                display: none; // Hide break tags in description to make text inline
+              }
             }
 
             @include trix-styles;