feat: expand some panels only on large devices (#6834)

for now web is always considered large, but we have a specific class we could play upon. Applied to nutrition and ingredients panels fixes #6786
openfoodfacts · May 30, 2022 · 6331777 · 6331777
1 parent 43712b5
commit 6331777
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/templates/api/knowledge-panels/health/ingredients/ingredients.tt.json b/templates/api/knowledge-panels/health/ingredients/ingredients.tt.json
@@ -4,7 +4,8 @@
         "health"
     ],
     "type": "inline",
-    "expanded": true,
+    "expanded": false,
+    "expand_for": "large",
     "elements": [
         {
             "element_type": "text",

diff --git a/templates/api/knowledge-panels/health/nutrition/nutrition_facts_table.tt.json b/templates/api/knowledge-panels/health/nutrition/nutrition_facts_table.tt.json
@@ -4,7 +4,8 @@
         "health"
     ],
     "type": "inline",
-    "expanded": true,
+    "expanded": false,
+    "expand_for": "large",
     "elements": [   
         {
             "element_type": "table",

diff --git a/templates/web/panels/panel.tt.html b/templates/web/panels/panel.tt.html
@@ -81,7 +81,15 @@ <h4>[% panel.title_element.subtitle %]</h4>
 
 
     [% IF panel.elements.defined %]
-    <div id="panel_[% panel_id | replace(':','-') %]_content" class="content panel_content[% IF (panel.type == 'card') OR (panel.type == 'inline') %]_[% panel.type %][% END %][% IF panel.expanded %] active[% END %]">
+    <div
+      id="panel_[% panel_id | replace(':','-') %]_content"
+      class="content panel_content[%
+          IF (panel.type == 'card') OR (panel.type == 'inline') %]_[% panel.type %][% END
+        %][%
+          IF (panel.expanded) OR (panel.expand_for == 'large') %] active[% END
+        %]
+        [% IF panel.expand_for %]expand-for-[% panel.expand_for %][% END %]"
+    >
     [% FOREACH element_ref IN panel.elements %]
         [% element_type = element_ref.element_type %]