dannydannydanny/bigbiggerbiggestbot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(webapp): split current exercise and next-exercise input into separate cards

Browse source 
The two concerns sharing one gray block felt crowded. Giving the
next-exercise input its own card creates clear visual separation
and a natural "what comes next" feel.

Drop the now-redundant top-border/padding on .sets-section since
it's its own card now.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Danny 2026-04-18 18:52:26 +02:00
parent 512c565f54
commit 8e9a2b7208
2 changed files with 16 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

30
webapp/index.html
View file

@ -27,23 +27,23 @@
<!-- Current workout exercises list -->
<div id="workout-exercises"></div>
<!-- Add exercise form -->
<div class="card" id="add-exercise-card">
<!-- Sets for current exercise (shown after name is entered) -->
<div id="sets-section" class="sets-section hidden">
<div class="sets-header">
<div class="section-label" id="sets-label">Sets</div>
<button id="btn-delete-exercise" class="btn-link btn-danger hidden">Remove exercise</button>
</div>
<div id="sets-list"></div>
<div class="set-input-row">
<input type="text" id="inp-reps" class="input input-small" placeholder="Reps" inputmode="numeric" pattern="[0-9]*" />
<span class="set-separator">x</span>
<input type="text" id="inp-weight" class="input input-small" placeholder="kg" inputmode="decimal" />
<button id="btn-add-set" class="btn-icon" title="Add set">+</button>
</div>
<!-- Current exercise card (visible after name is entered) -->
<div id="sets-section" class="card sets-section hidden">
<div class="sets-header">
<div class="section-label" id="sets-label">Sets</div>
<button id="btn-delete-exercise" class="btn-link btn-danger hidden">Remove exercise</button>
</div>
<div id="sets-list"></div>
<div class="set-input-row">
<input type="text" id="inp-reps" class="input input-small" placeholder="Reps" inputmode="numeric" pattern="[0-9]*" />
<span class="set-separator">x</span>
<input type="text" id="inp-weight" class="input input-small" placeholder="kg" inputmode="decimal" />
<button id="btn-add-set" class="btn-icon" title="Add set">+</button>
</div>
</div>
<!-- Add next exercise -->
<div class="card" id="add-exercise-card">
<div class="exercise-name-row">
<input type="text" id="inp-exercise-name" class="input" placeholder="Exercise name" autocomplete="off" />
<button id="btn-add-exercise" class="btn-icon" title="Add exercise">+</button>

7
webapp/style.css
View file

@ -166,7 +166,6 @@ body {
.exercise-name-row {
display: flex;
gap: 8px;
margin-top: 4px;
}
.exercise-name-row .input { flex: 1; }
@ -201,11 +200,7 @@ body {
/* ── Sets section ────────────────────────────────────────────── */
.sets-section {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--tg-theme-hint-color, #999)22;
}
/* .sets-section inherits .card styling; no additional rules needed. */
.sets-header {
display: flex;