m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mischa
2026-06-18 14:23:08 +02:00
parent c5d9c92968
commit c60f6726df
2 changed files with 115 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/templates/post-form.html.twig
+18 -12
View File
@@ -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>