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 6 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
83 changes: 83 additions & 0 deletions scss/_product-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,3 +256,86 @@ html[dir="rtl"] .image_box figure figcaption {
.allergen {
font-weight:bold;
}

//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 {
display: none;
}
49 changes: 19 additions & 30 deletions templates/web/panels/panel.tt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
[% panel = panels.$panel_id %]
<!-- start templates/[% template.name %] - panel_id: [% panel_id %] -->
[% IF (panel.type == "card") OR (panel.type == "inline") %]
<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 %]
>
<div class="panel_[% panel.type %] radius [% IF panel.size == 'small' %]panel_small[% ELSE %]panel_large[% END %]"
id="panel_[% panel_id | replace(':','-') %]">

[% IF panel.title_element.defined %]
[% IF (panel.type == "card") %]
<h2 class="panel_title_[% panel.type %] text-medium">[% panel.title_element.title %]</h2>
Expand All @@ -16,24 +12,17 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>
[% END %]
[% END %]
[% ELSE %]
<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 %]"
Comment thread
deveshidwivedi marked this conversation as resolved.
Outdated
id="panel_[% panel_id | replace(':','-') %]">

<li class="accordion-navigation">

[% IF panel.title_element.defined %]
<a 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 %]
>
<a 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' %]panel_title_small[% END %]">
Comment thread
deveshidwivedi marked this conversation as resolved.
Outdated

[% 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 %]
[% IF panel.evaluation == "good" %]
Expand All @@ -54,7 +43,7 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>
[% 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 %]
<div class="panel[% IF panel.size == 'small' %] small-panel[% END %]">
Comment thread
deveshidwivedi marked this conversation as resolved.
Outdated
>
[% IF panel.evaluation AND NOT panel.title_element.icon_url.defined %]
<span class="evaluation_[%panel.evaluation %]_title">
Expand All @@ -74,7 +63,7 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>
[% panel.title_element.title %]
</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>
[% END %]
<hr class="floatclear">
</a>
Expand Down Expand Up @@ -108,7 +97,7 @@ <h3 class="panel_title_[% panel.type %]">[% panel.title_element.title %]</h3>

[% 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 %]
[% IF panel_group_element.evaluation == "good" %]
Expand Down Expand Up @@ -146,14 +135,14 @@ <h3 [% IF panel_group_element.panel_group_id.defined %]id="panel_group_[% panel_
</div>
[% ELSE %]

<div style="margin-bottom:0.5rem">
<div class="mg-class">

[% IF element_type == "text" %]
[% text_element = element_ref.text_element %]

[% 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 %]
[% IF text_element.evaluation == "good" %]
Expand All @@ -169,7 +158,7 @@ <h3 [% IF panel_group_element.panel_group_id.defined %]id="panel_group_[% panel_
[% END %]
[% 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 %]">
Comment thread
deveshidwivedi marked this conversation as resolved.
Outdated
[% ELSE %]
<div>
[% END %]
Expand Down Expand Up @@ -240,7 +229,7 @@ <h4 class="panel_title">
[% 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 Down Expand Up @@ -271,7 +260,7 @@ <h4 class="panel_title">
<span class="icon"><img src="[% value.icon_url %]" alt="icon"></span>
[% 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
[% IF value.evaluation == 'good' %] green
Expand Down Expand Up @@ -311,8 +300,8 @@ <h4 class="panel_title">
[% map_element = element_ref.map_element %]
<!-- start templates/[% template.name %] -->

<div id="tag_map" class="large-9 columns" style="display: none;">
<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