fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tinted-Band generalisiert (.section--tinted) und Ansprechpartner-Sektion hervorgehoben

Browse Source 
Enthält auch User-Erweiterung: person-grid mit Abteilungs-Filter/Title/Intro-Props

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 22:41:57 +02:00
parent 5c4b45a5fe
commit 1ee08b932d
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/person-grid.php
View File

@@ -3,20 +3,40 @@
declare(strict_types=1);
/**
* Ansprechpartner-Grid aus data/ansprechpartner.json.
* Optionaler Prop: $anchor (Sektions-ID, Default 'ansprechpartner').
* Ansprechpartner-Grid aus data/ansprechpartner.json (Single Source of Truth).
* Alle Props optional:
* $departments array — nur diese Abteilungen zeigen (z. B. ['Herrenfußball','Damenfußball']).
* $title string — Überschrift überschreiben (Default aus JSON).
* $intro string — Intro-Text überschreiben (Default aus JSON; '' = ausblenden).
* $anchor string — Sektions-ID (Default 'ansprechpartner').
* $tinted bool — aufgehelltes Vollbreite-Band (Default true).
*/
$data = json_load('ansprechpartner');
$anchor = $anchor ?? 'ansprechpartner';
$tinted = $tinted ?? true;
$title = $title ?? $data['title'];
$intro = $intro ?? ($data['intro'] ?? '');
$persons = $data['persons'] ?? [];
if (!empty($departments)) {
$persons = array_values(array_filter(
$persons,
static fn (array $p): bool => in_array($p['department'] ?? '', $departments, true)
));
}
if ($persons === []) {
return;
}
?>
<section class="section persons" id="<?= e($anchor) ?>">
<section class="section persons<?= $tinted ? ' section--tinted' : '' ?>" id="<?= e($anchor) ?>">
<div class="container">
<h2><?= e($data['title']) ?></h2>
<?php if (!empty($data['intro'])): ?>
<p class="persons__intro"><?= e($data['intro']) ?></p>
<h2><?= e($title) ?></h2>
<?php if ($intro !== ''): ?>
<p class="persons__intro"><?= e($intro) ?></p>
<?php endif; ?>
<ul class="persons__grid">
<?php foreach ($data['persons'] as $person): ?>
<?php foreach ($persons as $person): ?>
<li>
<?php component('person-card', ['person' => $person]); ?>
</li>

2
app/components/section.php
View File

@@ -12,7 +12,7 @@ $level = $level ?? 2;
$flip = !empty($section['flip']);
$tinted = !empty($section['tinted']);
?>
<section class="section split<?= $flip ? ' split--flip' : '' ?><?= $tinted ? ' split--tinted' : '' ?>" id="<?= e($section['id']) ?>">
<section class="section split<?= $flip ? ' split--flip' : '' ?><?= $tinted ? ' section--tinted' : '' ?>" id="<?= e($section['id']) ?>">
<div class="container split__inner">
<div class="split__text">
<h<?= $level ?>><?= e($section['title']) ?></h<?= $level ?>>

13
public/assets/css/components.css
View File

@@ -14,8 +14,8 @@
/* Kompakte Variante: schlanker Unterseiten-Header statt vollflächig. */
.hero--compact {
min-height: min(48vh, 440px);
padding-block: calc(var(--header-h) + 56px) 3rem;
min-height: min(60vh, 560px);
padding-block: calc(var(--header-h) + 64px) 3.5rem;
}
.hero__media {
@@ -171,18 +171,19 @@
gap: 3rem;
}
/* Variante: sanft aufgehelltes, durchgehendes Band über die volle Breite (tinted: true im JSON).
/* Sanft aufgehelltes, durchgehendes Band über die volle Breite — generisch für
jede Sektion (Split via tinted: true im JSON, person-grid u.a. per Klasse).
Direkt aufeinanderfolgende tinted-Sektionen verschmelzen nahtlos. */
.split--tinted {
.section--tinted {
background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.035));
border-block: 1px solid rgb(255 255 255 / 0.1);
}
.split--tinted + .split--tinted {
.section--tinted + .section--tinted {
border-top: 0;
}
.split--tinted:has(+ .split--tinted) {
.section--tinted:has(+ .section--tinted) {
border-bottom: 0;
}