Search Indicators

scratchpad.md

@@ -28,33 +28,8 @@ Modelle umwandeln (zzt RecordProxy)
 - Ersellen & Abfragen FTS5-Tabellen
 - Erstellen Textseiten
 
-- Technologie-Stack auf Server-Rendering / Go Templates umgestellt
-- Die Seiten sollten jetzt insgesamt schneller laden
-
-- Man kann auf der Startseite und in der Suche nach Almanach-Nummern suchen
-- Überall werden die Almanachnummer und Inhaltsnummer angezeigt
-- Die URL referenziert die Almanachnummern, nicht mher die Datenbank-IDs
-
-- In der Almanach-Ansicht werden die Abkürzungen erklärt
-- In der Almanach- und Suchansicht werden Sammlungen abgehoben 
-- In der Almanach- und Suchansicht werden auch mehrere Bilder zu einem Eintrag angezeigt, falls vorhanden
-- In der Almanach- und Suchansicht kann nach Inhalten frei gefiltert werden, oder nach Typ
-
-- Es gibt URLs, die fest verlinkt werden können für einzelne:
-    - Personen 
-    - Reihen
-    - Bände
-    - Beiträge
-		- Alle Suchanfragen
-
-- Die Suche ist klar nach Typ unterteilt und insgesamt zuverlässiger
-- Zusätzlich zur jetzigen Suchfunktion gibt es für Beiträge und Bände noch eine Detailsuche
-- Suchergebnisse können nach Typ, Person, Jahr gefiltert werden
-- Suchergebnisse könnnen nach Jahr und Band, nach Band und Jahr (nach Personen) sortiert werden
-
 
 TODO danach:
-- Google-Suchoptimierung
 - Error Pages prüfen & error-Verhalten von HTMX
 - Weißraum in den Antworten
 - Antworten komprimieren

views/assets/scripts.js

@@ -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">

views/routes/suche/baende/body.gohtml

@@ -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"

views/routes/suche/beitraege/body.gohtml

@@ -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 -}}

views/routes/suche/beitraege/tablehead.gohtml

@@ -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

views/routes/suche/components/_infotextsimple.gohtml

@@ -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;

views/routes/suche/components/_searchboxsimple.gohtml

@@ -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 }}

views/transform/main.js

@@ -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">

views/transform/site.css

@@ -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 */
+	}
 }