Adjust viewport, description, dates

This commit is contained in:
Will Bradley
2025-07-16 13:46:36 -07:00
parent 2b8450951e
commit 7087dea5ab
4 changed files with 76 additions and 22 deletions

View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Dashboard - Water Station Tracker</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
@@ -15,6 +15,7 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f5f5f5;
overflow: hidden; /* Prevent scrolling on mobile */
}
.header {
@@ -68,6 +69,8 @@
.main-content {
height: calc(100vh - 80px);
position: relative;
overflow: hidden;
}
#map {
@@ -312,10 +315,7 @@
<textarea id="stationDescription" name="description" placeholder="e.g., Public fountain in park"></textarea>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" id="coordinates" readonly placeholder="Right-click or long-press map to select location">
</div>
<input type="hidden" id="coordinates">
<button type="submit" class="btn btn-primary">Add Station</button>
</form>
@@ -339,10 +339,7 @@
<textarea id="editStationDescription" name="description" placeholder="e.g., Public fountain in park"></textarea>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" id="editCoordinates" readonly>
</div>
<input type="hidden" id="editCoordinates">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-secondary" onclick="closeEditModal()">Cancel</button>
@@ -607,7 +604,8 @@
return `
<div style="min-width: 200px;">
<h3>${station.name}</h3>
<p><strong>Description:</strong> ${station.latest_description || 'No description'}</p>
<p style="color: #666; font-size: 0.9rem; margin-bottom: 10px;">${station.description || 'No description'}</p>
<p><strong>Status:</strong> ${station.latest_description || 'No status update'}</p>
<p><strong>Last Refill:</strong> ${refillTime}</p>
<p><strong>Estimated Empty:</strong> ${estimatedEmpty}</p>
<p><strong>Last Updated By:</strong> ${station.updated_by_name || 'Unknown'}</p>
@@ -710,7 +708,11 @@
bounds.extend([station.latitude, station.longitude]);
});
map.fitBounds(bounds, { padding: [20, 20] });
// Add more padding and max zoom to ensure all stations are visible
map.fitBounds(bounds, {
padding: [50, 50],
maxZoom: 15 // Zoom out one more level by default
});
}
function centerMap() {