filter styling

This commit is contained in:
Simon Martens
2025-03-01 03:13:16 +01:00
parent 3968f6b1b4
commit 8bc1fdb79c
7 changed files with 136 additions and 49 deletions

View File

@@ -1,11 +1,13 @@
{{ $model := . }}
<div
class="hidden lg:flex min-w-[32rem] max-w-[32rem] float-right ml-6 flex-col gap-y-8 [&>*]:pb-12
[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100">
[&>*]:px-12 [&>*]:pt-8 [&>*]:bg-slate-100"
id="reihenfilter">
{{ if $model.common.Agents }}
<div class="">
<h2 class="mb-6">Herausgeber:innen, Verlage &amp; Druckereien</h2>
<filter-list
class="min-h-[20rem] border-b border-zinc-300"
id="agent-list"
data-url="/reihen/?agent="
data-placeholder="Personen und Körperschaften filtern..."></filter-list>

View File

@@ -38,13 +38,13 @@
IncipitString string
}
.filters
type BeitraegeFilterParameters struct {
.filters
type BeitraegeFilterParameters struct {
Agent string
Type string
Year string
OnlyScans bool
}
}
*/}}
{{ $isAlm := false }}
@@ -139,11 +139,15 @@ type BeitraegeFilterParameters struct {
</div>
{{- template "_fieldscript" -}}
{{- if $model.parameters.IsBeitraegeSearch -}}
<div class="container-normal" id="searchresults">
{{ template "_filterlist" $model }}
{{ template "tablehead" $model }}
<div class="cotents" id="searchresult">
{{- if $model.result.Hits -}}
{{ template "_filterlist" $model }}
{{- end -}}
<div class="container-normal">
{{ template "tablehead" $model }}
{{- if $model.result.Hits -}}
<div class="mt-8" id="almanachcontents">
{{- range $_, $hit := $model.result.Hits -}}
@@ -171,6 +175,11 @@ type BeitraegeFilterParameters struct {
{{- end -}}
</div>
{{- end -}}
<div class="flex flex-row justify-end items-start border-t border-zinc-300 pt-4">
{{- template "pagination" $model -}}
</div>
</div>
<script type="module">

View File

@@ -0,0 +1,21 @@
{{ $model := . }}
{{- if gt (len $model.result.Pages) 1 }}
<div class="[&>_a]:no-underline">
{{ if gt $model.parameters.Page 1 -}}
<a
href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Prev }}"
class="mr-1.5">
<i class="ri-arrow-left-long-line"></i>
</a>
{{- end -}}
Seite
<b>{{ $model.parameters.Page }}&thinsp;/&thinsp;{{ $model.result.PagesCount }}</b>
{{ if lt $model.parameters.Page ($model.result.PagesCount) -}}
<a
href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Next }}"
class="ml-1.5">
<i class="ri-arrow-right-long-line"></i>
</a>
{{- end -}}
</div>
{{- end -}}

View File

@@ -43,27 +43,11 @@
{{ $model.result.Entries | len }} Bänden
{{- end -}}
</div>
{{- if gt (len $model.result.Pages) 1 }}
<div>&middot;</div>
<div class="[&>_a]:no-underline">
{{ if gt $model.parameters.Page 1 -}}
<a
href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Prev }}"
class="mr-1.5">
<i class="ri-arrow-left-long-line"></i>
</a>
{{- end -}}
Seite {{ $model.parameters.Page }} /
{{ $model.result.PagesCount }}
{{ if lt $model.parameters.Page ($model.result.PagesCount) -}}
<a
href="{{- $model.parameters.ToQueryParamsBeitraege -}}&page={{ $model.parameters.Next }}"
class="ml-1.5">
<i class="ri-arrow-right-long-line"></i>
</a>
{{- end -}}
</div>
{{- end -}}
{{ template "pagination" $model }}
</div>
{{- if not $isAlm -}}

View File

@@ -1,24 +1,50 @@
{{ $model := . }}
{{- $isFiltered := or $model.filters.Agent $model.filters.Year $model.filters.Type -}}
<div class="flex flex-row gap-x-6 mb-4">
<filter-list
id="agent-list"
data-queryparam="personsstring"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&agentfilter="
data-placeholder="Personen und Körperschaften filtern..."></filter-list>
<filter-list
id="year-list"
data-queryparam="yearstring"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&yearfilter="
data-placeholder="Jahre filtern..."></filter-list>
<div class="container-oversize " x-data="{ filters: '{{- $isFiltered -}}' }">
<button
class="w-full flex flex-row bg-slate-100 py-3 border-2 border-slate-100 hover:border-slate-900
cursor-pointer box-content hover:[&>_h2]:font-slate-900 select-none"
@click="filters = !filters">
<h2 class="text-2xl text-stone-700 px-32">
Filter
<i class="ri-arrow-right-s-line" x-show="!filters"></i>
<i class="ri-arrow-down-s-line" x-show="filters"></i>
</h2>
</button>
<div
class="flex flex-row px-24 justify-between bg-slate-100 py-12 border-t-4 border-stone-50"
id="searchfilter"
x-show="filters">
<div class="w-[30%] grow-0 shrink-0">
<filter-list
class=""
id="agent-list"
data-queryparam="agentfilter"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&agentfilter="
data-placeholder="Personen und Körperschaften filtern..."></filter-list>
</div>
<filter-list
id="types-list"
data-queryparam="type"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&typefilter="
data-placeholder="Betragskategorien filtern..."></filter-list>
<div class="w-[30%] grow-0 shrink-0">
<filter-list
class=""
id="year-list"
data-queryparam="yearfilter"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&yearfilter="
data-placeholder="Jahre filtern..."></filter-list>
</div>
<div class="w-[30%] grow-0 shrink-0">
<filter-list
class=""
id="types-list"
data-queryparam="typefilter"
data-url="{{ $model.parameters.ToQueryParamsBeitraege }}&typefilter="
data-placeholder="Betragskategorien filtern..."></filter-list>
</div>
</div>
</div>
<script type="module">