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

Mitmachen: Ehrenamtsseite mit Stellen-Filter

Browse Source 
Neue Seite /mitmachen, die offene Ehrenamtsstellen aus data/mitmachen.json als
position-card-Komponente listet, mit clientseitigem Bereichsfilter
(position-filter.js, progressive enhancement) und JobPosting-Schema
(job_posting_schema(), employmentType VOLUNTEER). Route ergänzt.
Enthält zudem kleine person-card__contact-Stilanpassungen (gleiche CSS-Sektion).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
Felix Schneider
2026-06-20 20:47:13 +02:00
parent 6a612e52c3
commit 2c0594811c
13 changed files with 653 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
app/components/position-card.php Normal file
View File

@@ -0,0 +1,64 @@
<?php
declare(strict_types=1);
/**
* Eine Ehrenamtsstelle als aufklappbare Karte (Seite /mitmachen). Props:
* $position array{id, group?, area?, icon?, title, summary?, description?, tasks?[], commitment?, requirements?[]}
* $contact array|null — aufgelöster Ansprechpartner (Shape wie person-card erwartet)
* Natives <details>/<summary> → ohne JS bedienbar (FAQ-Mechanik). Eingeklappt zeigt die
* Karte nur Bereich + Titel; Details und Ansprechpartner erscheinen beim Aufklappen.
* Das JobPosting-Schema liefert die Seite über $meta['schema'] (helpers: job_posting_schema).
* Heading-Outline: Titel h3 (in der summary), Ansprechpartner (person-card) h4.
*/
$contact = $contact ?? null;
?>
<details class="position-card" id="<?= e($position['id']) ?>" data-group="<?= e($position['group'] ?? '') ?>">
<summary class="position-card__head">
<?php if (!empty($position['icon'])): ?>
<span class="position-card__icon" aria-hidden="true"><?= icon($position['icon']) ?></span>
<?php endif; ?>
<span class="position-card__heading">
<?php if (!empty($position['area'])): ?>
<span class="position-card__area"><?= e($position['area']) ?></span>
<?php endif; ?>
<h3 class="position-card__title"><?= e($position['title']) ?></h3>
</span>
<?= icon('chevron-down', 'position-card__chevron') ?>
</summary>
<div class="position-card__body">
<div class="position-card__main">
<?php if (!empty($position['summary'])): ?>
<p class="position-card__summary"><?= e($position['summary']) ?></p>
<?php endif; ?>
<?php if (!empty($position['tasks'])): ?>
<ul class="position-card__tasks" role="list">
<?php foreach ($position['tasks'] as $task): ?>
<li><?= icon('check2', 'position-card__check') ?><span><?= e($task) ?></span></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php if (!empty($position['commitment']) || !empty($position['requirements'])): ?>
<dl class="position-card__meta">
<?php if (!empty($position['commitment'])): ?>
<div class="position-card__meta-row">
<dt><?= icon('clock-history', 'position-card__meta-icon') ?>Zeitaufwand</dt>
<dd><?= e($position['commitment']) ?></dd>
</div>
<?php endif; ?>
<?php if (!empty($position['requirements'])): ?>
<div class="position-card__meta-row">
<dt><?= icon('check2', 'position-card__meta-icon') ?>Das brauchst du</dt>
<dd><?= e(implode(' · ', $position['requirements'])) ?></dd>
</div>
<?php endif; ?>
</dl>
<?php endif; ?>
</div>
<?php if ($contact !== null): ?>
<div class="position-card__contact">
<?php component('person-card', ['person' => $contact, 'level' => 'h4']); ?>
</div>
<?php endif; ?>
</div>
</details>