cms: WYSIWYG-Editor (Toast UI), Profilseite, ziehbare Vorschau, Pill-Optik
- echtes WYSIWYG statt Markdown-Sterne: Formatierung live, speichert Markdown, Bild-Upload via Toolbar. Editor nimmt den meisten Platz, Metadaten kompakt oben. - Vorschau standardmäßig aus (kein toter Raum) + ziehbarer Trenner Editor↔Vorschau. - Profilseite (Nav Inhalte/Profil): Profilbild-Upload + Kurztext, gespeichert als data/authors.json (vom Theme via site.Data.authors nutzbar). - mehr Pill-Optik (Buttons, Suche, Chips), schwarze Topbar-Navigation. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+159
-138
@@ -1,4 +1,6 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import ToastEditor from '@toast-ui/editor';
|
||||
import '@toast-ui/editor/dist/toastui-editor.css';
|
||||
import { supabase } from './supabase.js';
|
||||
import { api } from './api.js';
|
||||
|
||||
@@ -32,13 +34,11 @@ const EMPTY = {
|
||||
export default function App() {
|
||||
const [session, setSession] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
supabase.auth.getSession().then(({ data }) => { setSession(data.session); setLoading(false); });
|
||||
const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => setSession(s));
|
||||
return () => sub.subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="center muted">…</div>;
|
||||
if (!session) return <Login />;
|
||||
return <Dashboard email={session.user.email} />;
|
||||
@@ -71,6 +71,7 @@ function Dashboard({ email }) {
|
||||
const [entries, setEntries] = useState([]);
|
||||
const [current, setCurrent] = useState(null);
|
||||
const [query, setQuery] = useState('');
|
||||
const [view, setView] = useState('content');
|
||||
const [msg, setMsg] = useState(null);
|
||||
|
||||
async function refresh() {
|
||||
@@ -86,9 +87,7 @@ function Dashboard({ email }) {
|
||||
}
|
||||
|
||||
const q = query.trim().toLowerCase();
|
||||
const filtered = q
|
||||
? entries.filter((e) => e.title.toLowerCase().includes(q) || (e.section || '').includes(q))
|
||||
: entries;
|
||||
const filtered = q ? entries.filter((e) => e.title.toLowerCase().includes(q) || (e.section || '').includes(q)) : entries;
|
||||
const groups = { beitrag: [], seite: [], rubrik: [] };
|
||||
for (const e of filtered) (groups[e.kind] || groups.seite).push(e);
|
||||
|
||||
@@ -97,43 +96,49 @@ function Dashboard({ email }) {
|
||||
<header className="topbar">
|
||||
<span className="logo">OPENBUREAU</span>
|
||||
<span className="logo-sub">Redaktion</span>
|
||||
<nav className="nav">
|
||||
<button className={view === 'content' ? 'active' : ''} onClick={() => setView('content')}>Inhalte</button>
|
||||
<button className={view === 'profile' ? 'active' : ''} onClick={() => setView('profile')}>Profil</button>
|
||||
</nav>
|
||||
<span className="spacer" />
|
||||
<span className="who">{email}</span>
|
||||
<button className="ghost" onClick={() => supabase.auth.signOut()}>Abmelden</button>
|
||||
</header>
|
||||
|
||||
<div className="body">
|
||||
<aside>
|
||||
<button className="new" onClick={() => setCurrent({ ...EMPTY })}>＋ Neuer Beitrag</button>
|
||||
<div className="search">
|
||||
<span>⌕</span>
|
||||
<input placeholder="Suchen…" value={query} onChange={(e) => setQuery(e.target.value)} />
|
||||
</div>
|
||||
{['beitrag', 'seite', 'rubrik'].map((kind) => groups[kind].length > 0 && (
|
||||
<div className="group" key={kind}>
|
||||
<div className="group-title">{KIND_LABEL[kind]} <span>{groups[kind].length}</span></div>
|
||||
<ul className="list">
|
||||
{groups[kind].map((e) => (
|
||||
<li key={e.path} className={current?.path === e.path ? 'active' : ''} onClick={() => open(e)}>
|
||||
<span className="dot" style={{ background: e.color ? hexOf(e.color) : 'var(--line)' }} />
|
||||
<span className="t">
|
||||
<span className="t-title">{e.title}</span>
|
||||
<span className="t-meta">{[e.section, e.date].filter(Boolean).join(' · ')}</span>
|
||||
</span>
|
||||
{e.draft && <span className="draft-tag">Entwurf</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
{current
|
||||
? <Editor key={current.path || 'new'} initial={current}
|
||||
onSaved={(loaded) => { setCurrent(loaded); refresh(); }} onMsg={setMsg} />
|
||||
: <div className="empty"><p>Wähle links einen Eintrag — oder leg einen neuen Beitrag an.</p></div>}
|
||||
</main>
|
||||
{view === 'profile' ? (
|
||||
<Profile onMsg={setMsg} />
|
||||
) : (
|
||||
<>
|
||||
<aside>
|
||||
<button className="new" onClick={() => setCurrent({ ...EMPTY })}>＋ Neuer Beitrag</button>
|
||||
<div className="search"><span>⌕</span><input placeholder="Suchen…" value={query} onChange={(e) => setQuery(e.target.value)} /></div>
|
||||
{['beitrag', 'seite', 'rubrik'].map((kind) => groups[kind].length > 0 && (
|
||||
<div className="group" key={kind}>
|
||||
<div className="group-title">{KIND_LABEL[kind]} <span>{groups[kind].length}</span></div>
|
||||
<ul className="list">
|
||||
{groups[kind].map((e) => (
|
||||
<li key={e.path} className={current?.path === e.path ? 'active' : ''} onClick={() => open(e)}>
|
||||
<span className="dot" style={{ background: e.color ? hexOf(e.color) : 'var(--line)' }} />
|
||||
<span className="t">
|
||||
<span className="t-title">{e.title}</span>
|
||||
<span className="t-meta">{[e.section, e.date].filter(Boolean).join(' · ')}</span>
|
||||
</span>
|
||||
{e.draft && <span className="draft-tag">Entwurf</span>}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</aside>
|
||||
<main>
|
||||
{current
|
||||
? <Editor key={current.path || 'new'} initial={current}
|
||||
onSaved={(loaded) => { setCurrent(loaded); refresh(); }} onMsg={setMsg} />
|
||||
: <div className="empty"><p>Wähle links einen Eintrag — oder leg einen neuen Beitrag an.</p></div>}
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{msg && <div className={`toast ${msg.type}`} onClick={() => setMsg(null)}>{msg.text}</div>}
|
||||
@@ -144,10 +149,27 @@ function Dashboard({ email }) {
|
||||
function Editor({ initial, onSaved, onMsg }) {
|
||||
const [f, setF] = useState(initial);
|
||||
const [previewUrl, setPreviewUrl] = useState(null);
|
||||
const [showPreview, setShowPreview] = useState(true);
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [pw, setPw] = useState(44);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const editorRef = useRef(null);
|
||||
const dragging = useRef(false);
|
||||
const set = (k) => (e) => setF({ ...f, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
|
||||
|
||||
// Ziehbarer Trenner Editor ↔ Vorschau.
|
||||
useEffect(() => {
|
||||
function move(e) {
|
||||
if (!dragging.current || !editorRef.current) return;
|
||||
const r = editorRef.current.getBoundingClientRect();
|
||||
setPw(Math.min(70, Math.max(25, ((r.right - e.clientX) / r.width) * 100)));
|
||||
}
|
||||
function up() { dragging.current = false; document.body.style.cursor = ''; document.body.style.userSelect = ''; }
|
||||
window.addEventListener('mousemove', move);
|
||||
window.addEventListener('mouseup', up);
|
||||
return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
|
||||
}, []);
|
||||
function startDrag(e) { dragging.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; e.preventDefault(); }
|
||||
|
||||
function currentPath() {
|
||||
if (!f.isNew) return f.path;
|
||||
const slug = (f.slug || '').trim();
|
||||
@@ -169,19 +191,15 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
} catch (e) { onMsg({ type: 'err', text: e.message }); return null; }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function preview() {
|
||||
const path = await save();
|
||||
if (!path) return;
|
||||
const path = await save(); if (!path) return;
|
||||
setShowPreview(true); setBusy(true);
|
||||
try { const res = await api.preview(path); setPreviewUrl(`${res.url}?t=${Date.now()}`); }
|
||||
catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function publish() {
|
||||
const path = await save();
|
||||
if (!path) return;
|
||||
const path = await save(); if (!path) return;
|
||||
if (!confirm('Diesen Eintrag live publizieren?')) return;
|
||||
setBusy(true);
|
||||
try { const res = await api.publish(path); onMsg({ type: 'ok', text: `Live: ${res.url}` }); }
|
||||
@@ -190,14 +208,12 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="editor">
|
||||
<div className="editor" ref={editorRef}>
|
||||
<div className="editor-main">
|
||||
<div className="editor-head">
|
||||
<div className="crumb">{f.isNew ? 'Neuer Eintrag' : f.path}</div>
|
||||
<span className="spacer" />
|
||||
{f.draft
|
||||
? <span className="status draft">Entwurf</span>
|
||||
: <span className="status live">Veröffentlicht</span>}
|
||||
{f.draft ? <span className="status draft">Entwurf</span> : <span className="status live">Veröffentlicht</span>}
|
||||
<button className="toggle" onClick={() => setShowPreview((v) => !v)} title="Vorschau ein/aus">
|
||||
{showPreview ? 'Vorschau ⤫' : 'Vorschau ⤢'}
|
||||
</button>
|
||||
@@ -207,71 +223,58 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
</div>
|
||||
|
||||
<div className="fields">
|
||||
<div className="path-row">
|
||||
{f.isNew ? (
|
||||
<>
|
||||
<label className="sm">Typ
|
||||
<select value={f.type} onChange={set('type')}>
|
||||
<option value="beitrag">Beitrag</option>
|
||||
<option value="seite">Seite</option>
|
||||
</select>
|
||||
{f.isNew && (
|
||||
<div className="row">
|
||||
<label className="sm">Typ
|
||||
<select value={f.type} onChange={set('type')}>
|
||||
<option value="beitrag">Beitrag</option>
|
||||
<option value="seite">Seite</option>
|
||||
</select>
|
||||
</label>
|
||||
{f.type === 'beitrag' && (
|
||||
<label className="sm">Rubrik
|
||||
<select value={f.section} onChange={set('section')}>{SECTIONS.map((s) => <option key={s}>{s}</option>)}</select>
|
||||
</label>
|
||||
{f.type === 'beitrag' && (
|
||||
<label className="sm">Rubrik
|
||||
<select value={f.section} onChange={set('section')}>
|
||||
{SECTIONS.map((s) => <option key={s}>{s}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
<label>Slug<input value={f.slug} onChange={set('slug')} placeholder="z.B. neuer-beitrag" /></label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label className="big">Titel<input value={f.title} onChange={set('title')} placeholder="Titel des Beitrags" /></label>
|
||||
|
||||
<div className="row">
|
||||
<div className="meta">
|
||||
<label className="sm">Datum<input type="date" value={f.date} onChange={set('date')} /></label>
|
||||
<label className="xs">Reihenfolge<input type="number" value={f.weight} onChange={set('weight')} placeholder="weight" /></label>
|
||||
<label>Farbe
|
||||
<label className="sm">Farbe
|
||||
<div className="colorpick">
|
||||
<span className="swatch" style={{ background: hexOf(f.color) }} />
|
||||
<select value={f.color} onChange={set('color')}>
|
||||
{COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}
|
||||
</select>
|
||||
<select value={f.color} onChange={set('color')}>{COLORS.map(([v, label]) => <option key={v} value={v}>{label}</option>)}</select>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<label className="sm">Layout
|
||||
<select value={f.layout} onChange={set('layout')}>
|
||||
{LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}
|
||||
</select>
|
||||
<select value={f.layout} onChange={set('layout')}>{LAYOUTS.map((l) => <option key={l} value={l}>{l || '(automatisch)'}</option>)}</select>
|
||||
</label>
|
||||
<label>Tags<input value={f.tags} onChange={set('tags')} placeholder="komma, getrennt" /></label>
|
||||
<label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverzeichnis</label>
|
||||
<label className="check"><input type="checkbox" checked={f.toc} onChange={set('toc')} /> Inhaltsverz.</label>
|
||||
<label className="check"><input type="checkbox" checked={f.draft} onChange={set('draft')} /> Entwurf</label>
|
||||
</div>
|
||||
|
||||
<label>Kurztext (summary)<input value={f.summary} onChange={set('summary')} /></label>
|
||||
|
||||
<div className="row">
|
||||
<label>Cover-Bild<input value={f.cover_image} onChange={set('cover_image')} placeholder="/images/…jpg" /></label>
|
||||
<label>Externer Link<input value={f.external} onChange={set('external')} placeholder="https://…" /></label>
|
||||
</div>
|
||||
|
||||
<MarkdownEditor
|
||||
value={f.body}
|
||||
onChange={(body) => setF((p) => ({ ...p, body }))}
|
||||
onUpload={async (file) => (await api.upload(file)).url}
|
||||
onMsg={onMsg}
|
||||
/>
|
||||
<div className="rich">
|
||||
<RichEditor value={f.body} onChange={(body) => setF((p) => ({ ...p, body }))}
|
||||
onUpload={async (file) => (await api.upload(file)).url} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPreview && <div className="splitter" onMouseDown={startDrag} />}
|
||||
{showPreview && (
|
||||
<div className="preview">
|
||||
<div className="preview" style={{ width: pw + '%' }}>
|
||||
{previewUrl
|
||||
? <iframe title="Vorschau" src={previewUrl} />
|
||||
: <div className="empty small"><p>Auf „Vorschau“ klicken — die Seite erscheint hier in deinem echten Theme.</p></div>}
|
||||
@@ -281,66 +284,84 @@ function Editor({ initial, onSaved, onMsg }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Markdown-Editor mit Formatierungs-Toolbar ──────────────────────────────
|
||||
function MarkdownEditor({ value, onChange, onUpload, onMsg }) {
|
||||
const ta = useRef(null);
|
||||
const fileIn = useRef(null);
|
||||
// ── WYSIWYG-Editor (Toast UI, vanilla) — Formatierung live, speichert Markdown ──
|
||||
function RichEditor({ value, onChange, onUpload }) {
|
||||
const el = useRef(null);
|
||||
const inst = useRef(null);
|
||||
// value/onChange/onUpload in Refs, damit der Editor nur EINMAL erzeugt wird.
|
||||
const cb = useRef({ onChange, onUpload });
|
||||
cb.current = { onChange, onUpload };
|
||||
|
||||
function restore(start, end) {
|
||||
requestAnimationFrame(() => {
|
||||
const el = ta.current; if (!el) return;
|
||||
el.focus(); el.selectionStart = start; el.selectionEnd = end;
|
||||
useEffect(() => {
|
||||
inst.current = new ToastEditor({
|
||||
el: el.current,
|
||||
initialValue: value || '',
|
||||
initialEditType: 'wysiwyg',
|
||||
previewStyle: 'tab',
|
||||
height: '100%',
|
||||
usageStatistics: false,
|
||||
autofocus: false,
|
||||
toolbarItems: [
|
||||
['heading', 'bold', 'italic', 'strike'],
|
||||
['hr', 'quote'],
|
||||
['ul', 'ol'],
|
||||
['link', 'image'],
|
||||
['code', 'codeblock'],
|
||||
],
|
||||
hooks: {
|
||||
addImageBlobHook: async (blob, done) => {
|
||||
try { done(await cb.current.onUpload(blob), blob.name || 'bild'); }
|
||||
catch { /* Upload fehlgeschlagen */ }
|
||||
},
|
||||
},
|
||||
events: { change: () => cb.current.onChange(inst.current.getMarkdown()) },
|
||||
});
|
||||
}
|
||||
function wrap(pre, post = pre, placeholder = '') {
|
||||
const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
|
||||
const sel = value.slice(s, e) || placeholder;
|
||||
onChange(value.slice(0, s) + pre + sel + post + value.slice(e));
|
||||
restore(s + pre.length, s + pre.length + sel.length);
|
||||
}
|
||||
function linePrefix(prefix) {
|
||||
const el = ta.current; const s = el.selectionStart;
|
||||
const ls = value.lastIndexOf('\n', s - 1) + 1;
|
||||
onChange(value.slice(0, ls) + prefix + value.slice(ls));
|
||||
restore(s + prefix.length, s + prefix.length);
|
||||
}
|
||||
function insert(text) {
|
||||
const el = ta.current; const s = el.selectionStart, e = el.selectionEnd;
|
||||
onChange(value.slice(0, s) + text + value.slice(e));
|
||||
restore(s + text.length, s + text.length);
|
||||
}
|
||||
async function pickImage(ev) {
|
||||
return () => { inst.current?.destroy(); inst.current = null; };
|
||||
}, []);
|
||||
|
||||
return <div ref={el} className="rich-host" />;
|
||||
}
|
||||
|
||||
// ── Profil ──────────────────────────────────────────────────────────────────
|
||||
function Profile({ onMsg }) {
|
||||
const [p, setP] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const fileIn = useRef(null);
|
||||
useEffect(() => { api.getProfile().then(setP).catch((e) => onMsg({ type: 'err', text: e.message })); }, []);
|
||||
if (!p) return <div className="empty">…</div>;
|
||||
const set = (k) => (e) => setP({ ...p, [k]: e.target.value });
|
||||
|
||||
async function pickAvatar(ev) {
|
||||
const file = ev.target.files?.[0]; ev.target.value = '';
|
||||
if (!file) return;
|
||||
try { insert(`![${file.name.replace(/\.[^.]+$/, '')}](${await onUpload(file)})`); }
|
||||
catch (e) { onMsg?.({ type: 'err', text: e.message }); }
|
||||
setBusy(true);
|
||||
try { const { url } = await api.upload(file); setP((x) => ({ ...x, avatar: url })); }
|
||||
catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
async function save() {
|
||||
setBusy(true);
|
||||
try { await api.saveProfile({ name: p.name, bio: p.bio, avatar: p.avatar }); onMsg({ type: 'ok', text: 'Profil gespeichert.' }); }
|
||||
catch (e) { onMsg({ type: 'err', text: e.message }); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
const B = ({ on, title, children }) => (
|
||||
<button type="button" className="tb" title={title} onMouseDown={(e) => { e.preventDefault(); on(); }}>{children}</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="md">
|
||||
<div className="toolbar">
|
||||
<B title="Fett" on={() => wrap('**', '**', 'fett')}><b>B</b></B>
|
||||
<B title="Kursiv" on={() => wrap('*', '*', 'kursiv')}><i>I</i></B>
|
||||
<B title="Unterstrichen" on={() => wrap('<u>', '</u>', 'unterstrichen')}><u>U</u></B>
|
||||
<span className="sep" />
|
||||
<B title="Überschrift" on={() => linePrefix('## ')}>H2</B>
|
||||
<B title="Zwischentitel" on={() => linePrefix('### ')}>H3</B>
|
||||
<span className="sep" />
|
||||
<B title="Link" on={() => wrap('[', '](https://)', 'Linktext')}>🔗</B>
|
||||
<B title="Bild hochladen" on={() => fileIn.current?.click()}>🖼</B>
|
||||
<span className="sep" />
|
||||
<B title="Aufzählung" on={() => linePrefix('- ')}>• Liste</B>
|
||||
<B title="Nummeriert" on={() => linePrefix('1. ')}>1.</B>
|
||||
<B title="Zitat" on={() => linePrefix('> ')}>❝</B>
|
||||
<B title="Code" on={() => wrap('`', '`', 'code')}>{'</>'}</B>
|
||||
<input ref={fileIn} type="file" accept="image/*" hidden onChange={pickImage} />
|
||||
<div className="profile">
|
||||
<div className="profile-card">
|
||||
<h2>Profil</h2>
|
||||
<div className="avatar-row">
|
||||
<div className="avatar" style={{ backgroundImage: p.avatar ? `url(${p.avatar})` : 'none' }}>{!p.avatar && '🙂'}</div>
|
||||
<div>
|
||||
<button onClick={() => fileIn.current?.click()} disabled={busy}>Profilbild wählen</button>
|
||||
<input ref={fileIn} type="file" accept="image/*" hidden onChange={pickAvatar} />
|
||||
<p className="muted who-mail">{p.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<label>Name<input value={p.name} onChange={set('name')} placeholder="Dein Name" /></label>
|
||||
<label>Über mich<textarea value={p.bio} onChange={set('bio')} rows={5} placeholder="Kurzer Text über dich…" /></label>
|
||||
<div className="actions"><button className="primary" onClick={save} disabled={busy}>Speichern</button></div>
|
||||
</div>
|
||||
<textarea ref={ta} value={value} spellCheck={false}
|
||||
onChange={(e) => onChange(e.target.value)} placeholder="Hier schreiben… (Markdown)" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,4 +41,6 @@ export const api = {
|
||||
preview: (path) => call('/preview', { method: 'POST', body: JSON.stringify({ path }) }),
|
||||
publish: (path) => call('/publish', { method: 'POST', body: JSON.stringify({ path }) }),
|
||||
upload: uploadFile,
|
||||
getProfile: () => call('/profile'),
|
||||
saveProfile: (p) => call('/profile', { method: 'PUT', body: JSON.stringify(p) }),
|
||||
};
|
||||
|
||||
+44
-43
@@ -22,37 +22,27 @@
|
||||
--amber: #b8902f;
|
||||
|
||||
--radius: 11px;
|
||||
--pill: 22px;
|
||||
--shadow: 0 10px 34px -22px rgba(40,20,10,.5);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
margin: 0; font-family: var(--sans); font-size: 14.5px;
|
||||
color: var(--text); background: var(--bg);
|
||||
}
|
||||
body { margin: 0; font-family: var(--sans); font-size: 14.5px; color: var(--text); background: var(--bg); }
|
||||
button, input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text); }
|
||||
.muted { color: var(--muted); }
|
||||
.center { display: grid; place-items: center; height: 100%; }
|
||||
|
||||
/* ── Login ── */
|
||||
.login {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
|
||||
padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow);
|
||||
}
|
||||
.login { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; width: 320px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
|
||||
.login-brand { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 20px; }
|
||||
.login-sub { font-family: var(--serif); font-style: italic; color: var(--muted); margin-bottom: 10px; }
|
||||
.err { color: var(--accent); margin: 4px 0 0; font-size: 13px; }
|
||||
|
||||
/* ── Inputs / Buttons ── */
|
||||
input, select, textarea {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
|
||||
}
|
||||
/* ── Inputs / Buttons (Pill) ── */
|
||||
input, select, textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%; }
|
||||
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(181,74,44,.12); }
|
||||
button {
|
||||
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
|
||||
padding: 8px 15px; cursor: pointer; font-weight: 500; transition: .12s; white-space: nowrap;
|
||||
}
|
||||
button { background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); padding: 8px 16px; cursor: pointer; font-weight: 500; transition: .12s; white-space: nowrap; }
|
||||
button:hover { border-color: var(--accent-soft); }
|
||||
button:disabled { opacity: .5; cursor: default; }
|
||||
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
@@ -60,30 +50,33 @@ button.primary:hover { background: #a23f23; }
|
||||
button.ghost { background: transparent; border-color: transparent; color: var(--dark-muted); }
|
||||
button.ghost:hover { color: #fff; border-color: var(--dark-muted); }
|
||||
|
||||
/* ── App / Topbar (schwarz wie der Site-Masthead) ── */
|
||||
/* ── Topbar (schwarz wie Site-Masthead) ── */
|
||||
.app { display: flex; flex-direction: column; height: 100%; }
|
||||
.topbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 54px; background: var(--dark); color: var(--dark-text); flex: none; }
|
||||
.topbar .logo { font-family: var(--display); font-weight: 700; letter-spacing: .14em; }
|
||||
.topbar .logo-sub { font-family: var(--serif); font-style: italic; color: var(--dark-muted); font-size: 13px; }
|
||||
.topbar .spacer { flex: 1; }
|
||||
.topbar .who { color: var(--dark-muted); font-size: 13px; }
|
||||
.nav { display: flex; gap: 4px; margin-left: 16px; }
|
||||
.nav button { background: transparent; border: none; color: var(--dark-muted); padding: 6px 15px; border-radius: var(--pill); }
|
||||
.nav button:hover { color: #fff; }
|
||||
.nav button.active { background: rgba(255,255,255,.12); color: #fff; }
|
||||
|
||||
.body { display: flex; flex: 1; min-height: 0; }
|
||||
|
||||
/* ── Sidebar (Collections, Sveltia-artig) ── */
|
||||
/* ── Sidebar ── */
|
||||
aside { width: 290px; flex: none; border-right: 1px solid var(--line); background: var(--panel-2); padding: 14px; overflow: auto; }
|
||||
.new { width: 100%; margin-bottom: 12px; background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
|
||||
.new:hover { background: #a23f23; }
|
||||
.search { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; margin-bottom: 16px; }
|
||||
.search { display: flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); padding: 0 13px; margin-bottom: 16px; }
|
||||
.search span { color: var(--muted); font-size: 17px; }
|
||||
.search input { border: none; background: transparent; padding: 9px 0; }
|
||||
.search input:focus { box-shadow: none; }
|
||||
|
||||
.group { margin-bottom: 18px; }
|
||||
.group-title { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 6px 8px; }
|
||||
.group-title span { background: var(--line); color: var(--muted); border-radius: 20px; padding: 1px 7px; font-size: 10px; letter-spacing: 0; }
|
||||
.list { list-style: none; margin: 0; padding: 0; }
|
||||
.list li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 9px; cursor: pointer; }
|
||||
.list li { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 10px; cursor: pointer; }
|
||||
.list li:hover { background: var(--panel); }
|
||||
.list li.active { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
|
||||
.list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.12); }
|
||||
@@ -99,46 +92,54 @@ main { flex: 1; min-width: 0; }
|
||||
/* ── Editor ── */
|
||||
.editor { display: flex; height: 100%; }
|
||||
.editor-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.editor-head {
|
||||
display: flex; align-items: center; gap: 9px; padding: 11px 22px;
|
||||
border-bottom: 1px solid var(--line); background: var(--panel); flex: none;
|
||||
}
|
||||
.editor-head { display: flex; align-items: center; gap: 9px; padding: 11px 22px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
|
||||
.editor-head .crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.editor-head .spacer { flex: 1; }
|
||||
.editor-head .toggle { background: transparent; border-color: transparent; color: var(--muted); }
|
||||
.editor-head .toggle:hover { color: var(--text); border-color: var(--line); }
|
||||
.status { font-size: 11px; border-radius: 20px; padding: 3px 10px; font-weight: 600; }
|
||||
.status { font-size: 11px; border-radius: var(--pill); padding: 3px 11px; font-weight: 600; }
|
||||
.status.draft { color: var(--amber); background: rgba(184,144,47,.12); }
|
||||
.status.live { color: var(--ok); background: rgba(93,125,75,.14); }
|
||||
|
||||
.fields { flex: 1; padding: 22px 24px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
|
||||
/* Metadaten kompakt oben, Schreibfeld groß darunter */
|
||||
.fields { flex: 1; min-height: 0; padding: 18px 22px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
|
||||
.row { display: flex; gap: 12px; align-items: flex-end; }
|
||||
.path-row { display: flex; gap: 12px; align-items: flex-end; }
|
||||
.path-row:empty { display: none; }
|
||||
.meta { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
|
||||
label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); flex: 1; }
|
||||
label.sm { flex: 0 0 150px; } label.xs { flex: 0 0 110px; }
|
||||
label.check { flex-direction: row; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap; }
|
||||
.meta label { flex: 0 0 auto; }
|
||||
.meta label.sm { width: 160px; } .meta label.xs { width: 100px; } .meta label:not(.sm):not(.xs):not(.check) { flex: 1; min-width: 140px; }
|
||||
label.check { flex-direction: row; align-items: center; gap: 7px; white-space: nowrap; padding-bottom: 9px; }
|
||||
label.check input { width: auto; }
|
||||
label.big input { font-family: var(--serif); font-size: 23px; font-weight: 600; padding: 11px 13px; }
|
||||
|
||||
.colorpick { display: flex; align-items: center; gap: 8px; }
|
||||
.colorpick .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); flex: none; }
|
||||
.colorpick select { flex: 1; }
|
||||
|
||||
/* ── Markdown-Editor ── */
|
||||
.md { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
|
||||
.toolbar { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
|
||||
.tb { padding: 5px 9px; border: 1px solid transparent; background: transparent; border-radius: 6px; min-width: 30px; font-size: 13px; line-height: 1; }
|
||||
.tb:hover { background: var(--panel); border-color: var(--line); }
|
||||
.toolbar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
|
||||
.md textarea { border: none; border-radius: 0; min-height: 320px; flex: 1; resize: vertical; font-family: var(--serif); font-size: 16px; line-height: 1.7; padding: 16px; }
|
||||
.md textarea:focus { box-shadow: none; }
|
||||
/* WYSIWYG-Editor füllt den meisten Platz */
|
||||
.rich { flex: 1; min-height: 460px; display: flex; flex-direction: column; }
|
||||
.rich-host { flex: 1; min-height: 0; }
|
||||
.rich .toastui-editor-defaultUI { height: 100%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); font-family: var(--sans); }
|
||||
.toastui-editor-contents { font-family: var(--serif); font-size: 16px; }
|
||||
.toastui-editor-defaultUI-toolbar { background: var(--panel-2); }
|
||||
.toastui-editor-toolbar { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
|
||||
|
||||
/* ── Vorschau-Pane ── */
|
||||
.preview { width: 46%; flex: none; border-left: 1px solid var(--line); background: #fff; }
|
||||
/* ── Ziehbarer Trenner + Vorschau ── */
|
||||
.splitter { width: 7px; flex: none; cursor: col-resize; background: var(--line); }
|
||||
.splitter:hover { background: var(--accent-soft); }
|
||||
.preview { flex: none; background: #fff; }
|
||||
.preview iframe { width: 100%; height: 100%; border: 0; }
|
||||
|
||||
/* ── Profil ── */
|
||||
.profile { width: 100%; overflow: auto; display: flex; justify-content: center; padding: 44px 20px; }
|
||||
.profile-card { width: 100%; max-width: 560px; height: max-content; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
|
||||
.profile-card h2 { font-family: var(--serif); margin: 0 0 4px; font-weight: 600; }
|
||||
.avatar-row { display: flex; align-items: center; gap: 18px; }
|
||||
.avatar { width: 92px; height: 92px; border-radius: 50%; background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; font-size: 34px; flex: none; }
|
||||
.who-mail { font-size: 12px; margin: 9px 0 0; }
|
||||
.profile-card textarea { font-family: var(--serif); font-size: 15px; line-height: 1.6; resize: vertical; }
|
||||
.profile-card .actions { display: flex; }
|
||||
|
||||
/* ── Toast ── */
|
||||
.toast { position: fixed; bottom: 20px; right: 20px; padding: 11px 18px; border-radius: 9px; color: #fff; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); font-size: 13.5px; max-width: 380px; }
|
||||
.toast { position: fixed; bottom: 20px; right: 20px; padding: 11px 18px; border-radius: 11px; color: #fff; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0,0,0,.4); font-size: 13.5px; max-width: 380px; z-index: 50; }
|
||||
.toast.ok { background: var(--ok); }
|
||||
.toast.err { background: var(--accent); }
|
||||
|
||||
Reference in New Issue
Block a user