kbenestad/reimburse
1
0
Fork 0
mirror of https://github.com/kbenestad/reimburse.git synced 2026-06-18 16:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reorganise claimant card: move New form below, adjust column widths

Browse source 
- Remove 'New claim' button
- Move 'New form' below the fields row (was inline next to staff input)
- Staff column 2fr, period columns 0.85fr each, currency 0.5fr
- Staff input no longer wrapped in staffWrap flex container

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
This commit is contained in:
Claude 2026-06-08 05:16:11 +00:00
parent 08a0d2b0ea
commit 43a7638b12
No known key found for this signature in database
1 changed files with 5 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/index.html
View file

@ -355,7 +355,7 @@ body{
/* ── Responsive ───────────────────────────────────────────────────────────── */ /* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:680px){ @media (max-width:680px){
.kb-grid.cols-2,.kb-grid.cols-3,.kb-grid.cols-4{grid-template-columns:1fr;} .kb-grid.cols-2,.kb-grid.cols-3,.kb-grid.cols-4,.kb-grid.claim-grid{grid-template-columns:1fr;}
.kb-header{flex-direction:column;gap:14px;} .kb-header{flex-direction:column;gap:14px;}
.kb-doctitle{text-align:left;} .kb-doctitle{text-align:left;}
.kb-line-section.row1,.kb-line-section.row2,.kb-line-section.row3{grid-template-columns:1fr;} .kb-line-section.row1,.kb-line-section.row2,.kb-line-section.row3{grid-template-columns:1fr;}
@ -808,10 +808,6 @@ function render() {
const staffInput = el('input', {className:'kb-input', type:'text', value: state.staff, placeholder:'Full name'}); const staffInput = el('input', {className:'kb-input', type:'text', value: state.staff, placeholder:'Full name'});
staffInput.addEventListener('input', () => { state.staff = staffInput.value; localStorage.setItem('reimb-staff', staffInput.value); }); staffInput.addEventListener('input', () => { state.staff = staffInput.value; localStorage.setItem('reimb-staff', staffInput.value); });
const newFormBtn = el('button', {type:'button', className:'kb-btn kb-btn--ghost', style:{flexShrink:'0'}, onClick: onNewForm}, 'New form');
const staffWrap = el('div', {style:{display:'flex', gap:'8px', alignItems:'center'}});
staffWrap.append(staffInput, newFormBtn);
const fromInput = el('input', {className:'kb-input', type:'date'}); const fromInput = el('input', {className:'kb-input', type:'date'});
fromInput.value = state.periodFrom; fromInput.value = state.periodFrom;
fromInput.addEventListener('change', () => { state.periodFrom = fromInput.value; updatePeriodMeta(); }); fromInput.addEventListener('change', () => { state.periodFrom = fromInput.value; updatePeriodMeta(); });
@ -829,21 +825,15 @@ function render() {
const claimCard = el('div', {className:'kb-card'}); const claimCard = el('div', {className:'kb-card'});
claimCard.appendChild(el('h2', {className:'kb-card__title'}, 'Claimant')); claimCard.appendChild(el('h2', {className:'kb-card__title'}, 'Claimant'));
const claimGrid = el('div', {className:'kb-grid cols-4'}); const claimGrid = el('div', {className:'kb-grid claim-grid', style:{gridTemplateColumns:'2fr 0.85fr 0.85fr 0.5fr'}});
claimGrid.appendChild(kbField('Staff', staffWrap)); claimGrid.appendChild(kbField('Staff', staffInput));
claimGrid.appendChild(kbField('Period from', fromInput)); claimGrid.appendChild(kbField('Period from', fromInput));
claimGrid.appendChild(kbField('Period to', toInput)); claimGrid.appendChild(kbField('Period to', toInput));
claimGrid.appendChild(kbField('Base currency', baseCurDD)); claimGrid.appendChild(kbField('Base currency', baseCurDD));
claimCard.appendChild(claimGrid); claimCard.appendChild(claimGrid);
const fillPeriodBtn = el('button', {type:'button', className:'kb-btn kb-btn--ghost', style:{marginTop:'12px'}}, 'New claim'); const newFormBtn = el('button', {type:'button', className:'kb-btn kb-btn--ghost', style:{marginTop:'12px'}, onClick: onNewForm}, 'New form');
fillPeriodBtn.addEventListener('click', () => { claimCard.appendChild(newFormBtn);
const p = defaultPeriod();
state.periodFrom = p.from; state.periodTo = p.to;
fromInput.value = p.from; toInput.value = p.to;
updatePeriodMeta();
});
claimCard.appendChild(fillPeriodBtn);
wrap.appendChild(claimCard); wrap.appendChild(claimCard);
// ── Expenses card ───────────────────────────────────────────────────────── // ── Expenses card ─────────────────────────────────────────────────────────