Some content list edit styling

controllers/almanach_contents_edit.go

@@ -361,6 +361,7 @@ func (p *AlmanachContentsEditPage) POSTSave(engine *templating.Engine, app core.
 				"content_agents":    contentAgentsMap[renderContent.Id],
 				"open_edit":         false,
 				"is_new":            false,
+				"collapsed":         false,
 			}
 			var builder strings.Builder
 			if err := engine.Render(&builder, "/almanach/contents/item/", data, "fragment"); err != nil {

dbmodels/agent.go

@@ -56,7 +56,7 @@ func (a *Agent) SetURI(uri string) {
 }
 
 func (a *Agent) BiographicalData() string {
-	return a.GetString(AGENTS_BIOGRAPHICAL_DATA_FIELD)
+	return strings.TrimSpace(a.GetString(AGENTS_BIOGRAPHICAL_DATA_FIELD))
 }
 
 func (a *Agent) SetBiographicalData(biographicalData string) {

dbmodels/content.go

@@ -142,7 +142,15 @@ func (c *Content) SetMusenalmType(musenalmType []string) {
 }
 
 func (c *Content) MusenalmPagination() string {
-	return c.GetString(MUSENALM_PAGINATION_FIELD)
+	value := c.GetString(MUSENALM_PAGINATION_FIELD)
+	if value != "" {
+		return value
+	}
+	values := c.GetStringSlice(MUSENALM_PAGINATION_FIELD)
+	if len(values) > 0 {
+		return values[0]
+	}
+	return ""
 }
 
 func (c *Content) SetMusenalmPagination(musenalmPagination string) {

views/routes/almanach/contents/edit/body.gohtml

@@ -220,9 +220,12 @@
 
 	let enterEditMode = null;
 	let setupEditFormGlobal = null;
+	let list = null;
+	let setHtmxIndicator = () => {};
+	let setHtmxIndicatorLabel = () => {};
 
 	const initPage = () => {
-		const list = document.querySelector("[data-role='contents-list']");
+		list = document.querySelector("[data-role='contents-list']");
 		if (!list) {
 			return;
 		}
@@ -320,13 +323,13 @@
 			}
 			syncIndicator.classList.toggle("hidden", !active);
 		};
-		const setHtmxIndicator = (active) => {
+		setHtmxIndicator = (active) => {
 			if (!htmxIndicator) {
 				return;
 			}
 			htmxIndicator.classList.toggle("hidden", !active);
 		};
-		const setHtmxIndicatorLabel = (label) => {
+		setHtmxIndicatorLabel = (label) => {
 			if (!htmxIndicator || !label) {
 				return;
 			}
@@ -514,21 +517,20 @@
 			const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
 			const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
 			const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
-			const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
+			const headerTitleText = item.querySelector("[data-role='content-header-title-text']");
 			const headerTitle = item.querySelector("[data-role='content-header-title']");
 			const viewBody = item.querySelector("[data-role='content-view-body']");
 			const header = item.querySelector("[data-content-header='true']");
 
 			const setCollapsed = (collapsed) => {
-				if (!viewBody || !collapsedSummary) {
+				if (!viewBody) {
 					return;
 				}
 				item.dataset.collapsed = collapsed ? "true" : "";
 				item.classList.toggle("data-collapsed", collapsed);
 				viewBody.classList.toggle("hidden", collapsed);
-				collapsedSummary.classList.toggle("hidden", !collapsed);
+				if (headerTitleText) {
-				if (headerTitle) {
+					headerTitleText.classList.toggle("hidden", !collapsed);
-					headerTitle.classList.toggle("hidden", collapsed);
 				}
 				if (header) {
 					header.classList.toggle("bg-stone-100", collapsed);
@@ -725,21 +727,20 @@
 					return;
 				}
 				const viewBody = item.querySelector("[data-role='content-view-body']");
-				const collapsedSummary = item.querySelector("[data-role='content-collapsed-summary']");
+				const headerTitleText = item.querySelector("[data-role='content-header-title-text']");
 				const headerTitle = item.querySelector("[data-role='content-header-title']");
 				const collapseButton = item.querySelector("[data-role='content-collapse-toggle']");
 				const collapseIcon = item.querySelector("[data-role='content-collapse-icon']");
 				const collapseTooltip = item.querySelector("[data-role='content-collapse-tooltip']");
 				const header = item.querySelector("[data-content-header='true']");
-				if (!viewBody || !collapsedSummary) {
+				if (!viewBody) {
 					return;
 				}
 				item.dataset.collapsed = collapsed ? "true" : "";
 				item.classList.toggle("data-collapsed", collapsed);
 				viewBody.classList.toggle("hidden", collapsed);
-				collapsedSummary.classList.toggle("hidden", !collapsed);
+				if (headerTitleText) {
-				if (headerTitle) {
+					headerTitleText.classList.toggle("hidden", !collapsed);
-					headerTitle.classList.toggle("hidden", collapsed);
 				}
 				if (header) {
 					header.classList.toggle("bg-stone-100", collapsed);

views/routes/components/_content.gohtml

@@ -137,7 +137,7 @@
 									class="inline-block {{ if $isPerson }}search-text{{ end }}">
 									{{- $agent.Name -}}
 								</a>
-								({{ $agent.BiographicalData -}})
+								{{- if $agent.BiographicalData -}} ({{ $agent.BiographicalData }}){{- end -}}
 							</div>
 						{{- end -}}
 					</div>

views/routes/components/_content_item.gohtml

@@ -11,17 +11,22 @@
 {{- $openEdit := index . "open_edit" -}}
 {{- $isNew := index . "is_new" -}}
 {{- $error := index . "error" -}}
+{{- $collapsed := index . "collapsed" -}}
 
 {{- $contentID := $content.Id -}}
 {{- if and $overrideID (ne $overrideID "") -}}
 	{{- $contentID = $overrideID -}}
 {{- end -}}
 {{- $editContainerID := printf "content-%s-edit-container" $contentID -}}
+{{- $collapsedAttr := "true" -}}
+{{- if and (ne $collapsed nil) (eq $collapsed false) -}}
+	{{- $collapsedAttr = "false" -}}
+{{- end -}}
 
-<div data-role="content-item" class="relative {{ if $isNew }}data-new-content{{ end }} {{ if $openEdit }}data-editing{{ end }}" data-open-edit="{{ if $openEdit }}true{{ end }}" data-content-temp="{{ if $isNew }}true{{ end }}" data-content-id="{{ $contentID }}" data-collapsed="true">
+<div data-role="content-item" class="relative {{ if $isNew }}data-new-content{{ end }} {{ if $openEdit }}data-editing{{ end }}" data-open-edit="{{ if $openEdit }}true{{ end }}" data-content-temp="{{ if $isNew }}true{{ end }}" data-content-id="{{ $contentID }}" data-collapsed="{{ $collapsedAttr }}">
 	<div data-role="content-view" class="{{ if $openEdit }}hidden{{ end }} mt-1">
 		<div class="border border-slate-200 bg-stone-100 rounded-xs overflow-visible">
-			<div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-stone-100 px-3 py-1 cursor-pointer hover:bg-stone-200 transition-colors duration-75 flex-nowrap whitespace-nowrap" data-role="content-drag-handle" data-content-header="true" draggable="true" aria-label="Beitrag verschieben">
+			<div class="flex items-center justify-between gap-4 border-b border-slate-200 bg-stone-100 px-3 py-1 cursor-pointer hover:bg-stone-200/50 transition-colors duration-75 flex-nowrap whitespace-nowrap" data-role="content-drag-handle" data-content-header="true" draggable="true" aria-label="Beitrag verschieben">
 				<div class="flex items-center gap-2 text-sm font-bold text-gray-800 flex-1 min-w-0 flex-nowrap whitespace-nowrap">
 					<tool-tip position="top" class="!inline">
 						<div class="data-tip" data-role="content-collapse-tooltip">Einklappen</div>
@@ -43,6 +48,9 @@
 							</button>
 						</tool-tip>
 					</div>
+					{{- if $content.Extent -}}
+						<span class="bg-slate-200 text-slate-900 px-1.5 py-0.5 rounded text-sm font-semibold shadow-sm shrink-0" data-role="content-page-pill">S. {{- $content.Extent -}}</span>
+					{{- end -}}
 					{{- if $content.MusenalmType -}}
 						<span class="flex flex-nowrap gap-1 text-gray-700 font-normal overflow-hidden">
 							{{- range $i, $t := $content.MusenalmType -}}
@@ -51,23 +59,10 @@
 						</span>
 					{{- end -}}
 					<div class="flex items-baseline gap-2 text-gray-800 min-w-0 flex-1 overflow-hidden flex-nowrap whitespace-nowrap" data-role="content-header-title">
-						{{- if $content.Extent -}}
-							<span class="bg-slate-200 text-slate-900 px-1.5 py-0.5 rounded text-xs font-semibold shadow-sm shrink-0">S. {{- $content.Extent -}}</span>
-						{{- end -}}
 						{{- if $content.PreferredTitle -}}
-							<span class="text-sm font-semibold truncate min-w-0 overflow-hidden">{{- $content.PreferredTitle -}}</span>
+							<span class="text-sm font-semibold truncate min-w-0 overflow-hidden" data-role="content-header-title-text">{{- $content.PreferredTitle -}}</span>
 						{{- else if $content.TitleStmt -}}
-							<span class="text-sm font-semibold italic truncate min-w-0 overflow-hidden">{{- $content.TitleStmt -}}</span>
+							<span class="text-sm font-semibold italic truncate min-w-0 overflow-hidden" data-role="content-header-title-text">{{- $content.TitleStmt -}}</span>
-						{{- end -}}
-					</div>
-					<div class="hidden flex items-baseline gap-2 text-gray-800 min-w-0 overflow-hidden flex-1 flex-nowrap whitespace-nowrap" data-role="content-collapsed-summary">
-						{{- if $content.Extent -}}
-							<span class="bg-slate-200 text-slate-900 px-1.5 py-0.5 rounded text-sm font-semibold shadow-sm shrink-0">S. {{- $content.Extent -}}</span>
-						{{- end -}}
-						{{- if $content.PreferredTitle -}}
-							<span class="text-sm font-semibold truncate min-w-0 overflow-hidden">{{- $content.PreferredTitle -}}</span>
-						{{- else if $content.TitleStmt -}}
-							<span class="text-sm font-semibold italic truncate min-w-0 overflow-hidden">{{- $content.TitleStmt -}}</span>
 						{{- end -}}
 					</div>
 				</div>
@@ -121,6 +116,44 @@
 				</div>
 			</dialog>
 			<div class="grid gap-2 grid-cols-[8rem_1fr] items-baseline px-3 py-2" data-role="content-view-body">
+				{{- if or $content.Extent $content.MusenalmPagination -}}
+					<div class="text-sm font-bold text-gray-700">Seite</div>
+					<div class="text-base">
+						{{ if $content.Extent }}{{ $content.Extent }}{{ end }}{{ if and $content.Extent $content.MusenalmPagination }}, {{ end }}{{ if $content.MusenalmPagination }}{{ $content.MusenalmPagination }}{{ end }}
+					</div>
+				{{- end -}}
+				{{- if $content.TitleStmt -}}
+					<div class="text-sm font-bold text-gray-700">Titel</div>
+					<div class="text-base italic">{{- $content.TitleStmt -}}</div>
+				{{- end -}}
+				{{- if $content.SubtitleStmt -}}
+					<div class="text-sm font-bold text-gray-700">Untertitel</div>
+					<div class="text-base italic">{{- $content.SubtitleStmt -}}</div>
+				{{- end -}}
+				{{- if $content.ParallelTitle -}}
+					<div class="text-sm font-bold text-gray-700">Paralleltitel</div>
+					<div class="text-base italic">{{- $content.ParallelTitle -}}</div>
+				{{- end -}}
+				{{- if $content.VariantTitle -}}
+					<div class="text-sm font-bold text-gray-700">Titelvarianten</div>
+					<div class="text-base italic">{{- $content.VariantTitle -}}</div>
+				{{- end -}}
+				{{- if $content.PlaceStmt -}}
+					<div class="text-sm font-bold text-gray-700">Ortsangabe</div>
+					<div class="text-base italic">{{- $content.PlaceStmt -}}</div>
+				{{- end -}}
+				{{- if gt (len $content.Language) 0 -}}
+					<div class="text-sm font-bold text-gray-700">Sprache</div>
+					<div class="text-base">
+						{{- range $i, $lang := $content.Language -}}{{- if $i }}, {{ end -}}{{- $lang -}}{{- end -}}
+					</div>
+				{{- end -}}
+				{{- if gt (len $content.ContentType) 0 -}}
+					<div class="text-sm font-bold text-gray-700">Beitragstyp</div>
+					<div class="text-base">
+						{{- range $i, $t := $content.ContentType -}}{{- if $i }}, {{ end -}}{{- $t -}}{{- end -}}
+					</div>
+				{{- end -}}
 				{{- if $content.IncipitStmt -}}
 					<div class="text-sm font-bold text-gray-700">Incipit</div>
 					<div class="text-base italic">{{ $content.IncipitStmt }}…</div>
@@ -129,6 +162,10 @@
 					<div class="text-sm font-bold text-gray-700">Autorangabe</div>
 					<div class="text-base italic">{{- $content.ResponsibilityStmt -}}</div>
 				{{- end -}}
+				{{- if $content.Comment -}}
+					<div class="text-sm font-bold text-gray-700">Kommentar</div>
+					<div class="text-base italic">{{- $content.Comment -}}</div>
+				{{- end -}}
 				{{- if $contentAgents -}}
 					<div class="text-sm font-bold text-gray-700">Personen</div>
 					<div class="text-base">
@@ -141,7 +178,7 @@
 											{{- $agent.Name -}}
 										</a>
 										{{- if $agent.BiographicalData -}}
-											<span>({{ $agent.BiographicalData }})</span>
+											<span> ({{ $agent.BiographicalData }})</span>
 										{{- end -}}
 									</div>
 								{{- end -}}