jonas/Hoard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename hoard- to ui- and add UI components

Browse Source 
Mass rename of CSS classes, tokens and animations from the hoard- namespace to ui- (classes, variables like --ui-*, and keyframes). Introduces new UI components: EmptyState, StatusPill, and UserAvatar and updates admin views to import and use them. Updates many route/layout components and global.css to use the new ui- patterns and responsive variables. Also updates Impressum contact emails and adds .claude/settings.local.json to allow running npm scripts in the Claude local settings.
This commit is contained in:
Jonas
2026-04-28 21:52:22 +02:00
parent a512aaa0a7
commit 7e2ca4c9e2
19 changed files with 381 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
GUI/src/routes/Impressum.vue
+24 -24
View File
@@ -13,8 +13,8 @@ const registerDetails = [
const contactDetails = [
{ label: 'Telefon', value: '+49 30 1234567-0', href: 'tel:+493012345670' },
{ label: 'E-Mail', value: 'kontakt@hoard-demo.de', href: 'mailto:kontakt@hoard-demo.de' },
{ label: 'Support', value: 'support@hoard-demo.de', href: 'mailto:support@hoard-demo.de' },
{ label: 'E-Mail', value: 'kontakt@ui-demo.de', href: 'mailto:kontakt@ui-demo.de' },
{ label: 'Support', value: 'support@ui-demo.de', href: 'mailto:support@ui-demo.de' },
]
const legalNotes = [
@@ -42,10 +42,10 @@ const legalNotes = [
</script>
<template>
<v-container fluid class="impressum-page hoard-page">
<section class="impressum-hero hoard-panel hoard-panel-gradient hoard-spotlight">
<v-container fluid class="impressum-page ui-page">
<section class="impressum-hero ui-panel ui-panel-gradient ui-spotlight">
<div class="impressum-hero__copy">
<p class="hoard-kicker hoard-kicker--wide">Rechtliche Angaben</p>
<p class="ui-kicker ui-kicker--wide">Rechtliche Angaben</p>
<h1>Impressum</h1>
<p class="impressum-hero__lead">
Diese Seite ist im Hoard-Design aufgebaut und mit Testdaten gefüllt. Vor produktivem
@@ -53,16 +53,16 @@ const legalNotes = [
</p>
<div class="impressum-hero__meta">
<span class="hoard-chip hoard-chip--brand">
<span class="ui-chip ui-chip--brand">
<v-icon icon="mdi-information-outline" size="14" /> Testdaten
</span>
<span class="hoard-chip">
<span class="ui-chip">
<v-icon icon="mdi-calendar-month-outline" size="14" /> Stand: 26. April 2026
</span>
</div>
</div>
<div class="impressum-hero__actions hoard-action-row">
<div class="impressum-hero__actions ui-action-row">
<v-btn variant="elevated" prepend-icon="mdi-home-outline" to="/welcome">
Zur Startseite
</v-btn>
@@ -71,9 +71,9 @@ const legalNotes = [
</section>
<section class="details-grid">
<article class="detail-card hoard-panel">
<article class="detail-card ui-panel">
<header class="detail-card__head">
<span class="hoard-icon-tile"><v-icon icon="mdi-domain" size="20" /></span>
<span class="ui-icon-tile"><v-icon icon="mdi-domain" size="20" /></span>
<h2>Anbieterangaben</h2>
</header>
<dl class="detail-list">
@@ -84,9 +84,9 @@ const legalNotes = [
</dl>
</article>
<article class="detail-card hoard-panel">
<article class="detail-card ui-panel">
<header class="detail-card__head">
<span class="hoard-icon-tile"><v-icon icon="mdi-email-outline" size="20" /></span>
<span class="ui-icon-tile"><v-icon icon="mdi-email-outline" size="20" /></span>
<h2>Kontakt</h2>
</header>
<dl class="detail-list">
@@ -99,9 +99,9 @@ const legalNotes = [
</dl>
</article>
<article class="detail-card hoard-panel">
<article class="detail-card ui-panel">
<header class="detail-card__head">
<span class="hoard-icon-tile"><v-icon icon="mdi-clipboard-text-outline" size="20" /></span>
<span class="ui-icon-tile"><v-icon icon="mdi-clipboard-text-outline" size="20" /></span>
<h2>Register &amp; Steuer</h2>
</header>
<dl class="detail-list">
@@ -113,16 +113,16 @@ const legalNotes = [
</article>
</section>
<section class="notes-section hoard-panel">
<header class="hoard-section-head">
<p class="hoard-kicker">Rechtliche Hinweise</p>
<section class="notes-section ui-panel">
<header class="ui-section-head">
<p class="ui-kicker">Rechtliche Hinweise</p>
<h2>Wichtige Zusatzinformationen</h2>
<p>Standardklauseln, die im Produktivbetrieb durch eine juristische Prüfung ersetzt werden sollten.</p>
</header>
<div class="notes-grid">
<article v-for="note in legalNotes" :key="note.title" class="note-card">
<span class="hoard-icon-tile">
<span class="ui-icon-tile">
<v-icon :icon="note.icon" size="20" />
</span>
<div>
@@ -137,15 +137,15 @@ const legalNotes = [
<style scoped>
.impressum-page {
--hoard-page-width: 1180px;
--ui-page-width: 1180px;
}
/* ---------- Hero ---------- */
.impressum-hero {
--hoard-gradient-angle: 130deg;
--hoard-gradient-start: color-mix(in srgb, var(--color-primary-100) 60%, var(--color-surface) 40%);
--hoard-gradient-end: var(--color-surface);
--hoard-gradient-end-stop: 65%;
--ui-gradient-angle: 130deg;
--ui-gradient-start: color-mix(in srgb, var(--color-primary-100) 60%, var(--color-surface) 40%);
--ui-gradient-end: var(--color-surface);
--ui-gradient-end-stop: 65%;
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto;
@@ -296,7 +296,7 @@ dd {
.impressum-hero,
.detail-card,
.notes-section {
animation: hoard-soft-enter 280ms both;
animation: ui-soft-enter 280ms both;
}
.detail-card:nth-child(2) { animation-delay: 80ms; }