M1: CRUD-Slice 'Mahlzeit' Schritt 2 – UI (Controller, Templates, Routen, Feature-Tests)

templates/layout/base.html.twig

@@ -12,6 +12,7 @@
             --accent: #0a7bff;
             --muted: #667;
             --warn: #b45309;
+            --danger: #b91c1c;
         }
         * { box-sizing: border-box; }
         body {
@@ -44,17 +45,61 @@
             border-radius: 0.5rem;
             box-shadow: 0 1px 2px rgba(0,0,0,.06);
         }
+        .muted { color: var(--muted); font-size: 0.9rem; }
+        .row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
+        .btn {
+            display: inline-block;
+            background: var(--accent);
+            color: #fff;
+            padding: 0.4rem 0.8rem;
+            border-radius: 0.35rem;
+            text-decoration: none;
+            border: none;
+            font: inherit;
+            cursor: pointer;
+        }
+        .btn:hover { opacity: 0.92; }
+        .btn-danger { background: var(--danger); }
+        .btn-link { background: transparent; color: var(--muted); }
+        .actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
+        .list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
+        .item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem; border: 1px solid #eee; border-radius: 0.4rem; align-items: center; flex-wrap: wrap; }
+        .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
+        .tag { background: #eef4ff; color: var(--accent); padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; }
+        .status { font-size: 0.8rem; color: var(--muted); }
+        .status-gegessen { color: #15573b; }
+        .field { margin-bottom: 1rem; }
+        .field > label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
+        .field input[type="text"], .field textarea {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid #ccc;
+            border-radius: 0.35rem;
+            font: inherit;
+        }
+        .req { color: var(--danger); }
+        .checkboxes { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.3rem; }
+        .checkbox { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; cursor: pointer; }
+        .flash { padding: 0.6rem 0.9rem; border-radius: 0.4rem; margin-bottom: 1rem; }
+        .flash-notice { background: #e6f6ec; color: #15573b; }
+        .flash-error { background: #fdecec; color: #8a1f1f; }
     </style>
     {% block stylesheets %}{% endblock %}
 </head>
 <body>
     <header>
-        <strong>essen.ljh31.de</strong>
+        <a href="{{ path('home') }}" style="color: inherit; font-weight: 600;">essen.ljh31.de</a>
         <nav>
-            <a href="logout">Abmelden</a>
+            <a href="{{ path('mahlzeiten_index') }}">Mahlzeiten</a>
+            <a href="{{ path('logout') }}">Abmelden</a>
         </nav>
     </header>
     <main>
+        {% for label, messages in app.flashes %}
+            {% for message in messages %}
+                <div class="flash flash-{{ label }}">{{ message }}</div>
+            {% endfor %}
+        {% endfor %}
         {% block body %}{% endblock %}
     </main>
     <script src="{{ asset('js/htmx.min.js') }}"></script>