Tracker ordering fix + March–April fixture entries #1
@@ -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; }
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user