Improve mobile search result and filter layout

This commit is contained in:
Björn Fromme
2022-04-07 17:53:18 +02:00
parent 7062de1019
commit 48a2ad1a2f
2 changed files with 18 additions and 3 deletions
@@ -5,8 +5,7 @@
<div class="mb-4"
data-controller="collapse"
data-collapse-from-value="960"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
data-collapse-until-value="960">
<button type="button"
data-action="click->collapse#toggle"
class="flex items-center justify-between w-full bg-brand-gradient p-4">
@@ -70,7 +69,7 @@
<div class="mb-4"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
data-collapse-until-value="960">
<button type="button"
data-action="click->collapse#toggle"
class="flex items-center justify-between w-full bg-brand-gradient p-4">
@@ -105,6 +104,15 @@
</div>
</div>
<f:if condition="{filterOptions.resultsUri}">
<div class="my-4">
<a href="{filterOptions.resultsUri}"
class="button text-white bg-badge-gradient w-full">
{filterOptions.resultCount} Treffer anzeigen
</a>
</div>
</f:if>
<div class="px-4 divide-y py-2 px-4 lg:bg-white">
<div class="py-2"
@@ -31,6 +31,13 @@
</f:if>
</span>
</div>
<button type="button"
class="lg:hidden mb-4 text-white bg-badge-gradient uppercase py-2 w-full"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobile-search"
data-action="overlay-toggle#invokeToggle">
Filter
</button>
<f:if condition="{referringPageUri}">
<f:variable name="referrer" value="{referringPageUri}"/>
</f:if>