Skip to content

feat: refinement of knowledge panel rendering template. #9890

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
deveshidwivedi wants to merge 17 commits into
base: main
Choose a base branch
from
+107 −43
Open

feat: refinement of knowledge panel rendering template. #9890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e3dedc9
updated panel border, added css classes for knowledge panel
deveshidwivedi Mar 9, 2024
458111a
update template to use css classes
deveshidwivedi Mar 9, 2024
a145215
bigger arrow in panel
deveshidwivedi Mar 9, 2024
f85bf0c
revert to update css classes first
deveshidwivedi Mar 11, 2024
fb53a7c
Merge branch 'openfoodfacts:main' into simpler-template
deveshidwivedi Mar 13, 2024
50e1c9b
correct syntax error
deveshidwivedi Mar 14, 2024
6770dff
fix typos
deveshidwivedi Mar 17, 2024
7549331
Merge branch 'main' into simpler-template
deveshidwivedi Mar 19, 2024
2660171
resolve merge conflicts
deveshidwivedi Mar 21, 2024
b0a5d83
update css classes
deveshidwivedi Mar 21, 2024
2755709
Merge branch 'main' into simpler-template
stephanegigandet Mar 22, 2024
3ed72da
Merge branch 'main' into simpler-template
deveshidwivedi Mar 26, 2024
e2f5749
Merge branch 'main' into simpler-template
deveshidwivedi Mar 26, 2024
c26ee15
fix syntax issue
deveshidwivedi Mar 28, 2024
7ce8ad7
add missing css removed earlier
deveshidwivedi Apr 2, 2024
b8088be
Merge branch 'main' into simpler-template
deveshidwivedi Apr 5, 2024
7c3c245
chore(templates): resolve merge conflict keeping class-based panels a…
Aug 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 87 additions & 1 deletion scss/_product-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,93 @@
width:100%;
}

.hidden {
display: none;
}

//knowledge panel template

.panel_small,
.panel_margin_small {
margin-top: 0.2rem !important;
margin-bottom: 0.2rem !important;
}

.panel_large,
.panel_margin_large {
margin-top: 0.5rem !important;
margin-bottom: 1.5rem !important;
}

.panel_title_small {
padding: 0.1rem;
padding-left: 1rem;
}

.panel_icon {
float: left;
margin-right: 1rem;
}

.panel_icon.very_small {
height: 24px;
}

.panel_icon.small {
height: 36px;
}

.panel_icon.large {
height: 72px;
}


.small-panel {
font-size: 1.1rem;
}

.small-subtitle {
font-size: 0.9rem;
}

.mg-class {
margin-bottom:0.5rem;
}

.text-icon {
height: 72px;
float: left;
margin-right: 1rem;
}


.text-container {
float: left;
}

.valign-middle {
line-height: 72px;
}

.custom-class {
width: 200px;
float: left;
margin-right: 1rem;
}

.custom-container {
height: 300px;
z-index: 1;
}

.image_source {
font-style: italic;
}

.hidden {

Check warning on line 355 in scss/_product-page.scss

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Duplicate selector ".hidden", first used at line 272 


See more on https://sonarcloud.io/project/issues?id=openfoodfacts_openfoodfacts-server&issues=AaAptPaoOVmC7munRuC9&open=AaAptPaoOVmC7munRuC9&pullRequest=9890
display: none;
}

// It is hides SVG barcode when mobile and shows when desktop
#barcode_div_code,#barcode_div_svg{
display: inline-block;
Expand All @@ -280,4 +367,3 @@
display: none;
}
}

62 changes: 20 additions & 42 deletions templates/web/panels/panel.tt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,9 @@
[%~ #======================================================================
BLOCK wrapper_for_card_or_inline;
#---------------------------------------------------------------------- %]
<div class="panel_[% panel.type %] radius [% IF panel.size == 'small' %]panel_small[% ELSE %]panel_large[% END %]"
id="panel_[% panel_id | replace(':','-') %]">

<div class="panel_[% panel.type %] radius" id="panel_[% panel_id | replace(':','-') %]"
[% IF panel.size == "small" %]
style="margin-top:0.2rem;margin-bottom:0.2rem;"
[% ELSE %]
style="margin-top:0.5rem;margin-bottom:1.5rem;"
[% END %]
>
[% IF panel.title_element.defined %]
[% IF (panel.type == "card") %]
<h2 class="panel_title_[% panel.type %] text-medium">[% panel.title_element.title %]</h2>
Expand All @@ -86,39 +81,29 @@
[%~ #======================================================================
BLOCK wrapper_for_other_types;
#---------------------------------------------------------------------- %]
<ul data-accordion class="panel_accordion accordion" id="panel_[% panel_id | replace(':','-') %]"
[% IF panel.size == "small" %]
style="margin-top:0.2rem;margin-bottom:0.2rem;"
[% ELSE %]
style="margin-top:0.5rem;margin-bottom:1.5rem;"
[% END %]
>
<ul data-accordion class="panel_accordion accordion panel_margin_[% IF panel.size == 'small' %]small[% ELSE %]large[% END %]"
id="panel_[% panel_id | replace(':','-') %]">

Check failure on line 85 in templates/web/panels/panel.tt.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Duplicate id "panel_[% panel_id | replace(':','-') %]" found. First occurrence was on line 63. 


See more on https://sonarcloud.io/project/issues?id=openfoodfacts_openfoodfacts-server&issues=AaAptPQlOVmC7munRuC8&open=AaAptPQlOVmC7munRuC8&pullRequest=9890
<li class="accordion-navigation[% IF ! has_elements %] accordion-navigation-inactive[% END %]">

[% IF panel.title_element.defined %]
<[% IF has_elements %]a[% ELSE %]div[% END %] href="#panel_[% panel_id | replace(':','-') %]_content" [% ~%]
class="panel_title[% IF panel.title_element.type == "grade" %] grade_[% panel.title_element.grade %][% END %]"
[% IF panel.size == "small" %]
style="padding:0.1rem;padding-left:1rem;"
[% END %]
class="panel_title[% IF panel.title_element.type == "grade" %] grade_[% panel.title_element.grade %][% END %][% IF panel.size == 'small' %] panel_title_small[% END %]"
>
[% IF panel.title_element.icon_url.defined %]
<img src="[% panel.title_element.icon_url %]"
style="[% IF panel.title_element.icon_size == 'very_small' %]height: 24px;
[%~ ELSIF panel.title_element.icon_size == 'small' %]height:36px;
[%~ ELSE %]height:72px;
[%~ END %]float:left;margin-right:1rem;"
class="panel_icon[% IF panel.title_element.icon_size == 'very_small' %] very_small[% ELSIF panel.title_element.icon_size == 'small' %] small[% ELSE %] large[% END %]"
alt="[% IF panel.title_element.icon_alt.defined %][% panel.title_element.icon_alt %]
[%~ ELSE %]icon
[%~ END %]"

[% IF panel.title_element.icon_color_from_evaluation %]
class="filter-[% show_evaluation.${panel.evaluation}.img_color or 'grey' %]"
[% END %]
>
[% END %]
<h4 [% IF panel.title_element.type == "grade" %]class="grade_[% panel.title_element.grade %]_title"[% END %]
[% IF panel.evaluation.defined %]class="evaluation_[%panel.evaluation %]_title"[% END %]
[% IF panel.size == "small" %]style="font-size:1.1rem;"[% END %]
[% IF panel.size == 'small' %] small-panel[% END %]"
>
[% IF panel.evaluation AND NOT panel.title_element.icon_url.defined %]
<span class="evaluation_[%panel.evaluation %]_title">
Expand All @@ -132,14 +117,14 @@
[% END %]
</h4>
[% IF panel.title_element.subtitle.defined %]
<span [% IF panel.size == "small" %]style="font-size:0.9rem;"[% END %]>[% panel.title_element.subtitle %]</span>
<span class="panel-subtitle[% IF panel.size == 'small' %] small-subtitle[% END %]">[% panel.title_element.subtitle %]</span>
[% ELSIF panel.title_element.value_string.defined %]
<span [% IF panel.size == "small" %]style="font-size:0.9rem;"[% END %]>[% panel.title_element.value_string %]</span>
<span class="panel-subtitle[% IF panel.size == 'small' %] small-subtitle[% END %]">[% panel.title_element.value_string %]</span>
[% ELSIF panel.title_element.value.defined %]
[% IF panel.title_element.type.defined AND panel.title_element.type == "percent" %]
<span [% IF panel.size == "small" %]style="font-size:0.9rem;"[% END %]>[% panel.title_element.value %]%</span>
<span class="panel-subtitle[% IF panel.size == 'small' %] small-subtitle[% END %]">[% panel.title_element.value %]%</span>
[% ELSE %]
<span [% IF panel.size == "small" %]style="font-size:0.9rem;"[% END %]>[% panel.title_element.value %]</span>
<span class="panel-subtitle[% IF panel.size == 'small' %] small-subtitle[% END %]">[% panel.title_element.value %]</span>
[% END %]
[% END %]
<hr class="floatclear">
Expand All @@ -152,7 +137,6 @@
END; # BLOCK wrapper_for_other_types
#======================================================================~%]


[%~ #======================================================================
BLOCK panel_group;
#---------------------------------------------------------------------- ~%]
Expand All @@ -167,10 +151,7 @@

[% IF panel_group_element.icon_url.defined %]
<img src="[% panel_group_element.icon_url %]"
style="[% IF panel_group_element.icon_size == 'very_small' %]height: 24px;
[%~ ELSIF panel_group_element.icon_size == 'small' %]height:36px;
[%~ ELSE %]height:72px;
[%~ END %]float:left;margin-right:1rem;"
class="panel_icon[% IF panel.title_element.icon_size == 'very_small' %] very_small[% ELSIF panel.title_element.icon_size == 'small' %] small[% ELSE %] large[% END %]"
alt="[% IF panel_group_element.icon_alt.defined %][% panel_group_element.icon_alt %][% ELSE %]icon[% END %]"
[% IF panel_group_element.icon_color_from_evaluation %]
class="filter-[% show_evaluation.${panel_group_element.evaluation}.img_color or 'grey' %]"
Expand Down Expand Up @@ -220,12 +201,12 @@

[% IF text_element.icon_url.defined %]
<img src="[% text_element.icon_url %]"
style="height:72px;float:left;margin-right:1rem;"
class="text-icon"
alt="[% IF text_element.icon_alt.defined %][% text_element.icon_alt %][% ELSE %]icon[% END %]"
[% IF text_element.icon_color_from_evaluation %]
class="filter-[% show_evaluation.${text_element.evaluation}.img_color or 'grey' %]"
[% END %]>
<div style="float:left;[% IF text_element.valign == 'middle' %]line-height:72px;[% END %]">
<div class="text-container[% IF text_element.valign == 'middle' %] valign-middle[% END %]">
[% ELSE %]
<div>
[% END %]
Expand Down Expand Up @@ -330,7 +311,7 @@
[% IF image_element.link_url.defined %]</a>[% END %]

[% IF image_element.source_url.defined %]
<div class="image_source" style="font-style:italic">[% lang("source") %][% sep %]:
<div class="image_source">[% lang("source") %][% sep %]:
<a href="[% image_element.source_url %]">[% image_element.source_text %]
[% IF image_element.source_lc.defined && image_element.source_lc != lc %]
<!-- source is in a different language than the interface -->
Expand All @@ -344,9 +325,6 @@
END; # BLOCK panel_image
#====================================================================== %]




[%~ #======================================================================
BLOCK panel_table
#---------------------------------------------------------------------- ~%]
Expand Down Expand Up @@ -387,8 +365,8 @@
[% map_element = element_ref.map_element %]
<!-- start templates/[% template.name %] -->

<div id="tag_map" class="large-9 columns" style="display: none; z-index: 1;">
<div id="container" style="height: 300px; z-index: 1;"></div>
<div id="tag_map" class="large-9 columns hidden">
<div id="container" class="custom-container"></div>
</div>

<link rel="stylesheet" href="[% static_subdomain %]/css/dist/leaflet.css" />
Expand Down Expand Up @@ -417,7 +395,7 @@
[% END %]

[% IF value.percent.defined %]
<div style="width:200px;float:left;margin-right:1rem;" class="show-for-large-up">
<div class="custom-class show-for-large-up">
<div class="agribalyse_impact_bar_full">
<div class="percent_bar [% show_evaluation.${value.evaluation}.td_color %]"
style="width:[% round(2 * value.percent)%]px;height:1.2rem;"></div>
Expand Down Expand Up @@ -446,7 +424,7 @@
[%~ #======================================================================
BLOCK div_with_margin
#---------------------------------------------------------------------- ~%]
<div style="margin-bottom:0.5rem">
<div class="mg-class">
[% content %]
</div>
[%~ #----------------------------------------------------------------------
Expand Down
Loading