accessibility

This commit is contained in:
Christopher Teutsch 2023-10-01 18:46:55 +02:00
parent 85550596e1
commit 4e861ed5de
3 changed files with 59 additions and 48 deletions

File diff suppressed because one or more lines are too long

View File

@ -104,7 +104,7 @@ function dateTimeFromEvent(ICal $ical, object $event): DateTimeImmutable
function prepareEvents(ICal $ical, array $events): array function prepareEvents(ICal $ical, array $events): array
{ {
$returns = []; $returns = [];
foreach ($events as $event) { foreach ($events as $index => $event) {
$start = dateTimeFromEvent($ical, $event); $start = dateTimeFromEvent($ical, $event);
$end = $start->add(new DateInterval($event->duration)); $end = $start->add(new DateInterval($event->duration));
$url = strval($event->url); $url = strval($event->url);

View File

@ -4,42 +4,51 @@
<head> <head>
<title>Was geht im Dorf.jetzt?</title> <title>Was geht im Dorf.jetzt?</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="preload" as="style" href="assets/css/filter.svg" /> <link rel="preload" as="style" href="assets/css/filter.svg" />
<link href="assets/font/Material-Icons.css" rel="stylesheet">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header>
<h1 class="text-center">Was geht im Dorf.jetzt?</h1> <h1 class="text-center">Was geht im Dorf.jetzt?</h1>
</header>
<div class="card mb-3 text-center"> <div class="card mb-3 text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Türstatus</h5> <h2 class="card-title">Türstatus</h2>
<img src="assets/svg/ic_{{ state_svg }}_48px.svg" style="filter:url(assets/css/filter.svg#{{ state_color }});height:16rem;width:auto;" /> <figure>
<img src="assets/svg/ic_{{ state_svg }}_48px.svg"
style="filter:url(assets/css/filter.svg#{{ state_color }});height:16rem;width:auto;" alt="" />
<figcaption>
<p class="card-text">{{ state_string | raw }}</p> <p class="card-text">{{ state_string | raw }}</p>
</figcaption>
</figure>
<div class="btn-wrapper"> <div class="btn-wrapper">
<a href="https://wiki.chaosdorf.de/Raumstatus" class="btn btn-lg btn-block btn-primary">Was bedeutet das?</a> <a href="https://wiki.chaosdorf.de/Raumstatus" class="btn btn-lg btn-block btn-primary">Was bedeutet
das?</a>
</div> </div>
</div> </div>
</div> </div>
<div class="card mb-3 text-center"> <div class="card mb-3 text-center">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Events</h5> <h2 class="card-title">Events</h2>
{% if events|length > 0 %} {% if events|length > 0 %}
<h6 class="card-subtitle mb-2 text-muted">Nächste Veranstaltung</h6> <h3 class="card-subtitle mb-2 text-muted">Nächste Veranstaltung</h3>
<p class="card-text"> <p class="card-text">
<h5 class="font-weight-bold">{{ events[0].summary|e }}</h5> <h4 class="font-weight-bold">{{ events[0].summary|e }}</h4>
<span class="font-weight-normal">{{ events[0].start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{ events[0].end|end_datetime(events[0].start, 'Europe/Berlin') }}</span> <span class="font-weight-normal">{{ events[0].start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{
events[0].end|end_datetime(events[0].start, 'Europe/Berlin') }}</span>
<span class="font-weight-normal"><a href="{{ events[0].url }}">Details zur Veranstaltung</a></span> <span class="font-weight-normal"><a href="{{ events[0].url }}">Details zur Veranstaltung</a></span>
</p> </p>
<h5 class="card-title">Danach:</h5> <h3 class="card-title">Danach:</h3>
<table class="table"> <table class="table">
<tbody> <tbody>
{% for event in events %} {% for event in events %}
{% if loop.index0 > 0 %} {% if loop.index0 > 0 %}
<tr> <tr>
<th scope="row"> {{ event.start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{ event.end|end_datetime(event.start, 'Europe/Berlin') }}</th> <th scope="row"> {{ event.start|date('d.m.Y H:i', 'Europe/Berlin') }} &ndash; {{
event.end|end_datetime(event.start, 'Europe/Berlin') }}</th>
<td>{{ event.summary|e }}</td> <td>{{ event.summary|e }}</td>
<td><a href="{{ event.url }}">Details</a></td> <td><a href="{{ event.url }}">Details</a></td>
</tr> </tr>
@ -47,9 +56,10 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<a href="https://wiki.chaosdorf.de/Chaosdorf_Wiki:Current_events" class="btn btn-lg btn-block btn-primary">Event-Kalender</a> <a href="https://wiki.chaosdorf.de/Chaosdorf_Wiki:Current_events"
class="btn btn-lg btn-block btn-primary">Event-Kalender</a>
{% else %} {% else %}
<h6 class="card-subtitle mb-2 text-muted">Aktuell keine Veranstaltungen.</h6> <h3 class="card-subtitle mb-2 text-muted">Aktuell keine Veranstaltungen.</h6>
<p class="card-text"> <p class="card-text">
<span class="font-weight-normal"> <span class="font-weight-normal">
Es stehen aktuell keine Veranstaltungen an. Es stehen aktuell keine Veranstaltungen an.
@ -70,7 +80,8 @@
Melde Fehler bitte an <a href="mailto:help@dorf.jetzt">help@dorf.jetzt</a> Melde Fehler bitte an <a href="mailto:help@dorf.jetzt">help@dorf.jetzt</a>
</div> </div>
<div> <div>
Dies ist kein offizieller Auftritt des <a href="https://chaosdorf.de">Chaos Computer Club Düsseldorf / Chaosdorf e.V.</a>. Dies ist kein offizieller Auftritt des <a href="https://chaosdorf.de">Chaos Computer Club Düsseldorf /
Chaosdorf e.V.</a>.
</div> </div>
</footer> </footer>
</body> </body>