Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 09:15:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search Indicators

Browse Source
This commit is contained in:
Simon Martens
2025-03-02 19:59:44 +01:00
parent 0ba3be1516
commit 2becab9708
10 changed files with 47 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/assets/scripts.js
View File

@@ -77,7 +77,7 @@ class O extends HTMLElement {
}
render() {
this.innerHTML = `
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-swap="outerHTML show:window:top">
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-indicator="body" hx-swap="outerHTML show:window:top">
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5">
${this.renderIcon()}
<div class="flex flex-row filter-pill-label-value !items-baseline text-slate-700">

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

6
views/routes/suche/baende/body.gohtml
View File

@@ -75,6 +75,7 @@
id="simplesearchform"
class="w-full font-serif"
method="get"
hx-indicator="body"
action="/suche/baende"
autocomplete="off">
{{- if not $model.parameters.Extended -}}
@@ -212,6 +213,10 @@
<div class="container-normal" id="searchresults">
<div class="border-b border-zinc-300 flex flex-row justify-between">
<div>
<div class="inline-block">
<i class="ri-hourglass-2-fill request-indicator spinning"></i>
</div>
<div class="request-indicator">&middot;</div>
{{ if $model.parameters.Query -}}
Suche nach <b>»{{ $model.parameters.Query }}«</b> &middot;
{{- end -}}
@@ -247,6 +252,7 @@
name="sort"
id="sort"
hx-get="{{- $model.parameters.ToQueryParamsBaende -}}"
hx-indicator="body"
trigger="change"
hx-push-url="true"
hx-select="main"

1
views/routes/suche/beitraege/body.gohtml
View File

@@ -76,6 +76,7 @@
id="simplesearchform"
class="w-full font-serif"
method="get"
hx-indicator="body"
action="/suche/beitraege"
autocomplete="off">
{{- if not $model.parameters.Extended -}}

4
views/routes/suche/beitraege/tablehead.gohtml
View File

@@ -21,6 +21,8 @@
<div class="border-b border-zinc-300 flex flex-row justify-between">
<div class="flex flex-row gap-x-2">
<div><i class="ri-hourglass-2-fill request-indicator spinning"></i></div>
<div class="request-indicator">&middot;</div>
{{ if $model.parameters.Query -}}
<div>Suche nach <b>»{{ $model.parameters.Query }}«</b></div>
<div>&middot;</div>
@@ -69,6 +71,7 @@
hx-select="#searchresults"
hx-target="#searchresults"
hx-swap="outerHTML"
hx-indicator="body"
{{ if $model.filters.OnlyScans -}}checked{{- end -}} />
<label
@@ -87,6 +90,7 @@
trigger="change"
hx-push-url="true"
hx-select="#subresults"
hx-indicator="body"
hx-target="#subresults"
hx-swap="outerHTML show:window:top">
<option

4
views/routes/suche/components/_infotextsimple.gohtml
View File

@@ -1,11 +1,11 @@
{{ $extendable := . }}
<div class="col-span-6 flex flex-row text-stone-700 gap-x-2">
<div class="flex flex-row text-stone-700 gap-x-2">
<div>
<i class="ri-information-2-fill"></i>
</div>
<div class="font-sans hyphens-auto text-sm pt-1">
<div class="font-sans hyphens-auto text-sm pt-1 max-w-[48rem]">
Die Suche durchsucht ganze Datensätze nach dem Vorkommen aller eingegebenen Suchbegriffe. Felder
können oben einzeln aus der Suche ausgeschlossen werden. Auch partielle Treffer in Worten werden
angezeigt. Wörter mit weniger als drei Zeichen, Sonderzeichen &ndash; auch Satzzeichen &ndash;

4
views/routes/suche/components/_searchboxsimple.gohtml
View File

@@ -15,7 +15,9 @@
placeholder="Suchbegriff (min. 3 Zeichen)"
class="w-full grow
placeholder:italic font-serif placeholder:font-sans" />
<button id="submitbutton" type="submit" class="min-w-36" form="simplesearchform">Suchen</button>
<button id="submitbutton" type="submit" class="min-w-36" form="simplesearchform">
<i class="ri-hourglass-2-fill request-indicator spinning mr-1"></i>Suchen
</button>
</div>
{{ if $extendable }}

2
views/transform/main.js
View File

@@ -180,7 +180,7 @@ class FilterPill extends HTMLElement {
render() {
this.innerHTML = `
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-swap="outerHTML show:window:top">
<a href="${this.getURL()}" class="!no-underline block text-base" hx-target="#searchresults" hx-select="#searchresults" hx-indicator="body" hx-swap="outerHTML show:window:top">
<div class="flex flex-row filter-pill rounded-lg bg-orange-100 hover:saturate-50 px-2.5">
${this.renderIcon()}
<div class="flex flex-row filter-pill-label-value !items-baseline text-slate-700">

28
views/transform/site.css
View File

@@ -484,7 +484,35 @@
/*direction: rtl;*/
}
body .request-indicator {
@apply !hidden;
}
.spinning {
animation: spin 1s ease-out infinite;
}
body.htmx-request #simplesearchform #sumbmitbutton {
@apply cursor-wait pointer-events-none;
}
body.htmx-request .request-indicator {
@apply !inline-block;
}
.tab-list-head[aria-pressed="true"] {
@apply !text-slate-900 bg-stone-50;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
80% {
transform: rotate(360deg);
} /* Most rotation happens early */
100% {
transform: rotate(360deg);
} /* Pause at the final position */
}
}