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

HTMX debounce input things

Browse Source
This commit is contained in:
Simon Martens
2025-02-26 01:09:00 +01:00
parent 3e1f5a2983
commit 8f664d24ca
4 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
views/routes/personen/components/searchbox.gohtml
View File

@@ -15,8 +15,7 @@
placeholder="Suchbegriff"
x-model="search"
hx-get=""
hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
hx-sync="this:replace"
hx-trigger="input[if: this.value.length >= 3] delay:3000ms, keyup[enter, if: this.value.length >= 2]"
hx-select="#searchresults"
hx-target="#searchresults"
hx-swap="outerHTML"
@@ -24,17 +23,19 @@
{{ if $model.search }}disabled="true"{{ end }} />
</div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
<tool-tip position="right" x-show="search">
<a
:href="'/personen/?search=' + search"
x-show="search"
class="inline-block px-1
{{- if not $model.search -}}
<tool-tip position="right" x-show="search">
<a
:href="'/personen/?search=' + search"
x-show="search"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
hx-boost="false">
<i class="ri-links-line"></i
></a>
<div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip>
hx-boost="false">
<i class="ri-links-line"></i
></a>
<div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip>
{{- end -}}
</div>
</div>
</div>

25
views/routes/reihen/components/alphabet.gohtml
View File

@@ -34,25 +34,26 @@
placeholder="Almanach-Nr oder Suchbegriff"
x-model="search"
hx-get=""
hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
hx-sync="this:replace"
hx-trigger="input changed delay=1500ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
autocomplete="off"
{{ if $model.search }}disabled="true"{{ end }} />
</div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
<tool-tip position="right" x-show="search">
<a
:href="'/reihen/?search=' + search"
x-show="search"
class="inline-block px-1
{{- if not $model.search -}}
<tool-tip position="right" x-show="search">
<a
:href="'/reihen/?search=' + search"
x-show="search"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
hx-boost="false">
<i class="ri-links-line"></i
></a>
<div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip>
hx-boost="false">
<i class="ri-links-line"></i
></a>
<div class="data-tip">Link zu dieser Suchanfrage</div>
</tool-tip>
{{- end -}}
</div>
</div>
</div>

10
views/routes/reihen/components/notifier.gohtml
View File

@@ -25,24 +25,24 @@
</div>
{{ end }}
{{ if .a }}
{{ if $model.result.Agent }}
<div class="notifier" x-show="!search">
{{ if .a.CorporateBody }}
{{ if $model.result.Agent.CorporateBody }}
<i class="ri-team-line"></i>
<span class="filtercategory">Verlag, Druckerei oder Vertrieb</span> &middot;
{{ else }}
<i class="ri-user-line"></i>
<span class="filtercategory">Herausgeber:in</span> &middot;
{{ end }}
<span class="filterterm">{{ .a.Name }}</span>
<span class="filterterm">{{ $model.result.Agent.Name }}</span>
</div>
{{ end }}
{{ if .p }}
{{ if $model.result.Place }}
<div class="notifier" x-show="!search">
<i class="ri-map-pin-line"></i>
<span class="filtercategory">Erscheinungsort</span> &middot;
<span class="filterterm">{{ .p.Name }}</span>
<span class="filterterm">{{ $model.result.Place.Name }}</span>
</div>
{{ end }}

4
views/transform/site.css
View File

@@ -378,4 +378,8 @@
#breadcrumbs .backbutton {
@apply ml-4 bg-stone-100 py-0.5 px-2.5 rounded font-sans text-base text-center mr-1.5;
}
input:disabled {
@apply italic text-gray-500;
}
}