adam/potato-mesh
1
0
Fork 0
mirror of https://github.com/l5yth/potato-mesh.git synced 2026-08-07 09:22:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile layout (#68)

Browse Source 
* Improve mobile layout

* styling tweaks
This commit is contained in:
l5y
2025-09-15 21:32:56 +02:00
committed by GitHub
parent be1306c9c0
commit 0768b4d91a
1 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/views/index.erb
+40 -7
View File
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title><%= site_name %></title>
<% refresh_interval_seconds = 60 %>
<!-- Leaflet CSS/JS (CDN) -->
<link
@@ -36,6 +37,9 @@
.chat-entry-msg { font-family: ui-monospace, Menlo, Consolas, monospace; }
.chat-entry-date { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: bold; }
.short-name { display:inline-block; border-radius:4px; padding:0 2px; }
.meta-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.refresh-info { margin: 0; color: #555; }
.refresh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls { display: flex; gap: 8px; align-items: center; }
button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
button:hover { background: #f6f6f6; }
@@ -44,16 +48,43 @@
.legend { background: #fff; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; line-height: 18px; }
.legend span { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: middle; }
#map .leaflet-tile { filter: opacity(70%); }
#nodes { font-size: 12px; }
footer { position: fixed; bottom: 0; left: var(--pad); width: calc(100% - 2 * var(--pad)); background: #fafafa; border-top: 1px solid #ddd; text-align: center; font-size: 12px; padding: 4px 0; }
@media (max-width: 768px) {
.row { flex-direction: column; align-items: stretch; gap: var(--pad); }
.map-row { flex-direction: column; }
.controls { order: 2; flex-wrap: wrap; justify-content: flex-start; width: 100%; gap: 12px; }
.controls label { flex: 1 1 100%; }
.controls input[type="text"] { flex: 1 1 auto; min-width: 0; }
.controls button { align-self: flex-start; }
.meta-info { order: 1; width: 100%; }
.refresh-actions { flex-direction: column; align-items: flex-start; gap: 6px; }
#map { order: 1; flex: none; max-width: 100%; height: 50vh; }
#chat { order: 2; flex: none; max-width: 100%; height: 30vh; }
#nodes th:nth-child(1),
#nodes td:nth-child(1),
#nodes th:nth-child(5),
#nodes td:nth-child(5),
#nodes th:nth-child(6),
#nodes td:nth-child(6),
#nodes th:nth-child(9),
#nodes td:nth-child(9),
#nodes th:nth-child(12),
#nodes td:nth-child(12),
#nodes th:nth-child(13),
#nodes td:nth-child(13),
#nodes th:nth-child(14),
#nodes td:nth-child(14),
#nodes th:nth-child(15),
#nodes td:nth-child(15) {
display: none;
}
}
/* Dark mode overrides */
body.dark { background: #111; color: #eee; }
body.dark .meta { color: #bbb; }
body.dark .refresh-info { color: #bbb; }
body.dark .pill { background: #444; }
body.dark #map { border-color: #444; }
body.dark #chat { border-color: #444; background: #222; color: #eee; }
@@ -74,10 +105,12 @@
<body>
<h1><%= site_name %></h1>
<div class="row meta">
<div>
<span id="refreshInfo"></span>
<button id="refreshBtn" type="button">Refresh now</button>
<span id="status" class="pill">loading…</span>
<div class="meta-info">
<p id="refreshInfo" class="refresh-info" aria-live="polite"><%= default_channel %> (<%= default_frequency %>) — active nodes (hour/day/week): … — auto-refresh every <%= refresh_interval_seconds %> seconds.</p>
<div class="refresh-actions">
<button id="refreshBtn" type="button">Refresh now</button>
<span id="status" class="pill">loading…</span>
</div>
</div>
<div class="controls">
<label><input type="checkbox" id="fitBounds" checked /> Auto-fit map</label>
@@ -139,8 +172,8 @@
let lastChatDate;
const NODE_LIMIT = 1000;
const CHAT_LIMIT = 1000;
const REFRESH_MS = 60000;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
const REFRESH_MS = <%= refresh_interval_seconds * 1000 %>;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes (hour/day/week): … — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
const MAP_CENTER = L.latLng(<%= map_center_lat %>, <%= map_center_lon %>);
const MAX_NODE_DISTANCE_KM = <%= max_node_distance_km %>;
@@ -484,7 +517,7 @@
const c = nodes.filter(n => n.last_heard && nowSec - Number(n.last_heard) <= w.secs).length;
return `${c}/${w.label}`;
}).join(', ');
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes: ${counts} — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes (hour/day/week): ${counts} — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
}
</script>
</body>