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

CSS tweaks

Browse source
This commit is contained in:
Ian Keane 2026-06-11 17:03:56 -04:00
parent 55c8180693
commit eaf89d1d89
3 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app.js
View file

@ -442,8 +442,8 @@ function renderTable() {
<td><span class="cell-trunc cell-name-content mob-truncatable" data-full="${esc(nameRaw)}" title="${esc(nameRaw)}">${esc(nameRaw)}</span></td> <td><span class="cell-trunc cell-name-content mob-truncatable" data-full="${esc(nameRaw)}" title="${esc(nameRaw)}">${esc(nameRaw)}</span></td>
<td><span class="cell-trunc cell-source-content mob-truncatable" data-full="${esc(sourceRaw)}" title="${esc(sourceRaw)}">${esc(sourceRaw)}</span></td> <td><span class="cell-trunc cell-source-content mob-truncatable" data-full="${esc(sourceRaw)}" title="${esc(sourceRaw)}">${esc(sourceRaw)}</span></td>
<td>${esc(keyStr)}</td> <td>${esc(keyStr)}</td>
<td>${esc(entry?.instrument_name ?? '')}</td> <td><span class="cell-trunc cell-inst-content" title="${esc(entry?.instrument_name ?? '')}">${esc(entry?.instrument_name ?? '')}</span></td>
<td>${esc(entry?.tuning ?? '')}</td> <td><span class="cell-trunc cell-tuning-content" title="${esc(entry?.tuning ?? '')}">${esc(entry?.tuning ?? '')}</span></td>
<td>${pillStatus(entry?.status)}</td> <td>${pillStatus(entry?.status)}</td>
<td>${hasNotes <td>${hasNotes
? `<button class="action-btn btn-notes" data-tune-id="${tune.id}" data-entry-id="${entry?.id ?? ''}">📝</button>` ? `<button class="action-btn btn-notes" data-tune-id="${tune.id}" data-entry-id="${entry?.id ?? ''}">📝</button>`
@ -1092,8 +1092,9 @@ function callSelect(value, modal) {
} }
} }
$('btn-call').addEventListener('click', () => openCallModal('callable')); $('btn-call').addEventListener('click', () => openCallModal('callable'));
$('btn-learn').addEventListener('click', () => openCallModal('to_learn')); $('btn-review').addEventListener('click', () => openCallModal('review'));
$('btn-learn').addEventListener('click', () => openCallModal('to_learn'));
$('call-close').addEventListener('click', () => callModal.close()); $('call-close').addEventListener('click', () => callModal.close());
$('call-back').addEventListener('click', () => { $('call-back').addEventListener('click', () => {
callStep--; callStep--;

3
index.html
View file

@ -14,8 +14,9 @@
<div id="header-actions"> <div id="header-actions">
<button id="btn-clear-filters" hidden>✕ Clear filters</button> <button id="btn-clear-filters" hidden>✕ Clear filters</button>
<button id="btn-call">Call</button> <button id="btn-call">Call</button>
<button id="btn-review">Review</button>
<button id="btn-learn">Learn</button> <button id="btn-learn">Learn</button>
<button id="btn-add-tune" hidden>+ Add tune</button> <button id="btn-add-tune" hidden>+ Add</button>
<button id="btn-unlock">🔒 Unlock</button> <button id="btn-unlock">🔒 Unlock</button>
<button id="btn-bulk-edit" hidden>☰</button> <button id="btn-bulk-edit" hidden>☰</button>
</div> </div>

24
style.css
View file

@ -29,6 +29,7 @@ header {
padding: .75rem 1.25rem; padding: .75rem 1.25rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: .75rem; gap: .75rem;
} }
@ -39,8 +40,11 @@ header h1 { font-size: 1.4rem; white-space: nowrap; }
gap: .6rem; gap: .6rem;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
margin-left: auto; /* right-aligns on same line; left-fills when alone on a row */
} }
#filter-search { #filter-search {
flex: 1; flex: 1;
background: var(--bg); background: var(--bg);
@ -228,8 +232,10 @@ th.sort-desc .sort-indicator::after { content: '▼'; }
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.cell-name-content { max-width: min(22vw, 260px); } .cell-name-content { max-width: min(14vw, 200px); }
.cell-source-content { max-width: min(26vw, 200px); } .cell-source-content { max-width: min(11vw, 160px); }
.cell-inst-content { max-width: min(11vw, 130px); }
.cell-tuning-content { max-width: min(9vw, 110px); }
.pill { .pill {
display: inline-block; display: inline-block;
@ -451,11 +457,12 @@ fieldset.active .fs-body { display: contents; }
body { height: 100dvh; overflow: hidden; } body { height: 100dvh; overflow: hidden; }
main { overflow-y: auto; } main { overflow-y: auto; }
/* Header: h1 + actions on line 1, search full-width on line 2 */ /* Search drops to its own full-width row */
header { flex-wrap: wrap; } #filter-search { order: 3; flex-basis: 100%; }
header h1 { order: 1; flex: 1; } /* Actions fill remaining space; each button gets an equal share; ☰ stays natural size */
#header-actions { order: 2; flex-shrink: 0; } #header-actions { flex: 1; margin-left: 0; }
#filter-search { order: 3; flex-basis: 100%; } #header-actions > button { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
#btn-bulk-edit { flex: none; }
/* Table: block layout so the card has a concrete width to truncate against */ /* Table: block layout so the card has a concrete width to truncate against */
#tune-table, #tune-table,
@ -563,7 +570,8 @@ fieldset.active .fs-body { display: contents; }
#btn-bulk-edit { background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 1rem; padding: .3rem .65rem; } #btn-bulk-edit { background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 1rem; padding: .3rem .65rem; }
#btn-call { background: #1b4332; color: #74c69d; border: 1px solid #2d6a4f; font-weight: 600; } #btn-call { background: #1b4332; color: #74c69d; border: 1px solid #2d6a4f; font-weight: 600; }
#btn-learn { background: #3d2e10; color: #f2c94c; border: 1px solid #4d3a1e; font-weight: 600; } #btn-review { background: #3d2e10; color: #f2c94c; border: 1px solid #4d3a1e; font-weight: 600; }
#btn-learn { background: #2a1a4e; color: #c4b5fd; border: 1px solid #3d2562; font-weight: 600; }
/* ── Call modal ───────────────────────────────────────────── */ /* ── Call modal ───────────────────────────────────────────── */
#call-modal { #call-modal {