sfdsf
This commit is contained in:
@@ -1,20 +1,20 @@
|
||||
.bc-app {
|
||||
--bc-accent: #5eead4;
|
||||
--bc-accent-strong: #79d7ff;
|
||||
--bc-ink: #09111f;
|
||||
--bc-text: rgba(236, 245, 255, 0.96);
|
||||
--bc-muted: rgba(203, 218, 234, 0.78);
|
||||
--bc-line: rgba(148, 163, 184, 0.22);
|
||||
--bc-panel: rgba(15, 23, 42, 0.68);
|
||||
--bc-panel-soft: rgba(15, 23, 42, 0.52);
|
||||
--bc-positive: #86efac;
|
||||
--bc-negative: #fca5a5;
|
||||
--bc-accent: var(--brand-accent);
|
||||
--bc-accent-strong: var(--brand-accent-2);
|
||||
--bc-ink: var(--text);
|
||||
--bc-text: var(--text);
|
||||
--bc-muted: var(--muted);
|
||||
--bc-line: var(--line);
|
||||
--bc-panel: rgba(255, 255, 255, 0.78);
|
||||
--bc-panel-soft: rgba(248, 252, 252, 0.92);
|
||||
--bc-positive: #137333;
|
||||
--bc-negative: #c62828;
|
||||
color: var(--bc-text);
|
||||
}
|
||||
|
||||
.bc-grid-bg {
|
||||
position: relative;
|
||||
padding: 8px 0 32px;
|
||||
padding: 0 0 8px;
|
||||
}
|
||||
|
||||
.bc-grid-bg::before {
|
||||
@@ -23,8 +23,8 @@
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%),
|
||||
radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 30%),
|
||||
radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent-2) 10%, transparent), transparent 28%),
|
||||
radial-gradient(circle at bottom left, color-mix(in srgb, var(--brand-accent-3) 10%, transparent), transparent 30%),
|
||||
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
border: 1px solid var(--bc-line);
|
||||
border-radius: 22px;
|
||||
background: var(--bc-panel);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
|
||||
box-shadow: 0 10px 24px rgba(1, 22, 32, 0.06);
|
||||
}
|
||||
|
||||
.bc-form-card,
|
||||
@@ -154,25 +154,25 @@
|
||||
}
|
||||
|
||||
.bc-button--tab {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: var(--bc-ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bc-button--tab-active {
|
||||
background: linear-gradient(135deg, var(--bc-accent-strong), var(--bc-accent));
|
||||
color: var(--bc-ink);
|
||||
background: linear-gradient(135deg, var(--bc-accent), var(--brand-accent-3));
|
||||
color: #fff7fb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bc-button--primary {
|
||||
background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-strong));
|
||||
color: var(--bc-ink);
|
||||
background: linear-gradient(135deg, var(--bc-accent), var(--brand-accent-3));
|
||||
color: #fff7fb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bc-button--secondary {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
color: var(--bc-ink);
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -180,7 +180,7 @@
|
||||
.bc-button--ghost {
|
||||
background: color-mix(in srgb, var(--bc-accent) 14%, transparent);
|
||||
border-color: color-mix(in srgb, var(--bc-accent) 34%, transparent);
|
||||
color: var(--bc-accent-strong);
|
||||
color: var(--bc-accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -251,7 +251,7 @@
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.22));
|
||||
filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--bc-accent) 18%, transparent));
|
||||
}
|
||||
|
||||
.bc-chart-area {
|
||||
@@ -259,7 +259,7 @@
|
||||
}
|
||||
|
||||
.bc-chart-grid line {
|
||||
stroke: rgba(255,255,255,0.08);
|
||||
stroke: rgba(16, 33, 43, 0.08);
|
||||
stroke-dasharray: 4 6;
|
||||
}
|
||||
|
||||
@@ -271,7 +271,7 @@
|
||||
|
||||
.bc-range-button {
|
||||
border: 1px solid color-mix(in srgb, var(--bc-accent) 26%, transparent);
|
||||
background: color-mix(in srgb, var(--bc-accent) 8%, transparent);
|
||||
background: rgba(255, 255, 255, 0.76);
|
||||
color: var(--bc-text);
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
@@ -326,8 +326,8 @@
|
||||
width: fit-content;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--bc-muted);
|
||||
background: color-mix(in srgb, var(--bc-accent) 10%, transparent);
|
||||
color: var(--bc-text);
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
@@ -366,13 +366,13 @@
|
||||
border: 1px solid var(--bc-line);
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(2, 6, 23, 0.42);
|
||||
background: var(--surface-strong);
|
||||
color: var(--bc-text);
|
||||
}
|
||||
|
||||
.bc-app input::placeholder,
|
||||
.bc-app textarea::placeholder {
|
||||
color: rgba(203, 218, 234, 0.48);
|
||||
color: color-mix(in srgb, var(--bc-muted) 70%, transparent);
|
||||
}
|
||||
|
||||
.bc-app a {
|
||||
|
||||
@@ -2,11 +2,6 @@
|
||||
<?= module_shell_header('boersenchecker', [
|
||||
'title' => 'Depotverwaltung',
|
||||
'description' => 'Depots, Positionen und Kurs-Historien verwalten.',
|
||||
'tabs' => [
|
||||
['label' => 'Ueberblick', 'href' => '/module/boersenchecker'],
|
||||
['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung', 'active' => true],
|
||||
['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung'],
|
||||
],
|
||||
]) ?>
|
||||
<div class="bc-app">
|
||||
<div class="bc-grid-bg">
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<?= module_shell_header('boersenchecker', [
|
||||
'title' => 'Depot-Ueberblick',
|
||||
'description' => 'Depots, Aktien und Kursverlaeufe in einer Oberflaeche.',
|
||||
'tabs' => [
|
||||
['label' => 'Ueberblick', 'href' => '/module/boersenchecker', 'active' => true],
|
||||
['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung'],
|
||||
['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung'],
|
||||
],
|
||||
]) ?>
|
||||
<div class="bc-app">
|
||||
<div class="bc-grid-bg">
|
||||
@@ -25,7 +20,14 @@
|
||||
<div class="bc-alert bc-alert--success"><?= e($notice) ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="bc-toolbar">
|
||||
<section class="module-box">
|
||||
<div class="module-box-head">
|
||||
<div>
|
||||
<h2 class="module-box-title">Marktueberblick</h2>
|
||||
<p>Depotauswahl, Aktienfokus und aktueller Kursabruf in einem Bereich.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-toolbar" style="margin-top:16px;">
|
||||
<form class="bc-panel" method="get">
|
||||
<div class="bc-field-label">Depotauswahl</div>
|
||||
<?php if ($portfolios === []): ?>
|
||||
@@ -52,7 +54,7 @@
|
||||
<?php else: ?>
|
||||
<label class="setup-field" style="margin-top:12px;">
|
||||
<span class="bc-text">Aktie</span>
|
||||
<select name="instrument_id" data-bc-instrument>
|
||||
<select name="instrument_id" data-bc-instrument onchange="this.form.submit()">
|
||||
<?php foreach ($positions as $position): ?>
|
||||
<option value="<?= e((string) $position['instrument_id']) ?>" <?= (string) $selectedInstrumentId === (string) $position['instrument_id'] ? 'selected' : '' ?>>
|
||||
<?= e((string) $position['instrument_name']) ?><?= !empty($position['symbol']) ? ' (' . e((string) $position['symbol']) . ')' : '' ?>
|
||||
@@ -73,32 +75,33 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bc-overview-grid">
|
||||
<div class="bc-stat">
|
||||
<div class="module-box-grid module-box-grid--stats">
|
||||
<section class="module-box-soft bc-stat">
|
||||
<div class="bc-field-label">Positionen</div>
|
||||
<div class="bc-stat-value"><?= e((string) ($summary['positions'] ?? 0)) ?></div>
|
||||
<div class="bc-text" style="margin-top:6px;">Aktien im aktuell gewaehlten Depot</div>
|
||||
</div>
|
||||
<div class="bc-stat">
|
||||
</section>
|
||||
<section class="module-box-soft bc-stat">
|
||||
<div class="bc-field-label">Investiert</div>
|
||||
<div class="bc-stat-value"><?= isset($summary['invested']) && $summary['invested'] !== null ? e(number_format((float) $summary['invested'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
|
||||
<div class="bc-text" style="margin-top:6px;">In Berichtswahrung bewertet</div>
|
||||
</div>
|
||||
<div class="bc-stat">
|
||||
</section>
|
||||
<section class="module-box-soft bc-stat">
|
||||
<div class="bc-field-label">Aktueller Wert</div>
|
||||
<div class="bc-stat-value"><?= isset($summary['current']) && $summary['current'] !== null ? e(number_format((float) $summary['current'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
|
||||
<div class="bc-text" style="margin-top:6px;">Basierend auf dem letzten gespeicherten Kurs</div>
|
||||
</div>
|
||||
<div class="bc-stat">
|
||||
</section>
|
||||
<section class="module-box-soft bc-stat">
|
||||
<div class="bc-field-label">Performance</div>
|
||||
<div class="bc-stat-value"><?= isset($summary['gain']) && $summary['gain'] !== null ? e(number_format((float) $summary['gain'], 2, ',', '.')) . ' ' . e($defaultReportCurrency) : 'n/a' ?></div>
|
||||
<div class="bc-text" style="margin-top:6px;"><?= !empty($summary['best']['instrument_name']) ? 'Top-Wert: ' . e((string) $summary['best']['instrument_name']) : 'Noch keine Vergleichsdaten' ?></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="bc-card-grid">
|
||||
<div class="bc-panel">
|
||||
<div class="module-box-grid module-box-grid--panels">
|
||||
<section class="module-box-soft">
|
||||
<div class="bc-field-label">Bester Wert</div>
|
||||
<?php if (!empty($summary['best'])): ?>
|
||||
<div class="bc-stat-value"><?= e((string) $summary['best']['instrument_name']) ?></div>
|
||||
@@ -106,9 +109,9 @@
|
||||
<?php else: ?>
|
||||
<div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bc-panel">
|
||||
<section class="module-box-soft">
|
||||
<div class="bc-field-label">Schwaechster Wert</div>
|
||||
<?php if (!empty($summary['worst'])): ?>
|
||||
<div class="bc-stat-value"><?= e((string) $summary['worst']['instrument_name']) ?></div>
|
||||
@@ -116,21 +119,28 @@
|
||||
<?php else: ?>
|
||||
<div class="bc-text" style="margin-top:12px;">Noch keine Performance verfuegbar.</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<?php foreach (array_slice($positions, 0, 2) as $position): ?>
|
||||
<div class="bc-stat">
|
||||
<section class="module-box-soft bc-stat">
|
||||
<div class="bc-field-label"><?= e((string) $position['instrument_name']) ?></div>
|
||||
<div class="bc-stat-value"><?= $position['latest_price'] !== null ? e(number_format((float) $position['latest_price'], 2, ',', '.')) . ' ' . e((string) $position['latest_currency']) : 'n/a' ?></div>
|
||||
<div class="bc-text" style="margin-top:6px;"><?= e((string) ($position['latest_quoted_at'] ?: 'kein Kurs')) ?></div>
|
||||
</div>
|
||||
</section>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<section class="bc-chart-card">
|
||||
<section class="module-box">
|
||||
<div class="module-box-head">
|
||||
<div>
|
||||
<h2 class="module-box-title">Kursverlauf</h2>
|
||||
<p>Schlusskurse ueber mehrere Zeitfenster fuer das aktuell gewaehlte Instrument.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-chart-card" style="margin-top:16px;">
|
||||
<div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
|
||||
<div>
|
||||
<div class="bc-field-label">Kursverlauf</div>
|
||||
<div class="bc-field-label">Aktie</div>
|
||||
<div class="bc-stat-value" data-bc-instrument-name><?= e((string) ($selectedInstrument['instrument_name'] ?? 'Keine Aktie ausgewaehlt')) ?></div>
|
||||
<?php if ($selectedInstrument): ?>
|
||||
<div class="bc-text" data-bc-instrument-meta><?= e((string) ($selectedInstrument['symbol'] ?? '')) ?> · <?= e((string) ($selectedInstrument['isin'] ?? '-')) ?></div>
|
||||
@@ -149,14 +159,21 @@
|
||||
<div class="bc-text" data-bc-chart-status style="margin-top:12px;">Chartdaten werden geladen...</div>
|
||||
<div class="bc-stat-value" data-bc-chart-summary style="margin-top:6px;">-</div>
|
||||
<div class="bc-chart-shell" data-bc-chart style="margin-top:18px;"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bc-panel">
|
||||
<div class="bc-field-label">Aktien im Depot</div>
|
||||
<section class="module-box-table">
|
||||
<div class="module-box-head">
|
||||
<div>
|
||||
<h2 class="module-box-title">Aktien im Depot</h2>
|
||||
<p>Stueckzahl, Kaufdaten, letzter Kurs und Performance auf einen Blick.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="module-box-copy">
|
||||
<?php if ($positions === []): ?>
|
||||
<div class="bc-text" style="margin-top:12px;">Keine Aktien im ausgewaehlten Depot.</div>
|
||||
<div class="bc-text" style="padding:0 0 18px;">Keine Aktien im ausgewaehlten Depot.</div>
|
||||
<?php else: ?>
|
||||
<div class="bc-position-list" style="margin-top:16px;">
|
||||
<div class="bc-position-list" style="padding:0 0 18px;">
|
||||
<?php foreach ($positions as $position): ?>
|
||||
<?php $gainClass = (($position['gain_report'] ?? 0) >= 0) ? 'is-positive' : 'is-negative'; ?>
|
||||
<div class="bc-position-row">
|
||||
@@ -189,6 +206,7 @@
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<?= module_shell_header('boersenchecker', [
|
||||
'title' => 'Aktienverwaltung',
|
||||
'description' => 'Stammdaten der Aktien pflegen, Symbole suchen und manuelle Kurse verwalten.',
|
||||
'tabs' => [
|
||||
['label' => 'Ueberblick', 'href' => '/module/boersenchecker'],
|
||||
['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung'],
|
||||
['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung', 'active' => true],
|
||||
],
|
||||
]) ?>
|
||||
<div class="bc-app">
|
||||
<div class="bc-grid-bg">
|
||||
|
||||
@@ -9,12 +9,6 @@ $hasConfig = !empty($instances);
|
||||
<?= module_shell_header('pihole', [
|
||||
'title' => 'Pi-hole Dashboard',
|
||||
'description' => 'Status, Blockings, Usage und Steuerung fuer beide Instanzen.',
|
||||
'tabs' => [
|
||||
['label' => 'Dashboard', 'href' => '/module/pihole', 'active' => true],
|
||||
['label' => 'Instanzen', 'href' => '/module/pihole/instances'],
|
||||
['label' => 'Listen', 'href' => '/module/pihole/lists'],
|
||||
['label' => 'Queries', 'href' => '/module/pihole/queries'],
|
||||
],
|
||||
]) ?>
|
||||
<div class="card pihole-page" data-pihole-page="dashboard">
|
||||
|
||||
|
||||
@@ -135,12 +135,6 @@ if ($primaryId === '') {
|
||||
<?= module_shell_header('pihole', [
|
||||
'title' => 'Pi-hole Instanzen',
|
||||
'description' => 'Pi-hole Instanzen hinzufuegen, bearbeiten und loeschen.',
|
||||
'tabs' => [
|
||||
['label' => 'Dashboard', 'href' => '/module/pihole'],
|
||||
['label' => 'Instanzen', 'href' => '/module/pihole/instances', 'active' => true],
|
||||
['label' => 'Listen', 'href' => '/module/pihole/lists'],
|
||||
['label' => 'Queries', 'href' => '/module/pihole/queries'],
|
||||
],
|
||||
]) ?>
|
||||
<div class="card">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;">
|
||||
|
||||
@@ -6,11 +6,11 @@ $assets->addScript('/module/pihole/asset?file=pihole.js', 'footer', true);
|
||||
$instances = module_fn('pihole', 'instances');
|
||||
$hasConfig = !empty($instances);
|
||||
?>
|
||||
<?= module_shell_header('pihole', [
|
||||
'title' => 'Listen & Domains',
|
||||
'description' => 'Top-Domains, Listen-Updates und neue Eintraege auf der Primaer-Instanz.',
|
||||
]) ?>
|
||||
<div class="card pihole-page" data-pihole-page="lists">
|
||||
<div class="pill">Pi-hole</div>
|
||||
<h1 style="margin-top:.75rem;">Listen & Domains</h1>
|
||||
<p class="muted">Top-Domains, Listen-Updates und neue Eintraege (Primaer-Instanz).</p>
|
||||
|
||||
<?php if (!$hasConfig): ?>
|
||||
<div class="card" style="margin-top:1rem; border-color:var(--accent);">
|
||||
<strong>Keine Instanzen konfiguriert</strong>
|
||||
@@ -84,3 +84,4 @@ $hasConfig = !empty($instances);
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?= module_shell_footer() ?>
|
||||
|
||||
@@ -6,11 +6,11 @@ $assets->addScript('/module/pihole/asset?file=pihole.js', 'footer', true);
|
||||
$instances = module_fn('pihole', 'instances');
|
||||
$hasConfig = !empty($instances);
|
||||
?>
|
||||
<?= module_shell_header('pihole', [
|
||||
'title' => 'Zugriffe & Blockings',
|
||||
'description' => 'Aktuelle Blockings, Top Clients und Status pro Instanz.',
|
||||
]) ?>
|
||||
<div class="card pihole-page" data-pihole-page="queries">
|
||||
<div class="pill">Pi-hole</div>
|
||||
<h1 style="margin-top:.75rem;">Zugriffe & Blockings</h1>
|
||||
<p class="muted">Aktuelle Blockings, Top Clients und Status pro Instanz.</p>
|
||||
|
||||
<?php if (!$hasConfig): ?>
|
||||
<div class="card" style="margin-top:1rem; border-color:var(--accent);">
|
||||
<strong>Keine Instanzen konfiguriert</strong>
|
||||
@@ -36,3 +36,4 @@ $hasConfig = !empty($instances);
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?= module_shell_footer() ?>
|
||||
|
||||
@@ -920,15 +920,15 @@ a {
|
||||
.module-page-stack {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.module-hero {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 28px;
|
||||
gap: 14px;
|
||||
padding: 20px 22px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 252, 251, 0.88)),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 14%, transparent), color-mix(in srgb, var(--brand-accent-2) 14%, transparent));
|
||||
@@ -942,37 +942,45 @@ a {
|
||||
}
|
||||
|
||||
.module-hero-top {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr);
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.module-hero-copy,
|
||||
.module-hero-actions {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.module-hero-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.module-hero-copy--compact {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.75rem, 4vw, 2.9rem);
|
||||
line-height: 1;
|
||||
font-size: clamp(1.45rem, 3vw, 2.2rem);
|
||||
line-height: 1.04;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.module-lead {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.module-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.module-button {
|
||||
@@ -981,7 +989,8 @@ a {
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px;
|
||||
min-height: 40px;
|
||||
padding: 9px 15px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: 160ms ease;
|
||||
@@ -1014,6 +1023,19 @@ a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.module-button--small {
|
||||
min-height: 34px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 14px;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.module-hero-actions {
|
||||
justify-items: start;
|
||||
align-content: start;
|
||||
width: min(240px, 100%);
|
||||
}
|
||||
|
||||
.module-box,
|
||||
.module-box-soft,
|
||||
.module-box-table,
|
||||
@@ -1083,6 +1105,10 @@ a {
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.module-hero-top {
|
||||
grid-template-columns: 1fr;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.module-hero-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -280,8 +280,8 @@ function module_shell_header(string $module, array $options = []): string
|
||||
{
|
||||
$design = module_design($module);
|
||||
$requestPath = app()->request()->path();
|
||||
$title = trim((string) ($options['title'] ?? $design['title'] ?? ucfirst($module)));
|
||||
$description = trim((string) ($options['description'] ?? $design['description'] ?? ''));
|
||||
$title = trim((string) ($options['title'] ?? ''));
|
||||
$description = trim((string) ($options['description'] ?? ''));
|
||||
$eyebrow = trim((string) ($options['eyebrow'] ?? $design['eyebrow'] ?? 'Modul'));
|
||||
$actions = is_array($options['actions'] ?? null) ? $options['actions'] : (is_array($design['actions'] ?? null) ? $design['actions'] : []);
|
||||
$tabs = is_array($options['tabs'] ?? null) ? $options['tabs'] : (is_array($design['tabs'] ?? null) ? $design['tabs'] : []);
|
||||
@@ -289,13 +289,21 @@ function module_shell_header(string $module, array $options = []): string
|
||||
$html = '<div class="module-shell"><div class="module-page-bg"><div class="module-page-stack">';
|
||||
$html .= '<header class="module-hero">';
|
||||
$html .= '<div class="module-hero-top">';
|
||||
if ($title !== '' || $description !== '' || !empty($options['show_eyebrow'])) {
|
||||
$html .= '<div class="module-hero-copy">';
|
||||
if (!empty($options['show_eyebrow'])) {
|
||||
$html .= '<div class="eyebrow">' . e($eyebrow) . '</div>';
|
||||
}
|
||||
if ($title !== '') {
|
||||
$html .= '<h1 class="module-title">' . e($title) . '</h1>';
|
||||
}
|
||||
if ($description !== '') {
|
||||
$html .= '<p class="module-lead">' . e($description) . '</p>';
|
||||
}
|
||||
$html .= '</div>';
|
||||
} else {
|
||||
$html .= '<div class="module-hero-copy module-hero-copy--compact" aria-hidden="true"></div>';
|
||||
}
|
||||
|
||||
if ($actions !== []) {
|
||||
$html .= '<div class="module-hero-actions">';
|
||||
@@ -309,7 +317,11 @@ function module_shell_header(string $module, array $options = []): string
|
||||
continue;
|
||||
}
|
||||
$variant = trim((string) ($action['variant'] ?? 'secondary'));
|
||||
$size = trim((string) ($action['size'] ?? 'sm'));
|
||||
$class = $variant === 'ghost' ? 'module-button module-button--ghost' : 'module-button module-button--secondary';
|
||||
if ($size === 'sm') {
|
||||
$class .= ' module-button--small';
|
||||
}
|
||||
$html .= '<a class="' . e($class) . '" href="' . e($href) . '">' . e($label) . '</a>';
|
||||
}
|
||||
$html .= '</div>';
|
||||
|
||||
Reference in New Issue
Block a user