Updated the demo/mockup for the Artist Management / Timetable module

This commit is contained in:
2026-05-10 01:28:45 +02:00
parent 0d701bfed9
commit 62afbdedf8
4 changed files with 2 additions and 71 deletions

View File

@@ -188,8 +188,6 @@ function App() {
return (
<div className="cw-app">
<Sidebar />
<main className="cw-main">
<Header
dayCounts={stageCountByDay}
@@ -365,49 +363,6 @@ function App() {
);
}
// ─── Sidebar (matching Crewli look) ─────────────────────────────────
function Sidebar() {
const items = [
{ icon: "home", label: "Dashboard" },
{ icon: "cal", label: "Evenementen", active: true },
];
const orgItems = [
{ icon: "build", label: "Mijn Organisatie" },
{ icon: "users", label: "Leden" },
{ icon: "biz", label: "Bedrijven" },
{ icon: "alert", label: "Form failures" },
{ icon: "cog", label: "Instellingen" },
];
return (
<aside className="cw-side">
<div className="cw-side-brand">
<span className="cw-side-logo">c</span>
<span className="cw-side-brand-name">Crewli</span>
<span className="cw-side-brand-dot"></span>
</div>
<div className="cw-side-org">
<span className="cw-side-org-icon"></span>
<span className="cw-side-org-name">Stichting Feestfab</span>
</div>
<nav className="cw-side-nav">
{items.map(it => (
<a key={it.label} className={"cw-side-item" + (it.active ? " is-active" : "")}>
<Icon name={it.icon} /> {it.label}
</a>
))}
</nav>
<div className="cw-side-section">Stichting Feestfabriek</div>
<nav className="cw-side-nav">
{orgItems.map(it => (
<a key={it.label} className="cw-side-item">
<Icon name={it.icon} /> {it.label}
</a>
))}
</nav>
</aside>
);
}
// minimal inline icons
function Icon({ name }) {
const common = { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
@@ -437,30 +392,6 @@ function Header({ dayCounts, conflicts, activeDayId, onChangeDay, onOpenMatrix,
const D = window.CrewliData;
return (
<div className="cw-hdr">
<div className="cw-hdr-top">
<button className="cw-hdr-back"><Icon name="arrow" /></button>
<div>
<div className="cw-hdr-title">
{D.EVENT.name}
<span className="cw-hdr-pill">Festival</span>
</div>
<div className="cw-hdr-sub">10-07-2026 11-07-2026 · Timetable</div>
</div>
<div style={{ flex: 1 }}></div>
<button className="cw-btn"><Icon name="share" /> Delen</button>
<button className="cw-btn"><Icon name="chev" /> Registratie open</button>
</div>
<div className="cw-hdr-tabs">
<button className="cw-tab">Overzicht</button>
<button className="cw-tab">Programmaonderdelen</button>
<button className="cw-tab">Tijdsloten</button>
<button className="cw-tab">Secties &amp; Shifts</button>
<button className="cw-tab">Personen</button>
<button className="cw-tab">Artiesten</button>
<button className="cw-tab is-active">Timetable</button>
</div>
<div className="cw-hdr-bar">
<div className="cw-day-tabs" role="tablist">
{D.EVENT.days.map(d => (

View File

@@ -51,7 +51,7 @@ input, select, textarea { font-family: inherit; }
/* ─── App shell ─────────────────────────────────────────────────── */
.cw-app {
display: grid;
grid-template-columns: 232px 1fr;
grid-template-columns: 1fr;
height: 100vh;
overflow: hidden;
}
@@ -176,7 +176,6 @@ input, select, textarea { font-family: inherit; }
.cw-hdr-bar {
display: flex; align-items: center; gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--border);
}
/* ─── Day tabs ──────────────────────────────────────────────────── */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 499 KiB