layout vereinfacht

backend/internal/api/static/style.css

@@ -16,7 +16,7 @@
 h1 { font-size: 1.4rem; font-weight: normal; letter-spacing: .05em; }
 h2 { font-size: 1rem;   font-weight: normal; letter-spacing: .05em; }
 
-.err { color: #c00; }
+.err, .error { color: #c00; }
 .source-gps    { color: #060; }
 .source-manual { color: #888; }
 
@@ -28,9 +28,8 @@ h2 { font-size: 1rem;   font-weight: normal; letter-spacing: .05em; }
 .gps-row input  { flex: 1; margin-bottom: 0; }
 .gps-row button { white-space: nowrap; margin-bottom: 0; }
 
-/* Two-column form */
+/* Narrow pages (login, register) */
-.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+.narrow { max-width: 400px; margin-top: 4rem; }
-@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
 
 /* Image preview */
 .image-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
@@ -53,9 +52,6 @@ h2 { font-size: 1rem;   font-weight: normal; letter-spacing: .05em; }
 /* Login */
 .login-box { max-width: 360px; margin: 4rem auto; }
 
-/* Error message */
-.error { color: #c44; }
-
 /* Hashtags */
 .hashtags { margin-top: .3rem; }
 .tag { font-size: .75rem; background: var(--pico-muted-background-color); padding: .1rem .4rem; border-radius: 999px; margin-right: .2rem; }

backend/internal/api/templates/day.html

@@ -5,45 +5,27 @@
   <nav><a href="/days">← Alle Tage</a></nav>
   <h1>{{.Date}}</h1>
 
-  <h2>Neuer Eintrag</h2>
+  <form method="post" action="/entries" enctype="multipart/form-data">
-  <form method="post" action="/entries" enctype="multipart/form-data" class="entry-form">
     <input type="hidden" name="date" value="{{.Date}}">
-    <div class="form-row">
+    <div class="gps-row">
-      <div class="form-col">
+      <input type="time" name="time" required id="entry-time">
-        <label>Uhrzeit</label>
+      <select name="visibility">
-        <input type="time" name="time" required id="entry-time">
+        <option value="private">Privat</option>
-      </div>
+        <option value="public">Öffentlich</option>
-      <div class="form-col">
+      </select>
-        <label>Sichtbarkeit</label>
-        <select name="visibility">
-          <option value="private">Privat</option>
-          <option value="public">Öffentlich</option>
-        </select>
-      </div>
     </div>
-    <div class="form-row">
+    <input type="text" name="title" placeholder="Überschrift">
-      <div class="form-col">
+    <textarea name="description" rows="4" placeholder="Beschreibung"></textarea>
-        <label>GPS-Koordinaten <small>(optional)</small></label>
+    <div class="gps-row">
-        <div class="gps-row">
+      <input type="number" name="lat" id="entry-lat" step="any" placeholder="Breite">
-          <input type="number" name="lat" id="entry-lat" step="any" placeholder="Breite">
+      <input type="number" name="lon" id="entry-lon" step="any" placeholder="Länge">
-          <input type="number" name="lon" id="entry-lon" step="any" placeholder="Länge">
+      <button type="button" id="btn-gps">&#9678; GPS</button>
-          <button type="button" id="btn-gps" title="Aktuellen Standort ermitteln">&#9678; GPS</button>
-        </div>
-        <small id="gps-status"></small>
-      </div>
-      <div class="form-col">
-        <label>Hashtags <small>(kommagetrennt, optional)</small></label>
-        <input type="text" name="hashtags" placeholder="reise, essen, natur">
-      </div>
     </div>
-    <label>Überschrift</label>
+    <small id="gps-status"></small>
-    <input type="text" name="title" placeholder="Titel des Eintrags">
+    <input type="text" name="hashtags" placeholder="Hashtags (kommagetrennt)">
-    <label>Beschreibung</label>
-    <textarea name="description" rows="4" placeholder="Was ist passiert?"></textarea>
-    <label>Bilder <small>(optional, max. 10 MB pro Bild)</small></label>
     <input type="file" name="images" multiple accept="image/*" id="image-input">
     <div id="image-preview" class="image-preview"></div>
-    <button type="submit">Eintrag speichern</button>
+    <button type="submit">Speichern</button>
   </form>
 
   <h2>Einträge <small>({{len .Entries}})</small></h2>
@@ -73,7 +55,6 @@
 
   <h2>Aufenthalte <small>({{len .Stops}})</small></h2>
   {{if .Stops}}
-  <figure>
   <table>
     <thead><tr><th>Von</th><th>Bis</th><th>Dauer</th><th>Ort</th></tr></thead>
     <tbody>
@@ -87,14 +68,12 @@
     {{end}}
     </tbody>
   </table>
-  </figure>
   {{else}}
   <p><small>// Keine Aufenthalte</small></p>
   {{end}}
 
   <details>
     <summary><small>Trackpunkte ({{len .Points}})</small></summary>
-    <figure>
     <table>
       <thead><tr><th>Zeit</th><th>Lat</th><th>Lon</th><th>Quelle</th></tr></thead>
       <tbody>
@@ -110,7 +89,6 @@
       {{end}}
       </tbody>
     </table>
-    </figure>
   </details>
 </main>
 {{end}}

backend/internal/api/templates/days.html

@@ -9,15 +9,11 @@
       <a href="/logout">[ Ausloggen ]</a>
     </span>
   </div>
-  <form method="get" action="/days/redirect">
+  <form method="get" action="/days/redirect" class="gps-row">
-    <fieldset role="group">
+    <input type="date" name="date" id="nav-date" required>
-      <input type="date" name="date" id="nav-date" required>
+    <button type="submit">Tag öffnen</button>
-      <button type="submit">Tag öffnen</button>
-    </fieldset>
   </form>
 
-  <h2>Reisetage</h2>
-  <figure>
   <table>
     <thead><tr><th>Datum</th><th>Punkte</th><th>Von</th><th>Bis</th></tr></thead>
     <tbody>
@@ -33,7 +29,6 @@
     {{end}}
     </tbody>
   </table>
-  </figure>
 </main>
 {{end}}
 

backend/internal/api/templates/register.html

@@ -1,7 +1,7 @@
 {{define "title"}}Registrieren — Journal{{end}}
 
 {{define "content"}}
-<main class="container" style="max-width:400px;margin-top:4rem">
+<main class="container narrow">
   <h1>Konto erstellen</h1>
   {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
   <form method="post" action="/register">