Make page responsive and improve event listing

This commit is contained in:
2025-10-07 21:08:41 +02:00
parent 1d29e954b8
commit 102e03b546
2 changed files with 11 additions and 15 deletions

View File

@@ -2,13 +2,12 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allmende Essen</title> <title>Allmende Essen</title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" <link href="/static/css/bootstrap.min.css" rel="stylesheet">
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB">
<link href="/static/icons/bootstrap-icons.min.css" rel="stylesheet"> <link href="/static/icons/bootstrap-icons.min.css" rel="stylesheet">
</head> </head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0"> <body class="p-3 m-0 border-0 bd-example">
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
@@ -38,7 +37,6 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
<script src="/static/js/bootstrap.bundle.min.js" <script src="/static/js/bootstrap.bundle.min.js"></script>
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"></script>
</body> </body>
</html> </html>

View File

@@ -8,22 +8,20 @@
</a> </a>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
{% for event in events %} {% for event in events %}
<div class="row">
<div class="col"> <div class="col">
<div class="card p-3 m-3"> <div class="card h-100 shadow-sm">
<div class="card-body"> <div class="card-body">
<div class="d-flex justify-content-between align-items-center"> <h5 class="card-title mb-1">{{ event.title }}</h5>
<h5 class="card-title">{{ event.title }}</h5> <p class="text-muted mb-3"><i class="bi bi-calendar"></i> {{ event.event_time.strftime('%A, %d.%m.%Y')
<h5 class="text-muted"><i class="bi bi-calendar"></i> {{ event.event_time.strftime('%A, %d.%m.%Y')
}} }}
</h5> </p>
</div>
<p class="card-text">{{ event.description }}</p> <p class="card-text">{{ event.description }}</p>
<a href="event/{{ event.id }}" class="btn {% if event.registration_deadline > now %}btn-primary{% else %}btn-secondary{% endif %}">{% if event.registration_deadline > now %}Zur Anmeldung{% else %}Details ansehen{% endif %}</a> <a href="event/{{ event.id }}" class="btn btn-sm {% if event.registration_deadline > now %}btn-primary{% else %}btn-secondary{% endif %}">{% if event.registration_deadline > now %}Zur Anmeldung{% else %}Details ansehen{% endif %}</a>
</div> </div>
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div>
{% endblock %} {% endblock %}