kantarciandClaude Fable 5.2
b08862b139
- The editor keeps unsaved changes in the browser and offers them after a crash, a closed tab or an expired session. No timed save on the server: every save is a full revision. - The save status stays visible in narrow windows. - Settings get a sticky section bar, two folded groups and a save bar that stays in view. - The admin post list fetches terms and images once, not per post. - Archive post titles are second-level headings, the archive head keeps full text contrast, the skip link sits above a sticky header, a linked image without alternative text names its link. - The editor check starts through the dev router like the others. Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
102 lines
13 KiB
Twig
102 lines
13 KiB
Twig
{% extends 'admin/base.html.twig' %}
|
||
{% set area = partial|default(null) %}
|
||
{% set subject = area ? area.document : page.document %}
|
||
{% set listRoute = area ? 'admin_partials' : (page.type == 'post' ? 'admin_posts' : 'admin_pages') %}
|
||
{% block title %}{{ subject.title }} bearbeiten{% endblock %}
|
||
{% block body_class %}editor-body{% endblock %}
|
||
{% block styles %}<link rel="stylesheet" href="/assets/editor.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/media-dialog.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/buttons.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/button-controls.css?v={{ kant_version() }}"><link rel="stylesheet" href="/assets/color-control.css?v={{ kant_version() }}">{% endblock %}
|
||
{% block scripts %}<script type="module" src="/assets/editor.js?v={{ kant_version() }}"></script>{% endblock %}
|
||
{% block body %}
|
||
{# The API base decides what is edited. An area is shared, so it has no draft and no
|
||
publication: saving is live, and the publish button is left out.
|
||
|
||
One sidebar, one canvas. The sidebar shows one thing at a time - the element library, the
|
||
page structure, the page settings or the options of the selected element - the way the
|
||
Flatsome UX Builder does it. Nothing competes for the eye. #}
|
||
<div id="editor" data-api="{{ area ? path('admin_partial_editor', {id: area.id}) : path('admin_document', {id: page.id}) }}" data-kind="{{ area ? area.kind : 'page' }}" data-can-script="{{ is_granted('ROLE_ADMIN') ? 'true' : 'false' }}" data-can-publish="{{ not area and is_granted('ROLE_PUBLISHER') ? 'true' : 'false' }}">
|
||
<header class="editor-header">
|
||
<a class="back-link" href="{{ path(listRoute) }}" aria-label="{{ area ? 'Zur Bereichsübersicht' : (page.type == 'post' ? 'Zur Beitragsübersicht' : 'Zur Seitenübersicht') }}"><span aria-hidden="true">←</span> <span>{{ area ? 'Bereiche' : (page.type == 'post' ? 'Beiträge' : 'Seiten') }}</span></a>
|
||
<div class="editor-page-name"><h1>{{ subject.title }}</h1><span>{{ area ? kinds[area.kind]|default('Bereich') : '/' ~ (page.slug == 'home' ? '' : page.slug) }}</span></div>
|
||
<div class="viewport-controls" role="group" aria-label="Vorschaugröße">
|
||
<button type="button" data-viewport="desktop" aria-pressed="true" title="Desktop"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg><span>Desktop</span></button>
|
||
<button type="button" data-viewport="tablet" aria-pressed="false" title="Tablet"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M11 18h2"/></svg><span>Tablet</span></button>
|
||
<button type="button" data-viewport="mobile" aria-pressed="false" title="Mobil"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="2" width="10" height="20" rx="2"/><path d="M11 18h2"/></svg><span>Mobil</span></button>
|
||
</div>
|
||
{# Der Sprachumschalter (ADR 111). Er erscheint nur, wenn die Website weitere Sprachen hat. #}
|
||
<div id="language-switch" class="language-switch" role="group" aria-label="Sprache der Bearbeitung" hidden></div>
|
||
<div class="history-actions">
|
||
<button id="undo" class="icon-button" title="Rückgängig (Strg+Z)" aria-label="Rückgängig" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14 4 9l5-5"/><path d="M4 9h10a6 6 0 0 1 0 12h-3"/></svg></button>
|
||
<button id="redo" class="icon-button" title="Wiederholen (Strg+Umschalt+Z)" aria-label="Wiederholen" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 14 5-5-5-5"/><path d="M20 9H10a6 6 0 0 0 0 12h3"/></svg></button>
|
||
<button id="preview-motion" type="button" class="icon-button" aria-pressed="false" title="Bewegung in der Vorschau abspielen" aria-label="Bewegung in der Vorschau abspielen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 4 14 8-14 8z"/></svg></button>
|
||
</div>
|
||
<div class="save-actions">
|
||
<span id="save-status" role="status" aria-live="polite">Wird geladen …</span>
|
||
<button id="save" class="secondary" disabled>{{ area ? 'Bereich speichern' : 'Entwurf speichern' }}</button>
|
||
{% if not area and is_granted('ROLE_PUBLISHER') %}<button id="publish" class="primary" disabled>Veröffentlichen</button>{% endif %}
|
||
{% if not area %}<a class="icon-button" href="{{ page.path == 'home' ? '/' : '/' ~ page.path }}" target="_blank" rel="noopener" title="Öffentliche Seite öffnen" aria-label="Öffentliche Seite öffnen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h6v6M20 4l-9 9"/><path d="M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/></svg></a>{% endif %}
|
||
</div>
|
||
</header>
|
||
<div id="message" class="editor-message" role="alert" hidden></div>
|
||
<div id="local-backup" class="editor-message editor-backup" role="status" hidden><span id="local-backup-text"></span><span class="editor-backup-actions"><button type="button" class="secondary" id="local-backup-restore">Wiederherstellen</button><button type="button" class="text-button" id="local-backup-discard">Verwerfen</button></span></div>
|
||
<div id="recovery" class="recovery-bar" hidden><button id="download" class="secondary">Änderungen als JSON sichern</button><button id="reload" class="secondary">Serverstand laden</button><a href="{{ path('admin_login') }}" target="_blank" rel="noopener">Erneut anmelden ↗</a></div>
|
||
<main id="admin-main" class="editor-layout" tabindex="-1">
|
||
<aside class="sidebar" aria-label="Bearbeitung" data-view="elements">
|
||
{# The top of the sidebar answers "where am I". Without a selection it is a small
|
||
set of tabs; with one it is the element's name, the way back up and the plus. #}
|
||
<div class="sidebar-head">
|
||
<div class="sidebar-nav" role="tablist" aria-label="Seitenleiste">
|
||
<button type="button" role="tab" data-view="elements" aria-selected="true">Elemente</button>
|
||
<button type="button" role="tab" data-view="structure" aria-selected="false">Struktur</button>
|
||
<button type="button" id="select-page" role="tab" data-view="page" aria-selected="false">Seite</button>
|
||
</div>
|
||
<div class="sidebar-element" hidden>
|
||
<button type="button" id="go-parent" class="icon-button" title="Zurück zum übergeordneten Element" aria-label="Zurück zum übergeordneten Element"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 4-8 8 8 8"/></svg></button>
|
||
<div class="sidebar-element-name"><h2 id="properties-title">Element</h2><nav id="breadcrumbs" class="breadcrumbs" aria-label="Ausgewähltes Element"></nav></div>
|
||
<button type="button" id="add-here" class="icon-button" title="Element hinzufügen" aria-label="Element hinzufügen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
<button type="button" id="close-element" class="icon-button" title="Auswahl aufheben (Escape)" aria-label="Auswahl aufheben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
||
</div>
|
||
<div class="property-tabs" role="group" aria-label="Eigenschaftenbereich" hidden><button data-panel="content" aria-pressed="true">Inhalt</button><button data-panel="design" aria-pressed="false">Design</button><button data-panel="advanced" aria-pressed="false">Erweitert</button></div>
|
||
</div>
|
||
<div class="sidebar-body">
|
||
<section class="sidebar-view" data-view="elements" id="toolbox">
|
||
<p id="insert-hint" class="insert-hint" role="status" hidden>Einfügepunkt gesetzt — das nächste Element landet dort. <button id="cancel-insert" class="text-button" type="button">Abbrechen</button></p>
|
||
<label class="visually-hidden" for="library-search">Element suchen</label>
|
||
<input id="library-search" type="search" placeholder="Element suchen …" autocomplete="off">
|
||
<p id="library-found" class="field-help" role="status"></p>
|
||
<div id="library" class="library"></div>
|
||
<h3 class="library-group-title">Fertige Abschnitte</h3>
|
||
<div id="presets" class="preset-library"><button type="button" data-preset="hero" disabled><span aria-hidden="true">▮</span> Vollbild-Hero</button><button type="button" data-preset="intro" disabled><span aria-hidden="true">▤</span> Intro mit Button</button><button type="button" data-preset="columns" disabled><span aria-hidden="true">▥</span> Zwei Leistungen</button><button type="button" data-preset="cta" disabled><span aria-hidden="true">↗</span> Kontaktaufruf</button></div>
|
||
<button id="open-media-library" type="button" class="secondary full-width media-launch" disabled>Mediathek öffnen</button>
|
||
</section>
|
||
<section class="sidebar-view" data-view="structure" hidden>
|
||
<label class="visually-hidden" for="tree-search">Element auf der Seite suchen</label>
|
||
<input id="tree-search" type="search" placeholder="Auf der Seite suchen …">
|
||
<div class="tree-tools"><button id="expand-all" class="text-button" type="button">Alle öffnen</button><button id="collapse-all" class="text-button" type="button">Einklappen</button><button id="nest" class="text-button" type="button" title="In vorherigen Container verschachteln">⇥ Einrücken</button><button id="outdent" class="text-button" type="button" title="Eine Ebene herausheben">⇤ Ausrücken</button></div>
|
||
<nav id="structure" aria-label="Blöcke auswählen"></nav>
|
||
</section>
|
||
<section class="sidebar-view" data-view="translate" id="translate-panel" aria-label="Übersetzung" hidden></section>
|
||
<section class="sidebar-view" data-view="element" hidden>
|
||
<div id="properties"><p class="muted">Inhalte werden geladen …</p></div>
|
||
</section>
|
||
</div>
|
||
<div class="sidebar-foot block-actions" hidden>
|
||
<button id="move-up" type="button" class="icon-button" title="Nach oben verschieben" aria-label="Nach oben verschieben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
|
||
<button id="move-down" type="button" class="icon-button" title="Nach unten verschieben" aria-label="Nach unten verschieben"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg></button>
|
||
<button id="duplicate" type="button" class="secondary">Duplizieren</button>
|
||
<button id="delete" type="button" class="secondary danger-text">Löschen</button>
|
||
</div>
|
||
<p id="motion-status" class="sidebar-note" role="status" hidden>Dein Browser meldet „Bewegung reduzieren“. Die Website spielt Einblendungen trotzdem ab, solange unter Einstellungen nicht „Systemvorgabe beachten“ gewählt ist.</p>
|
||
</aside>
|
||
<section class="canvas-panel" aria-label="Live-Vorschau">
|
||
<div class="canvas-scroll" tabindex="0" role="region" aria-label="Vorschau scrollen"><div id="preview-stage"><iframe id="preview" title="Vorschau der bearbeiteten Seite" sandbox="allow-same-origin" class="viewport-desktop"></iframe></div></div>
|
||
<p id="preview-status" class="preview-status" role="status">Vorschau wird geladen …</p>
|
||
</section>
|
||
</main>
|
||
<div id="context-menu" class="context-menu" role="menu" aria-label="Elementmenü" hidden></div>
|
||
<noscript><p class="notice error">Zum Bearbeiten muss JavaScript aktiviert sein. Die öffentliche Website funktioniert ohne JavaScript.</p></noscript>
|
||
<dialog id="publish-dialog" aria-labelledby="publish-title"><h2 id="publish-title">Seite veröffentlichen?</h2><p>Der gespeicherte Entwurf ersetzt den bisher sichtbaren Inhalt dieser Seite.</p><p id="publish-languages" hidden>Alle Sprachen dieser Seite gehen gemeinsam online – auch die Übersetzungen im gespeicherten Stand.</p><div class="dialog-actions"><button id="cancel-publish" class="secondary">Abbrechen</button><button id="confirm-publish" class="primary">Jetzt veröffentlichen</button></div></dialog>
|
||
<dialog id="preset-dialog" aria-labelledby="preset-title"><h2 id="preset-title">Gestaltung als Vorlage speichern</h2><p>Die Vorlage steht danach für jeden Block auf jeder Seite zur Verfügung.</p><label for="preset-name">Name der Vorlage</label><input id="preset-name" maxlength="60" placeholder="Heller Abschnitt"><p id="preset-error" class="field-error" hidden></p><div class="dialog-actions"><button id="cancel-preset" class="secondary">Abbrechen</button><button id="confirm-preset" class="primary">Vorlage speichern</button></div></dialog>
|
||
<dialog id="reload-dialog" aria-labelledby="reload-title"><h2 id="reload-title">Serverstand laden?</h2><p>Lokale Änderungen und dein Undo-Verlauf werden ersetzt. Sichere deine Änderungen vorher als JSON.</p><div class="dialog-actions"><button id="cancel-reload" class="secondary">Abbrechen</button><button id="confirm-reload" class="primary">Serverstand übernehmen</button></div></dialog>
|
||
</div>
|
||
{% endblock %}
|