fix: Product name truncated #7502 (#9618)

openfoodfacts · Jan 9, 2024 · 53c218f · 53c218f
1 parent d5d0e41
commit 53c218f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/html/js/product-search.js b/html/js/product-search.js
@@ -9,7 +9,7 @@
 // Output values are returned in the product object
 //
 // - match_score: number from 0 to 100
-//		- the score is 0 if 
+//		- the score is 0 if
 //		- otherwise the score is a weighted average of how well the product matches
 //		each attribute selected by the user
 //
@@ -21,7 +21,7 @@
 //		- may_not_match		at least one mandatory attribute score is <= 50 (e.g. may contain traces of an allergen)
 //		- does_not_match	at least one mandatory attribute score is <= 10 (e.g. contains an allergen, is not vegan)
 //
-// - match_attributes: array of arrays of attributes corresponding to the product and 
+// - match_attributes: array of arrays of attributes corresponding to the product and
 // each set of preferences: mandatory, very_important, important
 
 function match_product_to_preferences(product, product_preferences) {
@@ -235,7 +235,7 @@ function display_products(target, product_groups, user_prefs) {
 
 		$.each(product_group, function (key, product) {
 
-			let product_html = `<li><a href="${product.url}" class="list_product_a">`;
+			let product_html = `<li><a href="${product.url}" class="list_product_a" title="${product.product_display_name}">`;
 
 			// Add a colored banner to show how the product matches the user's preferences
 			if (user_prefs.use_ranking) {
@@ -256,9 +256,9 @@ function display_products(target, product_groups, user_prefs) {
 			product_html += "</div>";
 
 			if (product.product_display_name) {
-				product_html += '<div class="list_product_name v-space-tiny">' + product.product_display_name + "</div>";
+				product_html += '<div class="list_product_name">' + product.product_display_name + "</div>";
 			} else {
-				product_html += '<div class="list_product_name v-space-tiny">' + product.code + "</div>";
+				product_html += '<div class="list_product_name">' + product.code + "</div>";
 			}
 
 			product_html += '<div class="list_product_sc">';
@@ -290,8 +290,8 @@ function display_products(target, product_groups, user_prefs) {
 				const edit_url = product_edit_url(product);
 				const edit_title = lang().edit_product_page;
 				product_html += `
-				<a class="list_edit_link" 
-				    alt="Edit ${product.product_display_name}" 
+				<a class="list_edit_link"
+				    alt="Edit ${product.product_display_name}"
 				    href="${edit_url}"
 				    title="${edit_title}">
 					<img src="/images/icons/dist/edit.svg">
@@ -417,7 +417,7 @@ function display_product_summary(target, product) {
 			// note: on the website, the id for the panel contains : instead of - (e.g. for the ingredients_analysis_en:vegan panel)
 			const panel_element_id = 'panel_' + attribute.panel_id.replace(':', '-');
 			if (document.getElementById(panel_element_id)) {
-				// onclick : open the panel content + reflow to make sur all column content is shown			
+				// onclick : open the panel content + reflow to make sur all column content is shown
 				card_html = '<a href="#' + panel_element_id
 					+ '" onclick="document.getElementById(\'' + panel_element_id + '_content\').classList.add(\'active\'); $(document).foundation(\'equalizer\', \'reflow\');"' + card_html + '</a>';
 			}
@@ -476,4 +476,4 @@ function search_products(target, products, search_api_url) {
 			rank_and_display_products(target, products);
 		}
 	});
-}
+}
diff --git a/scss/_off.scss b/scss/_off.scss
@@ -288,9 +288,7 @@ ul.products {
 
 .products a {
   display: block;
-  height: 167px;
   margin: 10px;
-  overflow: hidden;
   padding: 10px;
   width: 120px;
   word-wrap: break-word;
@@ -316,6 +314,14 @@ ul.products {
   vertical-align: middle;
 }
 
+.products span {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  height: 50px;
+  overflow: hidden;
+}
+
 #pages {
   margin-top: 1.5rem;
 }
@@ -1213,7 +1219,7 @@ $font-green: #008c8c;
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: .5rem 2rem; 
+  padding: .5rem 2rem;
   width: 100%;
   gap: 1rem;
   background-color: $section-sand;
@@ -1398,7 +1404,7 @@ $font-green: #008c8c;
       color: white;
       opacity: 0.5;
       margin-right: 1rem;
-      @media #{$small-only} { 
+      @media #{$small-only} {
         position: relative;
         top: -25px;
         margin-right: 2rem;
@@ -1472,7 +1478,7 @@ $font-green: #008c8c;
       color: white;
       opacity: 0.5;
       margin-right: 1rem;
-      @media #{$small-only} { 
+      @media #{$small-only} {
         position: relative;
         top: -25px;
         margin-right: 2rem;
@@ -1764,7 +1770,7 @@ a.panel_title {
       padding-top: 3rem;
       padding-bottom: 3rem;
     }
-  
+
     @media #{$large-up} {
       padding-top: 5rem;
       padding-bottom: 5rem;
@@ -1790,7 +1796,7 @@ a.panel_title {
       padding-top: 2rem;
       padding-bottom: 2rem;
     }
-  
+
     @media #{$large-up} {
       padding-top: 3rem;
       padding-bottom: 3rem;
@@ -1799,19 +1805,19 @@ a.panel_title {
     &-blue {
       background-color: #e3f6ff;
     }
-    
+
     &-seashell {
       background-color: #fff5f1;
     }
-    
+
     &-yellow {
       background-color: #fffad1;
     }
-    
+
     &-light-green {
       background-color: #ebffdf;
     }
-  
+
     &-white {
       background-color: $white;
     }

diff --git a/scss/_product-list.scss b/scss/_product-list.scss
@@ -126,10 +126,12 @@ $productsGutter:12;
     padding-left: 8px;
     font-size: 14px;
     color: $black;
-    display: inline-flex;
-    // Force the height of the product name so that icons
-    // below are vertically aligned with other cards on the same line
-    height:82px;
+    // Force the height and use line-clamp of the product name so that
+    // icons below are vertically aligned with other cards on the same line
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    height: 82px;
     overflow: hidden;
 }
 
@@ -164,11 +166,11 @@ $productsGutter:12;
   .f-dropdown {
     a { color: $primary-color; }
   }
-  &__results { 
+  &__results {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: $white; 
+    color: $white;
     .material-icons { font-size: 18px; }
   }
   &__buttons {
@@ -287,7 +289,7 @@ $greeter-contribute-bgcolor: #FFF2DF;
       background: linear-gradient(90deg, $greeter-discover-bgcolor 50%, $greeter-contribute-bgcolor 50%);
     }
   }
-  &__discover, 
+  &__discover,
   &__contribute {
     display: flex;
     margin: 0;
@@ -314,7 +316,7 @@ $greeter-contribute-bgcolor: #FFF2DF;
       }
     }
   }
-  &__discover { 
+  &__discover {
     background-color: $greeter-discover-bgcolor;
     &--content {
       @media #{$xlarge-up} { padding-left: 0; }