Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2026-02-04 10:35:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

+Input styling and some bugfixes

Browse Source
This commit is contained in:
Simon Martens
2026-01-09 23:45:42 +01:00
parent 56464c8696
commit d5d092424a
9 changed files with 418 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

672
views/assets/scripts.js
View File

File diff suppressed because it is too large Load Diff

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

59
views/routes/almanach/edit/body.gohtml
View File

@@ -113,6 +113,7 @@ type AlmanachResult struct {
<div class="container-normal mx-auto mt-4 !px-0">
{{ template "_usermessage" $model }}
<form
autocomplete="off"
class="w-full dbform"
id="changealmanachform"
x-target="changealmanachform user-message almanach-header-data"
@@ -127,17 +128,17 @@ type AlmanachResult struct {
<div class="flex gap-8">
<!-- Left Column -->
<div class="flex-1 flex flex-col gap-4">
<div class="flex-1 flex flex-col gap-2">
<!-- Kurztitel -->
<div class="inputwrapper">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="preferred_title" class="inputlabel">Kurztitel</label>
</div>
<textarea name="preferred_title" id="preferred_title" class="inputinput no-enter" placeholder="" required autocomplete="off" rows="1">{{- $model.result.Entry.PreferredTitle -}}</textarea>
</div>
<div class="mt-3">
<div class="flex items-center justify-between gap-4">
<div class="flex items-center justify-between gap-2">
<div class="flex items-center gap-2 text-lg font-bold text-gray-700">
<i class="ri-book-2-line"></i>
<span>Titeldaten &amp; Anmerkungen</span>
@@ -147,7 +148,7 @@ type AlmanachResult struct {
Felder hinzufügen</button>
<div class="inputwrapper {{ if eq $model.result.Entry.TitleStmt "" }}hidden{{ end }}" data-dm-target="titles">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="title" class="inputlabel menu-label">Titel</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -160,7 +161,7 @@ type AlmanachResult struct {
</div>
<div class="mt-2 inputwrapper {{ if eq $model.result.Entry.ParallelTitle "" }}hidden{{ end }}" data-dm-target="titles">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="paralleltitle" class="inputlabel menu-label">Titel
(übersetzt)</label>
<div class="pr-2">
@@ -174,7 +175,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.SubtitleStmt "" }}hidden{{ end }}" data-dm-target="titles">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="subtitle" class="inputlabel menu-label">Untertitel</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -187,7 +188,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.VariantTitle "" }}hidden{{ end }}" data-dm-target="titles">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="varianttitle" class="inputlabel menu-label">Titelvarianten</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -200,7 +201,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.IncipitStmt "" }}hidden{{ end }}" data-dm-target="titles">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="incipit" class="inputlabel menu-label">Incipit</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -213,7 +214,7 @@ type AlmanachResult struct {
</div>
<div class="inputwrapper {{ if eq $model.result.Entry.ResponsibilityStmt "" }}hidden{{ end }}" data-dm-target="publication">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="responsibility_statement" class="inputlabel
menu-label">Herausgeberangabe</label>
<div class="pr-2">
@@ -227,7 +228,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.PublicationStmt "" }}hidden{{ end }}" data-dm-target="publication">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="publication_statement" class="inputlabel menu-label">Publikationsangabe</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -240,7 +241,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.PlaceStmt "" }}hidden{{ end }}" data-dm-target="publication">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="place_statement" class="inputlabel menu-label">Ortsangabe</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -259,14 +260,18 @@ type AlmanachResult struct {
<div id="titles"></div>
<!-- Publication Information: Year and Edition - Always visible -->
<div class="flex gap-4">
<div class="flex gap-2">
<div class="flex-1 inputwrapper">
<label for="year" class="inputlabel">Jahr</label>
<div class="inputlabelrow">
<label for="year" class="inputlabel">Jahr</label>
</div>
<input type="number" name="year" id="year" class="inputinput" placeholder="" autocomplete="off" value="{{ if not $model.is_new }}{{ $model.result.Entry.Year }}{{ end }}" />
</div>
<div class="flex-1 inputwrapper">
<label for="edition" class="inputlabel">Ausgabebezeichnung</label>
<div class="inputlabelrow">
<label for="edition" class="inputlabel">Ausgabebezeichnung</label>
</div>
<textarea name="edition" id="edition" class="inputinput no-enter" placeholder="" autocomplete="off" rows="1">{{- $model.result.Entry.Edition -}}</textarea>
</div>
</div>
@@ -276,7 +281,9 @@ type AlmanachResult struct {
<!-- Annotationen -->
<div class="inputwrapper">
<label for="annotation" class="inputlabel">Annotationen</label>
<div class="inputlabelrow">
<label for="annotation" class="inputlabel">Annotationen</label>
</div>
<textarea name="annotation" id="annotation" class="inputinput" placeholder="" autocomplete="off" rows="1">{{- $model.result.Entry.Annotation -}}</textarea>
</div>
</div>
@@ -291,7 +298,7 @@ type AlmanachResult struct {
<div class="mt-3">
<relations-editor data-prefix="entries_series" data-link-base="/reihe/" data-new-label="(Neu)" data-add-toggle-id="series-add-toggle" data-preferred-label="Bevorzugter Reihentitel">
<div class="inputwrapper">
<div class="flex items-center justify-between">
<div class="inputlabelrow">
<label class="inputlabel" for="series-section">Reihen</label>
<div class="flex items-center gap-3">
<a href="/reihen/new/" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline" target="_blank" rel="noreferrer">
@@ -430,7 +437,7 @@ type AlmanachResult struct {
<div class="mt-3">
<relations-editor data-prefix="entries_agents" data-link-base="/person/" data-new-label="(Neu)" data-add-toggle-id="agents-add-toggle">
<div class="inputwrapper">
<div class="flex items-center justify-between">
<div class="inputlabelrow">
<label class="inputlabel" for="agents-section">Personen &amp; Körperschaften</label>
<div class="flex items-center gap-3">
<a href="/personen/new/" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline" target="_blank" rel="noreferrer">
@@ -569,9 +576,9 @@ type AlmanachResult struct {
</relations-editor>
</div>
<div class="flex flex-col gap-4 mt-4">
<div class="flex flex-col gap-2 mt-4">
<div class="inputwrapper">
<div class="flex items-center justify-between">
<div class="inputlabelrow">
<label for="places" class="inputlabel">Erscheinungs- und Verlagsorte</label>
<div class="flex items-center gap-3">
<a href="/orte/new/" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline" target="_blank" rel="noreferrer">
@@ -611,7 +618,7 @@ type AlmanachResult struct {
<div class="flex flex-col gap-4">
<!-- Status -->
<div class="inputwrapper">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="type" class="inputlabel">Status</label>
</div>
<select name="type" id="type" autocomplete="off" class="inputselect font-bold">
@@ -630,7 +637,7 @@ type AlmanachResult struct {
Bearbeitungsvermerk hinzufügen</button>
<div class="inputwrapper {{ if eq $model.result.Entry.Comment "" }}hidden{{ end }}">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="edit_comment" class="inputlabel menu-label">Bearbeitungsvermerk</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -656,7 +663,7 @@ type AlmanachResult struct {
Physische Beschreibung hinzufügen</button>
<div class="inputwrapper {{ if eq $model.result.Entry.Extent "" }}hidden{{ end }}">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="extent" class="inputlabel menu-label">Struktur/Umfang</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -669,7 +676,7 @@ type AlmanachResult struct {
</div>
<div class="mt-3 inputwrapper {{ if eq $model.result.Entry.Dimensions "" }}hidden{{ end }}">
<div class="flex flex-row justify-between">
<div class="inputlabelrow">
<label for="dimensions" class="inputlabel menu-label">Maße</label>
<div class="pr-2">
<button class="dm-close-button font-bold input-label">
@@ -686,7 +693,7 @@ type AlmanachResult struct {
<div class="flex flex-col gap-4 mt-4">
<!-- Languages -->
<div class="inputwrapper">
<div class="flex items-center justify-between">
<div class="inputlabelrow">
<label for="languages" class="inputlabel">Sprachen</label>
<button type="button" id="languages-add-toggle" class="text-sm font-bold text-gray-700 hover:text-slate-950 no-underline pr-3">
<i class="ri-link"></i> Sprache verlinken
@@ -705,7 +712,9 @@ type AlmanachResult struct {
<!-- Nachweise - Always visible -->
<div class="inputwrapper">
<label for="refs" class="inputlabel">Nachweise</label>
<div class="inputlabelrow">
<label for="refs" class="inputlabel">Nachweise</label>
</div>
<textarea name="refs" id="refs" class="inputinput no-enter" placeholder="" autocomplete="off" rows="1">{{- $model.result.Entry.References -}}</textarea>
</div>

24
views/routes/ort/edit/body.gohtml
View File

@@ -109,19 +109,27 @@
<div class="flex gap-8">
<div class="flex-1 flex flex-col gap-4">
<div class="inputwrapper">
<label for="name" class="inputlabel">Name</label>
<div class="inputlabelrow">
<label for="name" class="inputlabel">Name</label>
</div>
<textarea name="name" id="name" class="inputinput no-enter" autocomplete="off" rows="1">{{- $place.Name -}}</textarea>
</div>
<div class="inputwrapper">
<label for="pseudonyms" class="inputlabel">Alternativnamen</label>
<div class="inputlabelrow">
<label for="pseudonyms" class="inputlabel">Alternativnamen</label>
</div>
<textarea name="pseudonyms" id="pseudonyms" class="inputinput" autocomplete="off" rows="1">{{- $place.Pseudonyms -}}</textarea>
</div>
<div class="inputwrapper">
<label for="annotation" class="inputlabel">Annotation</label>
<div class="inputlabelrow">
<label for="annotation" class="inputlabel">Annotation</label>
</div>
<textarea name="annotation" id="annotation" class="inputinput" autocomplete="off" rows="2">{{- $place.Annotation -}}</textarea>
</div>
<div class="inputwrapper">
<label for="uri" class="inputlabel">URI</label>
<div class="inputlabelrow">
<label for="uri" class="inputlabel">URI</label>
</div>
<input name="uri" id="uri" class="inputinput" autocomplete="off" value="{{ $place.URI }}" />
</div>
<div class="inputwrapper">
@@ -135,7 +143,9 @@
<div class="w-[28rem] shrink-0 flex flex-col gap-3">
<div class="inputwrapper">
<label for="status" class="inputlabel">Status</label>
<div class="inputlabelrow">
<label for="status" class="inputlabel">Status</label>
</div>
<select name="status" id="status" autocomplete="off" class="inputselect font-bold">
<option value="Unknown" {{ if eq $place.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
<option value="ToDo" {{ if eq $place.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
@@ -145,7 +155,9 @@
</select>
</div>
<div class="inputwrapper">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
<div class="inputlabelrow">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
</div>
<textarea name="edit_comment" id="edit_comment" class="inputinput" autocomplete="off" rows="1">{{- $place.Comment -}}</textarea>
</div>
<div class="mt-2">

36
views/routes/person/edit/body.gohtml
View File

@@ -108,11 +108,15 @@
<div class="flex gap-8">
<div class="flex-1 flex flex-col gap-4">
<div class="inputwrapper">
<label for="name" class="inputlabel">Name</label>
<div class="inputlabelrow">
<label for="name" class="inputlabel">Name</label>
</div>
<textarea name="name" id="name" class="inputinput no-enter" autocomplete="off" rows="1">{{- $agent.Name -}}</textarea>
</div>
<div class="inputwrapper">
<label for="pseudonyms" class="inputlabel">Pseudonyme</label>
<div class="inputlabelrow">
<label for="pseudonyms" class="inputlabel">Pseudonyme</label>
</div>
<textarea name="pseudonyms" id="pseudonyms" class="inputinput" autocomplete="off" rows="1">{{- $agent.Pseudonyms -}}</textarea>
</div>
<div class="inputwrapper">
@@ -124,23 +128,33 @@
</div>
</div>
<div class="inputwrapper">
<label for="biographical_data" class="inputlabel">Biografische Angaben</label>
<div class="inputlabelrow">
<label for="biographical_data" class="inputlabel">Biografische Angaben</label>
</div>
<textarea name="biographical_data" id="biographical_data" class="inputinput" autocomplete="off" rows="2">{{- $agent.BiographicalData -}}</textarea>
</div>
<div class="inputwrapper">
<label for="profession" class="inputlabel">Profession</label>
<div class="inputlabelrow">
<label for="profession" class="inputlabel">Profession</label>
</div>
<input name="profession" id="profession" class="inputinput" autocomplete="off" value="{{ $agent.Profession }}" />
</div>
<div class="inputwrapper">
<label for="uri" class="inputlabel">URI</label>
<div class="inputlabelrow">
<label for="uri" class="inputlabel">URI</label>
</div>
<input name="uri" id="uri" class="inputinput" autocomplete="off" value="{{ $agent.URI }}" />
</div>
<div class="inputwrapper">
<label for="references" class="inputlabel">Nachweise</label>
<div class="inputlabelrow">
<label for="references" class="inputlabel">Nachweise</label>
</div>
<textarea name="references" id="references" class="inputinput no-enter" autocomplete="off" rows="1">{{- $agent.References -}}</textarea>
</div>
<div class="inputwrapper">
<label for="annotation" class="inputlabel">Annotation</label>
<div class="inputlabelrow">
<label for="annotation" class="inputlabel">Annotation</label>
</div>
<textarea name="annotation" id="annotation" class="inputinput" autocomplete="off" rows="2">{{- $agent.Annotation -}}</textarea>
</div>
<div class="inputwrapper">
@@ -154,7 +168,9 @@
<div class="w-[28rem] shrink-0 flex flex-col gap-3">
<div class="inputwrapper">
<label for="status" class="inputlabel">Status</label>
<div class="inputlabelrow">
<label for="status" class="inputlabel">Status</label>
</div>
<select name="status" id="status" autocomplete="off" class="inputselect font-bold">
<option value="Unknown" {{ if eq $agent.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
<option value="ToDo" {{ if eq $agent.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
@@ -164,7 +180,9 @@
</select>
</div>
<div class="inputwrapper">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
<div class="inputlabelrow">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
</div>
<textarea name="edit_comment" id="edit_comment" class="inputinput" autocomplete="off" rows="1">{{- $agent.Comment -}}</textarea>
</div>
<div class="mt-2">

31
views/routes/reihe/edit/body.gohtml
View File

@@ -111,30 +111,42 @@
<div class="flex gap-8">
<div class="flex-1 flex flex-col gap-4">
<div class="inputwrapper">
<label for="title" class="inputlabel">Reihentitel</label>
<div class="inputlabelrow">
<label for="title" class="inputlabel">Reihentitel</label>
</div>
<textarea name="title" id="title" class="inputinput no-enter" autocomplete="off" rows="1">{{- $series.Title -}}</textarea>
</div>
<div class="inputwrapper">
<label for="pseudonyms" class="inputlabel">Alternativtitel</label>
<div class="inputlabelrow">
<label for="pseudonyms" class="inputlabel">Alternativtitel</label>
</div>
<textarea name="pseudonyms" id="pseudonyms" class="inputinput" autocomplete="off" rows="1">{{- $series.Pseudonyms -}}</textarea>
</div>
<div class="inputwrapper">
<label for="annotation" class="inputlabel">Annotation</label>
<div class="inputlabelrow">
<label for="annotation" class="inputlabel">Annotation</label>
</div>
<textarea name="annotation" id="annotation" class="inputinput" autocomplete="off" rows="2">{{- $series.Annotation -}}</textarea>
</div>
<div class="inputwrapper">
<label for="references" class="inputlabel">Nachweise</label>
<div class="inputlabelrow">
<label for="references" class="inputlabel">Nachweise</label>
</div>
<textarea name="references" id="references" class="inputinput no-enter" autocomplete="off" rows="1">{{- $series.References -}}</textarea>
</div>
<div class="inputwrapper">
<label for="frequency" class="inputlabel">Erscheinungsfrequenz</label>
<div class="inputlabelrow">
<label for="frequency" class="inputlabel">Erscheinungsfrequenz</label>
</div>
<input name="frequency" id="frequency" class="inputinput" autocomplete="off" value="{{ $series.Frequency }}" />
</div>
</div>
<div class="w-[28rem] shrink-0 flex flex-col gap-3">
<div class="inputwrapper">
<label for="status" class="inputlabel">Status</label>
<div class="inputlabelrow">
<label for="status" class="inputlabel">Status</label>
</div>
<select name="status" id="status" autocomplete="off" class="inputselect font-bold">
<option value="Unknown" {{ if eq $series.EditState "Unknown" }}selected{{ end }}>Unbekannt</option>
<option value="ToDo" {{ if eq $series.EditState "ToDo" }}selected{{ end }}>Zu erledigen</option>
@@ -144,7 +156,9 @@
</select>
</div>
<div class="inputwrapper">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
<div class="inputlabelrow">
<label for="edit_comment" class="inputlabel">Bearbeitungsvermerk</label>
</div>
<textarea name="edit_comment" id="edit_comment" class="inputinput" autocomplete="off" rows="1">{{- $series.Comment -}}</textarea>
</div>
<div class="mt-2">
@@ -273,7 +287,8 @@
</div>
<div class="flex items-center justify-end gap-3 mt-4">
<button type="button" class="resetbutton w-auto px-3 py-1 text-sm" data-role="edit-delete-cancel">Abbrechen</button>
<button type="button" class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3 py-1 text-sm" data-role="edit-delete-confirm">
<button type="button" class="submitbutton w-auto bg-red-700 hover:bg-red-800 px-3
py-1 text-sm text-white" data-role="edit-delete-confirm">
Löschen
</button>
</div>

11
views/routes/suche/baende/components/band.gohtml
View File

@@ -54,7 +54,7 @@
<div class="flex flex-row max-w-[60rem]">
<div class="w-32 grow-0 shrink-0 border-r border-zinc-300 pr-3 pt-4">
<div class="w-40 grow-0 shrink-0 border-r border-zinc-300 pr-3 pt-4">
<div class="flex flex-col items-end pt-1">
<div class="flex flex-row gap-x-1">
<div class="inline-block ml-1 whitespace-nowrap">
@@ -97,6 +97,15 @@
</div>
{{ end }}
{{- if (IsAdminOrEditor $model.request.user) -}}
<a href="/almanach/{{ $entry.MusenalmID }}/edit" class="no-underline rounded
bg-stone-100 px-1.5 text-sm mt-1.5">
<i class="ri-edit-line"></i>
Bearbeiten
</a>
{{- end -}}
</div>
</div>
<div class="font-serif ml-3 pt-4">

97
views/transform/fab-menu.js
View File

@@ -4,7 +4,6 @@ export class FabMenu extends HTMLElement {
this.state = null; // Will be set in connectedCallback: 'closed', 'half', 'full'
this.handleClick = this.handleClick.bind(this);
this.handleClickAway = this.handleClickAway.bind(this);
this.handleDeleteClick = this.handleDeleteClick.bind(this);
}
connectedCallback() {
@@ -71,14 +70,6 @@ export class FabMenu extends HTMLElement {
// Build half-open menu content
let halfOpenContent = "";
if (hasReihe) {
const deleteButton = hasCsrf
? `
<button data-action="delete-reihe" data-id="${reiheId}" class="w-full flex items-center px-4 py-2 hover:bg-gray-100 transition-colors text-sm text-left">
<i class="ri-delete-bin-line text-base text-red-600 mr-2.5"></i>
<span class="text-red-600">Löschen</span>
</button>
`
: "";
halfOpenContent = `
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Reihe
@@ -87,7 +78,6 @@ export class FabMenu extends HTMLElement {
<i class="ri-edit-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Bearbeiten</span>
</a>
${deleteButton}
`;
} else if (hasPerson) {
halfOpenContent = `
@@ -100,14 +90,6 @@ export class FabMenu extends HTMLElement {
</a>
`;
} else if (hasEntry) {
const deleteButton = hasCsrf
? `
<button data-action="delete-almanach" data-id="${entryId}" class="w-full flex items-center px-4 py-2 hover:bg-gray-100 transition-colors text-sm text-left">
<i class="ri-delete-bin-line text-base text-red-600 mr-2.5"></i>
<span class="text-red-600">Löschen</span>
</button>
`
: "";
halfOpenContent = `
<div class="px-3 py-1.5 text-xs font-semibold text-gray-500 uppercase tracking-wider">
Almanach
@@ -116,7 +98,6 @@ export class FabMenu extends HTMLElement {
<i class="ri-edit-line text-base text-gray-700 mr-2.5"></i>
<span class="text-gray-900">Bearbeiten</span>
</a>
${deleteButton}
`;
}
@@ -229,53 +210,6 @@ export class FabMenu extends HTMLElement {
`
: "";
// Build delete dialogs (only if CSRF token is available)
let deleteDialogs = "";
if (hasReihe && hasCsrf) {
deleteDialogs += `
<div class="fab-delete-dialog hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" data-dialog="reihe">
<div class="bg-white rounded-lg p-6 max-w-md mx-4">
<h3 class="text-lg font-semibold mb-4">Reihe löschen?</h3>
<p class="text-gray-700 mb-6">Möchten Sie diese Reihe wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.</p>
<div class="flex gap-3 justify-end">
<button data-action="cancel-delete" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
Abbrechen
</button>
<form method="POST" action="/reihe/${reiheId}/edit/delete">
<input type="hidden" name="csrf_token" value="${csrfToken}">
<input type="hidden" name="last_edited" value="${reiheUpdated}">
<button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition-colors">
Löschen
</button>
</form>
</div>
</div>
</div>
`;
}
if (hasEntry && hasCsrf) {
deleteDialogs += `
<div class="fab-delete-dialog hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" data-dialog="almanach">
<div class="bg-white rounded-lg p-6 max-w-md mx-4">
<h3 class="text-lg font-semibold mb-4">Almanach-Eintrag löschen?</h3>
<p class="text-gray-700 mb-6">Möchten Sie diesen Eintrag wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.</p>
<div class="flex gap-3 justify-end">
<button data-action="cancel-delete" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
Abbrechen
</button>
<form method="POST" action="/almanach/${entryId}/edit/delete">
<input type="hidden" name="csrf_token" value="${csrfToken}">
<input type="hidden" name="last_edited" value="${entryUpdated}">
<button type="submit" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition-colors">
Löschen
</button>
</form>
</div>
</div>
</div>
`;
}
// Build the unified menu content
const contextualSection = halfOpenContent ? halfOpenContent : "";
const contextualDivider = halfOpenContent ? '<div class="border-t border-gray-200"></div>' : "";
@@ -284,7 +218,7 @@ export class FabMenu extends HTMLElement {
this.innerHTML = `
<div class="fixed bottom-12 left-8 z-50">
<!-- Unified Menu Container -->
<div class="fab-menu hidden absolute bottom-16 left-0 w-64 bg-white rounded border border-gray-300 shadow transition-all duration-200 ease-out">
<div class="fab-menu hidden absolute bottom-16 left-0 w-64 bg-white rounded border border-gray-300 shadow transition-all duration-100 ease-out">
<!-- Contextual actions (always at top when present) -->
${contextualSection}
${contextualDivider}
@@ -314,7 +248,6 @@ export class FabMenu extends HTMLElement {
<i class="fab-icon text-2xl transition-all duration-200 ri-menu-line"></i>
</button>
${deleteDialogs}
</div>
`;
@@ -331,20 +264,6 @@ export class FabMenu extends HTMLElement {
// Add event listeners
this._button.addEventListener("click", this.handleClick);
document.addEventListener("click", this.handleClickAway);
// Delete button handlers
const deleteButtons = this.querySelectorAll('[data-action^="delete-"]');
deleteButtons.forEach((btn) => {
btn.addEventListener("click", this.handleDeleteClick);
});
// Cancel delete handlers
const cancelButtons = this.querySelectorAll('[data-action="cancel-delete"]');
cancelButtons.forEach((btn) => {
btn.addEventListener("click", () => {
this.closeAllDialogs();
});
});
}
disconnectedCallback() {
@@ -363,20 +282,6 @@ export class FabMenu extends HTMLElement {
}
}
handleDeleteClick(e) {
const action = e.currentTarget.getAttribute("data-action");
const entityType = action.replace("delete-", "");
const dialog = this.querySelector(`[data-dialog="${entityType}"]`);
if (dialog) {
dialog.classList.remove("hidden");
}
}
closeAllDialogs() {
const dialogs = this.querySelectorAll(".fab-delete-dialog");
dialogs.forEach((dialog) => dialog.classList.add("hidden"));
}
nextState() {
if (this.state === "closed") {
this.setState(this.hasContext ? "half" : "full");

10
views/transform/form.css
View File

@@ -4,13 +4,13 @@
}
.dbform .inputwrapper {
@apply rounded-xs border-2 border-transparent py-1
@apply rounded-xs border-2 border-transparent
border-l-2 focus-within:border-l-slate-600
bg-stone-100 focus-within:bg-slate-100 transition-all duration-100;
}
.dbform .inputwrapper .inputlabel {
@apply px-3 text-gray-700 font-bold py-1;
@apply px-3 text-gray-800 font-bold py-1;
}
.dbform .inputwrapper .inputinput {
@@ -33,7 +33,11 @@
}
.inputlabeltext {
@apply text-gray-700 font-bold;
@apply font-bold;
}
.inputlabelrow {
@apply bg-stone-200 border-b flex flex-row justify-between mb-1 align-middle items-center;
}
.dbform .inputwrapper .inputselect {