feat: refactor Eco-Score knowledge panels + accordion display on web (#…

…5841) * feat: refactor Eco-Score knowledge panels + accordion display on web * fix parent_panel_id
openfoodfacts · Oct 7, 2021 · ecc8539 · ecc8539
1 parent 994a863
commit ecc8539
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 72 deletions.
diff --git a/lib/ProductOpener/Display.pm b/lib/ProductOpener/Display.pm
@@ -8267,6 +8267,7 @@ HTML
 		if (param('panels')) {
 			create_knowledge_panels($product_ref, $lc, $cc, $knowledge_panels_options_ref);
 			$template_data_ref->{ecoscore_panel} = display_knowledge_panel($product_ref->{"knowledge_panels_" . $lc}, "ecoscore");
+			$template_data_ref->{ecoscore_carbon_impact_panel} = display_knowledge_panel($product_ref->{"knowledge_panels_" . $lc}, "ecoscore_carbon_impact");
 		}
 	}
 

diff --git a/templates/api/knowledge-panels/ecoscore/agribalyse.tt.json b/templates/api/knowledge-panels/ecoscore/agribalyse.tt.json
@@ -6,7 +6,10 @@
     "topics": [
         "environment"
     ],
-    "title": "Environmental impact on average for products of the same category",
+    "title_element": {
+        "title": "Average impact for products of the same category: [% panel.agribalyse_grade FILTER upper %] (Score: [% panel.agribalyse_score %]/100)",
+        "subtitle": "Category: [% panel.agribalyse_category_name %]"
+    },
     "elements": [
         {
             "element_type": "text",

diff --git a/templates/api/knowledge-panels/ecoscore/carbon_impact.tt.json b/templates/api/knowledge-panels/ecoscore/carbon_impact.tt.json
@@ -2,25 +2,26 @@
 [% SET co2_100g = product.ecoscore_data.agribalyse.co2_total / 10 %]
 [% SET driving_100g = co2_100g  * 100 / 19.3 %]
 {
-    "parent_panel_id": "ecoscore_carbon_impact",
+    "parent_panel_id": "root",
     "type" : "score",
     "level" :"info",
     "topics": [
         "environment"
     ],
     "name": "Carbon impact",
-    "title": "Environmental impact on average for products of the same category",
     [% IF driving_100g >= 3 %]
     "evaluation": "bad",
     [% ELSIF driving_100g >= 1.5 %]
     "evaluation": "average",
     [% ELSE %]
     "evaluation": "good",
     [% END %]
-    "title": "Equal to driving [% driving_100g FILTER format('%.1f'); %] km in a petrol car",
-    "subtitle": "[% co2_100g * 1000 FILTER format('%.0f'); %] g CO² per 100g of product",
-    "icon_url": "[% static_subdomain %]/images/icons/dist/car.svg",
-    "icon_color_from_evaluation": true,
+    "title_element": {
+        "title": "Equal to driving [% driving_100g FILTER format('%.1f'); %] km in a petrol car",
+        "subtitle": "[% co2_100g * 1000 FILTER format('%.0f'); %] g CO² per 100g of product",
+        "icon_url": "[% static_subdomain %]/images/icons/dist/car.svg",
+        "icon_color_from_evaluation": true,
+    },
     "elements": [
         {
             "element_type": "text",

diff --git a/templates/api/knowledge-panels/ecoscore/ecoscore.tt.json b/templates/api/knowledge-panels/ecoscore/ecoscore.tt.json
@@ -6,8 +6,10 @@
     "topics": [
         "environment"
     ],
-    "icon_url": "[% static_subdomain %]/images/attributes/ecoscore-[% panel.grade %].svg",
-    "title": "[% panel.title %]",
+    "title_element": {
+        "icon_url": "[% static_subdomain %]/images/attributes/ecoscore-[% panel.grade %].svg",
+        "title": "[% panel.title %]",
+    },
     "elements": [           
         {
             "element_type": "text",
@@ -27,31 +29,7 @@
                     [% END %]                
                 `,
             }
-        },
-        {
-            "element_type": "image",
-            "image_element": {
-                "url": "[% static_subdomain %]/images/icons/ecoscore-[% panel.grade %].svg",
-                "width": 274,
-                "height": 130,
-                "alt": "Eco-score [% panel.grade %]",
-                "link_url": "[% formatted_subdomain %][% url_for_text('ecoscore') %]",
-                "link_title": "[% lang('ecoscore_information') %]",
-            }
-        },          
-        {
-            "element_type": "text",
-            "text_element": {
-                "type": "h1",
-                "html": "Average impact of products of the [% panel.agribalyse_category_name %] category: [% panel.agribalyse_grade FILTER upper %] (Score: [% panel.agribalyse_score %]/100)"
-            }
-        },
-        {
-            "element_type": "panel",
-            "panel_element": {
-                "panel_id": "ecoscore_carbon_impact",
-            }
-        },        
+        },    
         {
             "element_type": "panel",
             "panel_element": {
@@ -61,10 +39,9 @@
         {
             "element_type": "text",
             "text_element": {
-                "type": "h1",
-                "html": "Impact for this product: [% panel.grade FILTER upper %] (Score: [% panel.score %]/100)"
+                "html": "Positive and negative points of this product:"
             }
-        },
+        },        
         [% FOREACH adjustment IN ["production_system", "origins_of_ingredients", "threatened_species", "packaging"] %]
             [% IF (adjustment == "origins_of_ingredients") or (adjustment == "packaging") or (product.ecoscore_data.adjustments.$adjustment.value > 0) %]
                 {
@@ -74,6 +51,13 @@
                     }
                 },
             [% END %]
-        [% END %]       
+        [% END %]
+        {
+            "element_type": "text",
+            "text_element": {
+                "type": "h1",
+                "html": "Impact for this product: [% panel.grade FILTER upper %] (Score: [% panel.score %]/100)"
+            }
+        },         
     ]
 }
diff --git a/templates/api/knowledge-panels/ecoscore/ecoscore_unknown.tt.json b/templates/api/knowledge-panels/ecoscore/ecoscore_unknown.tt.json
@@ -6,8 +6,10 @@
     "topics": [
         "environment"
     ],
-    "icon_url": "[% static_subdomain %]/images/attributes/ecoscore-unknown.svg",
-    "title": "[% lang("attribute_ecoscore_unknown_title") %] - [% lang("attribute_ecoscore_unknown_description_short") %]",
+    "title_element": {
+        "icon_url": "[% static_subdomain %]/images/attributes/ecoscore-unknown.svg",
+        "title": "[% lang("attribute_ecoscore_unknown_title") %] - [% lang("attribute_ecoscore_unknown_description_short") %]",
+    },
     "elements": [
         {
             "element_type": "text",

diff --git a/templates/api/knowledge-panels/ecoscore/origins_of_ingredients.tt.json b/templates/api/knowledge-panels/ecoscore/origins_of_ingredients.tt.json
@@ -7,7 +7,9 @@
     ],
 [% IF adjustments.origins_of_ingredients.warning == "origins_are_100_percent_unknown" %]
     "evaluation": "unknown",
-    "title": "[% lang('ecoscore_ingredients_not_indicated') %]",
+    "title_element": {
+        "title": "[% lang('ecoscore_ingredients_not_indicated') %]",
+    }
     "elements": [
         {
             "element_type": "text",
@@ -22,13 +24,19 @@
 [% ELSE %]
     [% IF product.ecoscore_data.adjustments.origins_of_ingredients.value <= 0 %]
     "evaluation": "bad",
-    "title": "[% lang('ecoscore_origins_of_ingredients_impact_high') %]",
+    "title_element": {
+        "title": "[% lang('ecoscore_origins_of_ingredients_impact_high') %]",
+    },
     [% ELSIF product.ecoscore_data.adjustments.origins_of_ingredients.value <= 15 %]
     "evaluation": "neutral",
-    "title": "[% lang('ecoscore_origins_of_ingredients_impact_medium') %]",    
+    "title_element": {
+        "title": "[% lang('ecoscore_origins_of_ingredients_impact_medium') %]",    
+    },
     [% ELSE %]
     "evaluation": "good",
-    "title": "[% lang('ecoscore_origins_of_ingredients_impact_low') %]",      
+    "title_element": {
+        "title": "[% lang('ecoscore_origins_of_ingredients_impact_low') %]",
+    },
     [% END %]
     "elements": [
         {

diff --git a/templates/api/knowledge-panels/ecoscore/packaging.tt.json b/templates/api/knowledge-panels/ecoscore/packaging.tt.json
@@ -7,7 +7,9 @@
     ],
 [% IF not (product.ecoscore_data.adjustments.packaging.packagings && product.ecoscore_data.adjustments.packaging.packagings.size) %]
     "evaluation": "unknown",
-    "title": "[% lang('ecoscore_packaging_missing_information') %]",
+    "title_element": {
+        "title": "[% lang('ecoscore_packaging_missing_information') %]",
+    },
     "elements": [
         {
             "element_type": "text",
@@ -21,13 +23,19 @@
 [% ELSE %]
     [% IF product.ecoscore_data.adjustments.packaging.value <= -15 %]
     "evaluation": "bad",
-    "title": "[% lang('ecoscore_packaging_impact_high') %]",
+    "title_element": {
+        "title": "[% lang('ecoscore_packaging_impact_high') %]",
+    }
     [% ELSIF product.ecoscore_data.adjustments.packaging.value <= -5 %]
     "evaluation": "neutral",
-    "title": "[% lang('ecoscore_packaging_impact_medium') %]",    
+    "title_element": {
+        "title": "[% lang('ecoscore_packaging_impact_medium') %]",    
+    },
     [% ELSE %]
     "evaluation": "good",
-    "title": "[% lang('ecoscore_packaging_impact_low') %]",      
+    "title_element": {
+        "title": "[% lang('ecoscore_packaging_impact_low') %]",
+    },
     [% END %]
     "elements": [
         {

diff --git a/templates/api/knowledge-panels/ecoscore/production_system.tt.json b/templates/api/knowledge-panels/ecoscore/production_system.tt.json
@@ -5,14 +5,19 @@
     "topics": [
         "environment"
     ],
-    "title": "[% panel.title %]",
     "evaluation": "good",
-    [% IF product.ecoscore_data.adjustments.origins_of_ingredients.value >= 20 %]
-    "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits_very_high') %]",
-    [% ELSIF product.ecoscore_data.adjustments.origins_of_ingredients.value >= 15 %]
-    "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits_high') %]",    
+    [% IF product.ecoscore_data.adjustments.production_system.value >= 20 %]
+    "title_element": {
+        "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits_very_high') %]",
+    },
+    [% ELSIF product.ecoscore_data.adjustments.production_system.value >= 15 %]
+    "title_element": {
+        "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits_high') %]",
+    },
     [% ELSE %]
-    "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits') %]",      
+    "title_element": {
+        "title": "[% lang('ecoscore_production_system_labels_with_environmental_benefits') %]",
+    },
     [% END %]    
     "elements": [
         {

diff --git a/templates/api/knowledge-panels/ecoscore/threatened_species.tt.json b/templates/api/knowledge-panels/ecoscore/threatened_species.tt.json
@@ -5,7 +5,10 @@
     "topics": [
         "environment"
     ],
-    "title": "[% panel.title %]",
+    "evaluation": "bad",
+    "title_element": {
+        "title": "[% panel.title %]",
+    }
     "elements": [
         {
             "element_type": "text",

diff --git a/templates/web/pages/product/product_page.tt.html b/templates/web/pages/product/product_page.tt.html
@@ -231,6 +231,9 @@ <h2 id="environmental_impact">[% lang('environmental_impact') %]</h2>
 <p>Eco-Score knowledge panel (in development):</p>
         [% ecoscore_panel %]
 <p>End of Eco-Score panel</p>
+<p>Carbon impact panel:</p>
+        [% ecoscore_carbon_impact_panel %]
+<p>End of Carbon impact panel</p>
 [% END %]
 
 [% IF ecoscore_grade %]

diff --git a/templates/web/panels/panel.tt.html b/templates/web/panels/panel.tt.html
@@ -1,10 +1,11 @@
 [% panel = panels.$panel_id %]
 <!-- start templates/[% template.name %] - panel_id: [% panel_id %] -->
-<div class="panel[% IF panel.parent_panel_id == 'root' %] callout[% END %]" id="[% panel_id %]">
-    <div class="panel_title">
-        [% IF panel.icon_url.defined %]
-        <img src="[% panel.icon_url %]" style="height:72px;float:left;margin-right:1rem;" alt="icon"
-            [% IF panel.icon_color_from_evaluation %]
+<ul data-accordion class="accordion" id="[% panel_id %]" style="margin-top:0.5rem;margin-bottom:0.5rem;">
+<li class="accordion-navigation">
+    <a href="#panel_[% panel_id %]_content" class="panel_title">
+        [% IF panel.title_element.icon_url.defined %]
+        <img src="[% panel.title_element.icon_url %]" style="height:72px;float:left;margin-right:1rem;" alt="icon"
+            [% IF panel.title_element.icon_color_from_evaluation %]
                 [% IF panel.evaluation == "good" %]
                     class="filter-green"
                 [% ELSIF panel.evaluation == "bad" %]
@@ -32,37 +33,38 @@
                style="color:grey"
             [% END %]
         >
-            [% IF panel.evaluation AND NOT panel.icon_url.defined %]
+            [% IF panel.evaluation AND NOT panel.title_element.icon_url.defined %]
                 [% IF panel.evaluation == "good" %]
-                    <span class="icon" style="color:green">
+                    <span style="color:green">
                         [% display_icon("check") %]
                     </span>
                 [% ELSIF panel.evaluation == "bad" %]
-                    <span class="icon" style="color:red">
+                    <span style="color:red">
                         [% display_icon("cancel") %]
                     </span>
                 [% ELSIF panel.evaluation == "average" %]
-                    <span class="icon" style="color:darkorange">
+                    <span style="color:darkorange">
                         [% display_icon("check") %]
                     </span>                    
                 [% ELSIF panel.evaluation == "neutral" %]
-                    <span class="icon" style="color:grey">
+                    <span style="color:grey">
                         [% display_icon("check") %]
                     </span>
                 [% ELSIF panel.evaluation == "unknown" %]
-                    <span class="icon" style="color:grey">
+                    <span style="color:grey">
                         [% display_icon("help") %]
                     </span>
                 [% END %]
             [% END %]
-            [% panel.title %]
+            [% panel.title_element.title %]
         </h3>
-        [% IF panel.subtitle.defined %]
-            <h4>[% panel.subtitle %]</h4>
+        [% IF panel.title_element.subtitle.defined %]
+            <h4>[% panel.title_element.subtitle %]</h4>
         [% END %]
-    </div>
+        <hr class="floatclear">
+    </a>
 
-    <div class="panel_elements" style="clear:left;margin-top:1rem;">
+    <div id="panel_[% panel_id %]_content" class="content panel_content" style="clear:left;margin-top:1rem;">
     [% FOREACH element_ref IN panel.elements %]
         [% element_type = element_ref.element_type %]
 
@@ -148,5 +150,6 @@ <h4>
         [% END %]
     [% END %]
     </div>
-</div>
+</li>
+</ul>
 <!-- end templates/[% template.name %] - panel_id: [% panel_id %] -->