Skip to content
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

Update list module #19

Merged
merged 3 commits into from
Aug 21, 2024
Merged

Update list module #19

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
98d57ae
update list module structure and styling
zapalblizh Aug 20, 2024
ef4dc87
add not-prose to list module
zapalblizh Aug 20, 2024
fb0199b
change span to div in li element
zapalblizh Aug 21, 2024
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
36 changes: 6 additions & 30 deletions theme/modules/list.module/module.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,9 @@
{% require_css %}
<style>
{% scope_css %}
.icon-alignment {
margin-top: {{ module.styles.icon_alignment }}px;
}

.list-gaps {
gap: {{ module.styles.list_items_alignment }}px;
}

.icon-text-gaps {
gap: {{ module.styles.gap }}px;
}
{% end_scope_css %}
</style>
{% end_require_css %}

<div class="fj-container fj-mx-auto">
<ul class="fj-grid list-gaps">
<div class="fj-not-prose fj-container fj-max-w-lg lg:fj-max-w-3xl fj-mx-auto">
<ul class="fj-grid" style="gap: {{ module.styles.list_items_alignment }}px;">
{% for item in module.list_items %}
<li class="fj-flex icon-text-gaps">
<div style="height: {{ module.styles.icon_size }}px; width: {{ module.styles.icon_size }}px"
class="fj-flex-col fj-items-center fj-justify-center fj-shrink-0 icon-alignment">
<li class="fj-flex" style="gap: {{ module.styles.gap }}px;">
<div class="fj-shrink-0"
style="height: {{ module.styles.icon_size }}px; width: {{ module.styles.icon_size }}px; margin-top: {{ module.styles.icon_alignment }}px;">

{% set current_icon = not module.enable_global_icons ? item.individual_item_icon : module.global_icon %}
{% set current_icon_color = not module.enable_global_icon_color ? item.individual_icon_color : module.global_icon_color %}
Expand All @@ -38,13 +20,7 @@

</div>

<div class="fj-text-lg fj-leading-tight">
{% if module.enable_rich_text %}
{% inline_rich_text field="item_rich_text" value="{{ item.item_rich_text }}" %}
{% else %}
{% inline_text field="item_text" value="{{ item.item_text }}" %}
{% endif %}
</div>
<span class="fj-text-lg fj-leading-tight">{{ module.enable_rich_text ? item.item_rich_text : item.item_text }}</span>
</li>
{% endfor %}
</ul>
Expand Down