1 Commits

Author SHA1 Message Date
user
a279cf8583 feat: add mobile viewport detection with friendly unavailable message
Some checks failed
check / check (push) Failing after 3m26s
Detect mobile viewport (window.innerWidth < 768) at startup and show a
centered 'Not yet available on mobile' message instead of the full
monitoring UI. All polling, gateway detection, and network requests are
skipped entirely on mobile viewports.

Desktop behavior is completely unchanged — the mobile check is the very
first thing in init() and returns early before any other setup runs.
2026-03-16 21:18:55 -07:00
3 changed files with 40 additions and 47 deletions

View File

@@ -102,6 +102,9 @@ dist/
false outage)
- Clickable service URLs
- Canvas-based sparkline rendering with devicePixelRatio scaling
- Mobile detection: viewports narrower than 768px show a friendly "not yet
available on mobile" message instead of the monitoring UI (no polling or
network requests on mobile)
- Zero runtime dependencies: all resources bundled into build artifacts
## Deployment
@@ -125,6 +128,8 @@ properties.
## Limitations
- **Mobile**: Viewports below 768px wide show a static "not yet available"
message. The full monitoring UI requires a desktop-width browser.
- **CORS**: Some hosts may block cross-origin HEAD requests. The app uses
`no-cors` mode which allows the request but provides opaque responses. Latency
is still measurable based on request timing.

47
TODO.md
View File

@@ -1,47 +0,0 @@
# Workflow
* branch (from `main`)
* do the work in Next Step
* move Next Step to the top of Completed Steps
* move the top item of Future Steps into Next Step
* commit (`TODO.md` changes in the same commit as the work)
* merge to `main` if the branch is not protected, otherwise open a PR
* push
# Status
pre-1.0. No git tags. Backend work in flight on feat/reportbuf-storage
(dirty: src/main.js). Frontend is functional; backend is new and unmerged.
# Next Step
Land feat/reportbuf-storage: finish the in-progress src/main.js change,
get make check green, and merge the branch to main. The branch adds the
backend (buffered zstd-compressed report storage), the CI workflow, and
backend repo standard files, so merging it also closes most compliance
gaps.
# Completed Steps
- 2026-02-27: backend with buffered zstd-compressed report storage; CI
workflow and backend repo standard files; backend Dockerfile fixed (Go
1.25, golangci-lint) and moved to repo root (feat/reportbuf-storage,
unmerged)
- 2026-02-26: host row layout redesigned with CSS grid; overflow and
spacing fixes; nginx config extracted; port hardcoded to 8080
- 2026-02-26: debug log panel, median stats, recovery probe, Docker
build fix, S3 Singapore endpoint added
- 2026-02-23: summary box redesign, host pinning, local and UTC clocks,
checks counter
- 2026-02-23: hosts sorted by latency; GET instead of HEAD for latency;
timeout derived from interval; Hetzner regional endpoints; 3s interval
- 2026-01-29: initial NetWatch network latency monitor
# Future Steps
- Compliance top-up as one small commit: add .editorconfig and add the
hooks target to the Makefile
- After merge, confirm .gitea/workflows/check.yml is on main and CI is
green (main always green policy)
- Decide what to do with untracked resume.sh: commit it, gitignore it,
or delete it

View File

@@ -1126,11 +1126,46 @@ function handleResize(state) {
});
}
// --- Mobile Detection --------------------------------------------------------
const MOBILE_BREAKPOINT = 768;
function isMobileViewport() {
return window.innerWidth < MOBILE_BREAKPOINT;
}
function buildMobileUI() {
const app = document.getElementById("app");
app.innerHTML = `
<div class="mx-auto px-[5%] py-8">
<header class="mb-8">
<h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
<p class="text-gray-400 text-sm mt-2">Real-time network latency monitor</p>
</header>
<div class="flex items-center justify-center min-h-[60vh]">
<div class="bg-gray-800/70 border border-gray-700/50 rounded-lg p-8 max-w-md text-center">
<p class="text-4xl mb-4">📡</p>
<p class="text-xl font-semibold text-white mb-2">Not yet available on mobile</p>
<p class="text-gray-400 text-sm">NetWatch requires a wider viewport to display latency charts and monitoring data. Please visit on a desktop browser.</p>
</div>
</div>
<footer class="mt-8 text-center text-gray-600 text-xs">
<p><a href="https://git.eeqj.de/sneak/netwatch/commit/${__COMMIT_FULL__}" target="_blank" rel="noopener" class="text-gray-600 hover:text-gray-400">${__COMMIT_HASH__}</a></p>
</footer>
</div>`;
}
// --- Bootstrap ---------------------------------------------------------------
async function init() {
log.info("NetWatch starting");
if (isMobileViewport()) {
log.info("Mobile viewport detected — skipping monitoring");
buildMobileUI();
return;
}
// Probe common gateway IPs to find the local router
const gateway = await detectGateway();
const localHosts = [LOCAL_CPE];