Annotation styles

This commit is contained in:
Simon Martens
2026-01-10 19:08:20 +01:00
parent 21f07f0e7f
commit 69c525f192
13 changed files with 98 additions and 16 deletions

View File

@@ -8810,6 +8810,9 @@ class Qc extends HTMLElement {
}
}
}
document.addEventListener("trix-file-accept", (s) => {
s.preventDefault();
});
const Zc = "filter-list", th = "fab-menu", eh = "scroll-button", ih = "tool-tip", nh = "abbrev-tooltips", sh = "int-link", rh = "popup-image", oh = "tab-list", ah = "filter-pill", lh = "image-reel", ch = "multi-select-places", hh = "multi-select-simple", dh = "single-select-remote", mo = "reset-button", uh = "div-manager", mh = "items-editor", gh = "almanach-edit-page", ph = "relations-editor", fh = "edit-page";
customElements.define(sh, Fl);
customElements.define(nh, Ae);

File diff suppressed because one or more lines are too long

View File

@@ -176,7 +176,7 @@
{{- if $model.result.Entry.Annotation -}}
<div class="entryrow">
<div class="fieldlabel">Anmerkungen</div>
<div class="fieldvalue">
<div class="fieldvalue annotation-content">
{{- Safe (ReplaceSlashParen $model.result.Entry.Annotation) -}}
</div>
</div>

View File

@@ -65,9 +65,10 @@
<!-- Link dialog (required for link functionality) -->
<div class="trix-dialogs" data-trix-dialogs>
<div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
<div class="trix-dialog__link-fields">
<input type="url" name="href" class="trix-input trix-input--dialog" placeholder="Enter a URL…" aria-label="URL" required data-trix-input>
<div class="trix-button-group">
<div class="trix-dialog__link-fields flex flex-row">
<input type="url" name="href" class="trix-input trix-input--dialog"
placeholder="URL eingeben…" aria-label="URL" required data-trix-input>
<div class="trix-button-group flex-row">
<input type="button" class="trix-button trix-button--dialog" value="Link" data-trix-method="setAttribute">
<input type="button" class="trix-button trix-button--dialog" value="Unlink" data-trix-method="removeAttribute">
</div>

View File

@@ -47,7 +47,7 @@
</span>
{{ if $r.Annotation }}
<span>&ensp;&middot;&ensp;</span>
<span class="{{ if $marka }}reihen-text{{ end }}">{{ Safe $r.Annotation }}</span>
<span class="{{ if $marka }}reihen-text{{ end }} annotation-content">{{ Safe $r.Annotation }}</span>
{{ end }}
</div>
{{ template "_reiherelations" (Arr $r $bds $entries false $request) }}

View File

@@ -123,13 +123,13 @@
</div>
<textarea name="pseudonyms" id="pseudonyms" class="inputinput" autocomplete="off" rows="1">{{- $place.Pseudonyms -}}</textarea>
</div>
{{ template "_annotation_field" (Arr $place.Annotation "Annotation") }}
<div class="inputwrapper">
<div class="inputlabelrow">
<label for="uri" class="inputlabel">URI</label>
<label for="uri" class="inputlabel">URL</label>
</div>
<input name="uri" id="uri" class="inputinput" autocomplete="off" value="{{ $place.URI }}" />
</div>
{{ template "_annotation_field" (Arr $place.Annotation "Annotation") }}
<div class="inputwrapper">
<div class="px-3 py-2 flex flex-row gap-2 font-bold">
<input type="checkbox" name="fictional" id="fictional" {{ if $place.Fictional }}checked{{ end }} data-boolean-checkbox />

View File

@@ -121,7 +121,7 @@
<span class="font-bold">{{ $r.Title }}</span>
</div>
{{ if $r.Annotation }}
<div class="max-w-[48rem]">
<div class="max-w-[48rem] annotation-content">
<span class="">{{ Safe $r.Annotation }}</span>
</div>
{{ end }}

View File

@@ -63,7 +63,7 @@
</div>
{{ if $r.Annotation }}
<div class="max-w-[48rem] mt-1">
<div class="max-w-[48rem] mt-1 annotation-content">
<span class="">{{ Safe $r.Annotation }}</span>
</div>
{{ end }}

View File

@@ -43,6 +43,11 @@
<i class="ri-map-pin-line"></i>
<span class="filtercategory">Erscheinungsort</span> &middot;
<span class="filterterm">{{ $model.result.Place.Name }}</span>
{{- if (IsAdminOrEditor $model.request.user) -}}
<a href="/ort/{{ $model.result.Place.Id }}/edit" class="no-underline rounded bg-stone-100 px-1.5">
<i class="ri-edit-line"></i>
</a>
{{- end -}}
</div>
{{ end }}

View File

@@ -186,7 +186,7 @@
</div>
{{- end -}}
{{- if $entry.Annotation -}}
<div class="text-base hyphens-auto">
<div class="text-base hyphens-auto annotation-content">
<b>Anm.: </b
><span class="{{- if $isAnnotations -}}search-text{{- end -}}"
>{{- Safe

View File

@@ -535,12 +535,12 @@
/* Trix editor content area */
trix-editor {
@apply block w-full focus:border-none focus:outline-none px-3 py-2 min-h-[6rem];
@apply block w-full focus:border-none focus:outline-none px-3 py-2 min-h-[9rem];
}
/* Trix content formatting styles */
trix-editor h1 {
@apply text-2xl font-bold mt-4 mb-2 first:mt-0;
@apply mt-1.5 mb-0.5 first:mt-0 !text-base !font-sans !font-bold;
}
trix-editor blockquote {
@@ -611,7 +611,7 @@
}
.trix-dialog {
@apply hidden absolute top-full left-0 right-0 mt-1 p-3 bg-white border border-stone-300 rounded-md shadow-lg z-10;
@apply hidden absolute top-full left-0 right-0 mt-1 p-3 bg-white border border-stone-300 rounded-xs shadow-lg z-10;
}
.trix-dialog[data-trix-active] {
@@ -623,7 +623,7 @@
}
.trix-input--dialog {
@apply w-full px-3 py-1.5 border border-stone-300 rounded-md
@apply w-full px-3 py-1.5 border border-stone-300 rounded-xs
focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-1;
}
@@ -632,7 +632,7 @@
}
.trix-button--dialog {
@apply px-4 py-1.5 text-sm font-medium rounded-md
@apply px-4 py-1.5 text-sm font-medium rounded-xs
border border-transparent shadow-sm
cursor-pointer transition-all duration-75
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500;

View File

@@ -2,6 +2,12 @@
import "./site.css";
import Trix from "trix";
// Disable file attachments in Trix editor
document.addEventListener("trix-file-accept", (event) => {
event.preventDefault();
});
import { FilterPill } from "./filter-pill.js";
import { FilterList } from "./filter-list.js";
import { ScrollButton } from "./scroll-button.js";

View File

@@ -253,6 +253,73 @@
@apply -indent-3.5 ml-3.5;
}
/* Annotation Content Display Styling */
.annotation-content {
@apply font-serif;
}
/* Headings - bold with spacing, same font size */
.annotation-content h1 {
@apply font-bold mt-2 mb-1 leading-normal;
}
/* Blockquotes - minimal styling */
.annotation-content blockquote {
@apply border-l-4 border-stone-400 pl-4 py-1 italic text-gray-700;
}
/* Lists - compact with proper indentation */
.annotation-content ul {
@apply list-disc list-outside my-1;
}
.annotation-content ol {
@apply list-decimal list-outside my-1;
}
.annotation-content li {
@apply leading-normal;
margin-left: 1.5rem;
}
.annotation-content ul > li {
list-style-type: disc;
}
.annotation-content ol > li {
list-style-type: decimal;
}
/* Nested lists - remove extra spacing */
.annotation-content ul ul,
.annotation-content ol ul {
@apply list-disc my-0;
}
.annotation-content ul ol,
.annotation-content ol ol {
@apply list-decimal my-0;
}
.annotation-content ul ul > li,
.annotation-content ol ul > li,
.annotation-content ul ol > li,
.annotation-content ol ol > li {
@apply leading-normal;
}
/* Links - match site link styling */
.annotation-content a {
@apply hyphens-none underline decoration-dotted hover:decoration-solid
text-slate-700 hover:text-slate-900 underline-offset-3;
}
/* Code blocks (if needed) */
.annotation-content pre {
@apply bg-stone-100 border border-stone-300 rounded px-3 py-2 my-1
font-mono text-sm overflow-x-auto;
}
#indexpage {
background-image: url("/assets/bg.jpg");
@apply h-full w-full;