ian/repertory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Visual tweaks, re-order buttons

Browse source
This commit is contained in:
Ian Keane 2026-06-11 13:39:26 -04:00
parent 1aa0237260
commit c439c2a6ba
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -10,10 +10,9 @@
<header>
<h1>🪕 Repertory</h1>
<input type="search" id="filter-search" placeholder="Search…" />
<div id="header-actions">
<input type="search" id="filter-search" placeholder="Search…" />
<button id="btn-clear-filters" hidden>✕ Clear filters</button>
<span id="status"></span>
<button id="btn-call">Call</button>
<button id="btn-learn">Learn</button>
<button id="btn-bulk-edit" hidden>⚡ Bulk Edit</button>
@ -200,6 +199,8 @@
<!-- Tooltip for truncated mobile text -->
<div id="mob-tooltip" hidden></div>
<footer id="app-footer"><span id="status"></span></footer>
<!-- config.js is gitignored — copy config.example.js to config.js for local dev -->
<script src="config.js" onerror="void 0"></script>
<script src="app.js"></script>

23
style.css
View file

@ -29,7 +29,6 @@ header {
padding: .75rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
@ -39,24 +38,32 @@ header h1 { font-size: 1.4rem; white-space: nowrap; }
display: flex;
gap: .6rem;
align-items: center;
flex: 1;
justify-content: flex-end;
flex-shrink: 0;
}
#filter-search {
flex: 1;
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--radius);
padding: .3rem .6rem;
font-size: .85rem;
width: 180px;
min-width: 0;
}
#btn-unlock { background: transparent; border: 1px solid var(--border); color: var(--muted); }
#btn-add-tune { background: var(--accent); }
#btn-clear-filters { background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
#status { font-size: .8rem; color: var(--muted); }
#app-footer {
padding: .4rem 1.25rem;
text-align: center;
font-size: .8rem;
color: var(--muted);
border-top: 1px solid var(--border);
background: var(--surface);
}
/* ── Column header filters ────────────────────────────────── */
th[data-filter] {
@ -400,9 +407,11 @@ fieldset.active .fs-body { display: contents; }
/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
/* Header: wrap onto second line if needed */
/* Header: h1 + actions on line 1, search full-width on line 2 */
header { flex-wrap: wrap; }
#header-actions { flex-wrap: wrap; }
header h1 { order: 1; flex: 1; }
#header-actions { order: 2; flex-shrink: 0; }
#filter-search { order: 3; flex-basis: 100%; }
/* Table: block layout so the card has a concrete width to truncate against */
#tune-table,