From c60f6726dfad1feb1041ac80e49470161919d2ee Mon Sep 17 00:00:00 2001
From: Mischa <mischa@gorinskat.nl>
Date: Thu, 18 Jun 2026 14:23:08 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20post=20form=20=E2=80=94=20hi?=
 =?UTF-8?q?de=20GPS=20fields=20via=20:has(),=20teal=20CTA,=20status=20feed?=
 =?UTF-8?q?back?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/intotheeast/css/style.css              | 118 ++++++++++++++----
 .../intotheeast/templates/post-form.html.twig |  30 +++--
 2 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css
index 04a57f7..501d79c 100644
--- a/themes/intotheeast/css/style.css
+++ b/themes/intotheeast/css/style.css
@@ -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; }
diff --git a/themes/intotheeast/templates/post-form.html.twig b/themes/intotheeast/templates/post-form.html.twig
index 5f5df6c..0dc561f 100644
--- a/themes/intotheeast/templates/post-form.html.twig
+++ b/themes/intotheeast/templates/post-form.html.twig
@@ -2,15 +2,15 @@
 
 {% block content %}
 <div class="post-form-wrap">
-    <h1>{{ page.title }}</h1>
+    <h1>New Entry</h1>
     {% include 'forms/form.html.twig' ignore missing %}
 
-    <div class="form-actions-extra">
-        <button type="button" id="get-location" class="btn-extra">📍 Get Current Location</button>
-        <button type="button" id="get-weather" class="btn-extra">🌤 Get Weather</button>
+    <div class="form-action-row">
+        <button type="button" id="get-location" class="btn-action">📍 Get Location</button>
+        <button type="button" id="get-weather" class="btn-action">🌤 Get Weather</button>
     </div>
-    <p id="location-status" class="field-status"></p>
-    <p id="weather-status" class="field-status"></p>
+    <p id="location-status" class="form-status"></p>
+    <p id="weather-status" class="form-status"></p>
 </div>
 
 <script>
@@ -29,9 +29,10 @@ function getField(name) {
 
 document.getElementById('get-location').addEventListener('click', function() {
     var status = document.getElementById('location-status');
+    status.className = 'form-status';
     status.textContent = 'Getting location…';
     if (!navigator.geolocation) {
-        status.textContent = 'Geolocation not supported by your browser.';
+        status.textContent = 'Geolocation not supported.';
         return;
     }
     navigator.geolocation.getCurrentPosition(function(pos) {
@@ -41,20 +42,23 @@ document.getElementById('get-location').addEventListener('click', function() {
         var lngField = getField('lng');
         if (latField) latField.value = lat;
         if (lngField) lngField.value = lng;
-        status.textContent = '📍 Location set: ' + lat + ', ' + lng;
+        status.textContent = '✓ Location captured · ' + lat + ', ' + lng;
+        status.classList.add('form-status--ok');
     }, function(err) {
-        status.textContent = 'Could not get location: ' + err.message;
+        status.textContent = '✗ Could not get location: ' + err.message;
+        status.classList.add('form-status--err');
     });
 });
 
 document.getElementById('get-weather').addEventListener('click', function() {
     var status = document.getElementById('weather-status');
+    status.className = 'form-status';
     var latField = getField('lat');
     var lngField = getField('lng');
     var lat = latField ? latField.value.trim() : '';
     var lng = lngField ? lngField.value.trim() : '';
     if (!lat || !lng) {
-        status.textContent = 'Enter or get coordinates first.';
+        status.textContent = 'Get location first, then fetch weather.';
         return;
     }
     status.textContent = 'Fetching weather…';
@@ -71,10 +75,12 @@ document.getElementById('get-weather').addEventListener('click', function() {
             var descField = getField('weather_desc');
             if (tempField) tempField.value = temp;
             if (descField) descField.value = desc;
-            status.textContent = '🌤 Weather set: ' + desc + ' · ' + temp + '°C';
+            status.textContent = '✓ Weather set · ' + desc + ' · ' + temp + '°C';
+            status.classList.add('form-status--ok');
         })
         .catch(function() {
-            status.textContent = 'Could not fetch weather — enter manually if needed.';
+            status.textContent = '✗ Could not fetch weather — enter manually if needed.';
+            status.classList.add('form-status--err');
         });
 });
 </script>