ui: zitieren als Link (↗), Versionen mit Uhr-Icon, interne Zitierweise als Option

- zitieren: kein Pill mehr — Link in der Pill-Schrift (Display) mit ↗ am Ende
- Versionen: Pill behält, davor ein monochromes Uhr-SVG (currentColor)
- Zitier-Formate: „intern" (OPENBUREAU-Hausformat inkl. Version) als dritte
  Option und Default, neben APA und DIN

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 03:11:39 +02:00
parent fce6c9eabc
commit e62b4c3704
2 changed files with 34 additions and 12 deletions
+20 -5
View File
@@ -1482,11 +1482,12 @@ img:hover { filter: grayscale(0%); }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
Artikel-Fuß: zitieren (Link + dezente Angabe), Aktionsreihe, Versionen. Artikel-Fuß: zitieren (Link + dezente Angabe), Aktionsreihe, Versionen.
------------------------------------------------------------------------ */ ------------------------------------------------------------------------ */
/* zitieren + Versionen: Pills wie Dialog (Akzent-Outline). */ /* Versionen: Pill wie Dialog (Akzent-Outline) mit Uhr-Icon. */
.cite { margin-top: var(--spacing-sm); } .cite { margin-top: var(--spacing-sm); }
.cite-toggle,
.versions-toggle { .versions-toggle {
display: inline-block; display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-family-display); font-family: var(--font-family-display);
font-weight: 500; font-weight: 500;
font-size: 0.82rem; font-size: 0.82rem;
@@ -1498,10 +1499,24 @@ img:hover { filter: grayscale(0%); }
padding: 0.28em 0.85em; padding: 0.28em 0.85em;
cursor: pointer; cursor: pointer;
} }
.cite-toggle:hover,
.versions-toggle:hover, .versions-toggle:hover,
.cite-toggle[aria-expanded="true"],
.versions-toggle[aria-expanded="true"] { background: var(--accent); color: #fff; } .versions-toggle[aria-expanded="true"] { background: var(--accent); color: #fff; }
.versions-toggle .pill-icon { width: 1em; height: 1em; flex: none; }
/* zitieren: kein Pill — Link in der Pill-Schrift, mit ↗ am Ende. */
.cite-toggle {
font-family: var(--font-family-display);
font-weight: 500;
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--accent);
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.cite-toggle:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cite-arrow { font-size: 0.9em; }
/* „kopieren" bleibt ein schlichter Link in der Quellenangabe. */ /* „kopieren" bleibt ein schlichter Link in der Quellenangabe. */
.cite-copy { .cite-copy {
+12 -5
View File
@@ -4,15 +4,17 @@
{{/* Zitieren: schlichter Link direkt unter den Quellen. */}} {{/* Zitieren: schlichter Link direkt unter den Quellen. */}}
<div class="cite"> <div class="cite">
<button type="button" class="cite-toggle" aria-expanded="false">zitieren</button> <button type="button" class="cite-toggle" aria-expanded="false">zitieren <span class="cite-arrow"></span></button>
<div class="cite-box" hidden <div class="cite-box" hidden
data-title="{{ .Title }}" data-title="{{ .Title }}"
data-author="{{ $author }}" data-author="{{ $author }}"
data-url="{{ .Permalink }}" data-url="{{ .Permalink }}"
data-year="{{ .Date.Format "2006" }}"> data-year="{{ .Date.Format "2006" }}"
{{ with .GitInfo }}data-version="{{ .AbbreviatedHash }}"{{ end }}>
<p class="cite-text"></p> <p class="cite-text"></p>
<div class="cite-actions"> <div class="cite-actions">
<button type="button" class="cite-fmt is-active" data-fmt="apa">APA</button> <button type="button" class="cite-fmt is-active" data-fmt="ob">intern</button>
<button type="button" class="cite-fmt" data-fmt="apa">APA</button>
<button type="button" class="cite-fmt" data-fmt="din">DIN</button> <button type="button" class="cite-fmt" data-fmt="din">DIN</button>
<button type="button" class="cite-copy">kopieren</button> <button type="button" class="cite-copy">kopieren</button>
<span class="cite-status" role="status"></span> <span class="cite-status" role="status"></span>
@@ -33,7 +35,7 @@
{{/* Versionen: eine Zeile darunter; öffnet den Verlauf direkt auf der Seite. */}} {{/* Versionen: eine Zeile darunter; öffnet den Verlauf direkt auf der Seite. */}}
<div class="article-versions"> <div class="article-versions">
<button type="button" class="versions-toggle" id="version-badge" aria-expanded="false" <button type="button" class="versions-toggle" id="version-badge" aria-expanded="false"
data-path="{{ .File.Path }}">Versionen</button> data-path="{{ .File.Path }}"><svg class="pill-icon" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7.5V12l3 2"/></svg>Versionen</button>
</div> </div>
<script> <script>
@@ -46,7 +48,7 @@
var textEl = box.querySelector('.cite-text'); var textEl = box.querySelector('.cite-text');
var statusEl = box.querySelector('.cite-status'); var statusEl = box.querySelector('.cite-status');
var d = box.dataset; var d = box.dataset;
var fmt = 'apa'; var fmt = 'ob';
function nameParts(n) { function nameParts(n) {
var p = (n || '').trim().split(/\s+/); var p = (n || '').trim().split(/\s+/);
@@ -60,9 +62,14 @@
return (n.last ? n.last.toUpperCase() + ', ' + n.first + ': ' : '') return (n.last ? n.last.toUpperCase() + ', ' + n.first + ': ' : '')
+ d.title + '. OPENBUREAU. ' + d.url + ' (abgerufen am ' + today() + ').'; + d.title + '. OPENBUREAU. ' + d.url + ' (abgerufen am ' + today() + ').';
} }
if (fmt === 'apa') {
return (n.last ? n.last + ', ' + n.initials + ' ' : '') return (n.last ? n.last + ', ' + n.initials + ' ' : '')
+ '(' + d.year + '). ' + d.title + '. OPENBUREAU. Abgerufen am ' + today() + ', von ' + d.url; + '(' + d.year + '). ' + d.title + '. OPENBUREAU. Abgerufen am ' + today() + ', von ' + d.url;
} }
// intern (OPENBUREAU-Hausformat): inkl. Version, weil Beiträge lebende Dokumente sind.
return (d.author ? d.author + ': ' : '') + d.title + '. OPENBUREAU'
+ (d.version ? ', Version ' + d.version : '') + '. Abgerufen am ' + today() + ', ' + d.url;
}
function render() { textEl.textContent = build(); } function render() { textEl.textContent = build(); }
function copy() { function copy() {
var t = build(); var t = build();