feat: redesign post form — hide GPS fields via :has(), teal CTA, status feedback

2026-06-18 14:23:08 +02:00
parent c5d9c92968
commit c60f6726df
2 changed files with 115 additions and 33 deletions
@@ -479,33 +479,109 @@ body {
 .login-form .button.secondary { background: #f0f0f0; color: #333; text-decoration: none; line-height: 44px; padding: 0 1rem; }
 .login-form .rememberme { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

-/* ── Post form ──────────────────────────────────────────────────────────────── */
+/* ── Post form ───────────────────────────────────────────────────────────────── */

-.post-form-wrap h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }
-
-.form-actions-extra {
-    display: flex;
-    gap: 0.75rem;
-    margin-top: 1rem;
+.post-form-wrap h1 {
+    font-family: var(--font-display);
+    font-size: var(--text-xl);
+    font-weight: 400;
+    margin-bottom: var(--space-6);
+    color: var(--color-ink);
 }

-.btn-extra {
-    flex: 1;
-    padding: 0.75rem 0.5rem;
+/* Hide GPS coordinate fields — filled by JS, not user-facing */
+.post-form-wrap .form-field:has(input[name="data[lat]"]),
+.post-form-wrap .form-field:has(input[name="data[lng]"]) { display: none !important; }
+
+/* Grav form field inputs */
+.post-form-wrap .form-field { margin-bottom: var(--space-5); }
+.post-form-wrap .form-label label {
+    display: block;
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-ink);
+    margin-bottom: var(--space-2);
+}
+
+.post-form-wrap input[type="text"],
+.post-form-wrap input[type="datetime-local"],
+.post-form-wrap textarea {
+    width: 100%;
+    font-family: var(--font-ui);
+    font-size: var(--text-base);
+    padding: 0.875rem 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-canvas);
+    color: var(--color-ink);
    min-height: 44px;
-    background: #f0f0f0;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 0.95rem;
+    transition: border-color 0.15s;
+    -webkit-appearance: none;
+}
+
+.post-form-wrap input:focus,
+.post-form-wrap textarea:focus {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 1px;
+    border-color: var(--color-accent);
+}
+
+.post-form-wrap textarea { resize: vertical; min-height: 160px; line-height: var(--leading-normal); }
+
+/* Submit button */
+.post-form-wrap .form-actions input[type="submit"],
+.post-form-wrap .form-actions .btn,
+.post-form-wrap .form-actions button[type="submit"] {
+    display: block;
+    width: 100%;
+    padding: 1rem;
+    min-height: 52px;
+    background: var(--color-accent);
+    color: var(--color-accent-on);
+    border: none;
+    border-radius: var(--radius-md);
+    font-family: var(--font-ui);
+    font-size: var(--text-base);
+    font-weight: 600;
    cursor: pointer;
-    text-align: center;
+    transition: background 0.15s;
+    margin-top: var(--space-6);
 }

-.btn-extra:hover { background: #e5e5e5; }
+.post-form-wrap .form-actions input[type="submit"]:hover,
+.post-form-wrap .form-actions button[type="submit"]:hover { background: var(--color-accent-hover); }

-.field-status {
-    font-size: 0.85rem;
-    color: #555;
-    margin-top: 0.4rem;
-    min-height: 1.2em;
+/* Location / weather action buttons */
+.form-action-row {
+    display: flex;
+    gap: var(--space-3);
+    margin-top: var(--space-5);
 }
+
+.btn-action {
+    flex: 1;
+    padding: 0.75rem var(--space-3);
+    min-height: 44px;
+    background: var(--color-canvas);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    cursor: pointer;
+    color: var(--color-ink);
+    transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-action:hover { background: var(--color-paper); border-color: var(--color-accent); }
+
+/* Status feedback */
+.form-status {
+    font-size: var(--text-sm);
+    color: var(--color-ink-muted);
+    margin-top: var(--space-2);
+    min-height: 1.4em;
+}
+
+.form-status--ok  { color: var(--color-accent); }
+.form-status--err { color: #B44A2A; }