interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Responsiveness for lists

Browse source 
- New style for lists
- Change index list layout
This commit is contained in:
sthag 2026-03-08 14:42:16 +01:00
parent dd8b461034
commit 3ae1cebdd6
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

42
source/screens/demo/index.liquid
View file

@ -34,7 +34,7 @@ tags:
<h3>Overview</h3> <h3>Overview</h3>
</div> </div>
<nav> <nav>
<ul class="list_link"> <ul class="block list_link">
{% for link in collections.demoIndex %} {% for link in collections.demoIndex %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
@ -42,24 +42,30 @@ tags:
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
<h3>Page</h3> <div class="responsive">
<ul class="list_link"> <section>
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %} <h3>Page</h3>
<ul class="block list_link">
{% assign pagesByTitle = collections.demoPage | sort: 'data.title' %}
{% for link in pagesByTitle %} {% for link in pagesByTitle %}
<li> <li>
<a href="{{ link.page.url }}">{{ link.data.title }}</a> <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<h3>Example</h3> </section>
<ul class="list_link"> <section>
{% for link in collections.demoExample %} <h3>Example</h3>
<li> <ul class="block list_link">
<a href="{{ link.page.url }}">{{ link.data.title }}</a> {% for link in collections.demoExample %}
</li> <li>
{% endfor %} <a href="{{ link.page.url }}">{{ link.data.title }}</a>
</ul> </li>
{% endfor %}
</ul>
</section>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit ddedf3bbf2d6580dfeae297367fd673abaa11a96 Subproject commit 45bb274db110db9d111207940c4e6e341da1e90c

15
source/style/modules/demo/_demo_module.scss
View file

@ -281,10 +281,19 @@
.hello { .hello {
flex: 0 1 auto; flex: 0 1 auto;
width: 80%; width: 80%;
}
ul { .responsive {
padding: 1em 5em; @include hippie.forTabletPortraitUp {
background-color: hippie.$color_darker; display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
gap: hippie.$space_half hippie.$space_basic;
& > * {
flex: auto;
}
} }
} }
} }