wagesj45/mp3-com-meta-browser
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Introduce UX viewport + templates; add UX manager for swappable/stackable views; refactor loader/search into view factories; extend site.css with viewport helpers.

Browse source
This commit is contained in:
Jordan Wages 2025-09-16 21:04:20 -05:00
commit 85212a12fb
3 changed files with 219 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

39
index.html
View file

@ -16,40 +16,45 @@
</div>
</section>
<!-- Loader/progress area: shown while DB is fetched/unpacked/initialized -->
<section id="loader" class="section fade fade-visible" aria-live="polite">
<!-- Viewport: a single visible container that holds the active UX element -->
<section id="app" class="section">
<div class="container">
<div class="box">
<p id="loader-step" class="mb-2">Preparing…</p>
<!-- Bulma progress bar: we update value/max via JS. No inline styles. -->
<progress id="loader-progress" class="progress is-primary" value="0" max="100">0%</progress>
<p id="loader-detail" class="is-size-7 has-text-grey">Starting…</p>
<div id="viewport" class="ux-viewport">
<div id="ux-root" class="ux-root"></div>
<div id="ux-overlays" class="ux-overlays" aria-live="polite" aria-atomic="true"></div>
</div>
</div>
</section>
<!-- Main app UI: hidden until DB is ready -->
<!-- App starts hidden and will fade in after loader completes. -->
<section id="app" class="section fade" hidden>
<div class="container">
<!-- Templates for interchangeable, stackable UX elements -->
<template id="tpl-loader">
<div class="ux-view fade">
<div class="box" role="status" aria-live="polite">
<p class="mb-2" data-ref="step">Preparing…</p>
<progress class="progress is-primary" value="0" max="100" data-ref="progress">0%</progress>
<p class="is-size-7 has-text-grey" data-ref="detail">Starting…</p>
</div>
</div>
</template>
<template id="tpl-search">
<div class="ux-view fade">
<div class="box">
<form id="search-form" class="mb-4" role="search" aria-label="Track search">
<form class="mb-4" role="search" aria-label="Track search" data-ref="form">
<div class="field">
<label class="label" for="q">Search</label>
<div class="control">
<input id="q" name="q" class="input" type="search" placeholder="Search artist, title, album, genre…" disabled aria-disabled="true" />
<input id="q" name="q" class="input" type="search" placeholder="Search artist, title, album, genre…" disabled aria-disabled="true" data-ref="q" />
</div>
<p class="help">Powered by in-browser SQLite FTS; no network queries.</p>
</div>
</form>
<!-- Results stub for now -->
<div id="results" class="content">
<div class="content" data-ref="results">
<p class="has-text-grey">Database not initialized yet.</p>
</div>
</div>
</div>
</section>
</template>
<!-- Third-party libs loaded from CDNs (no trackers). Pinned versions. -->
<!-- fflate: tiny ZIP library used to unzip the downloaded DB archive client-side. -->