michael/boehmitools-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI

Browse Source
This commit is contained in:
michael
2026-09-01 16:27:43 +02:00
parent f374553668
commit 43d14552f1
11 changed files with 640 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/trainingsplan/static/index.html
+56 -12
View File
@@ -21,13 +21,50 @@
.tp-exercise-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) auto; gap: 8px; align-items: end; padding: 9px 0; border-bottom: 1px solid var(--bt-line-soft); }
.tp-exercise-row:last-child { border-bottom: none; }
.tp-exercise-actions { display: flex; gap: 5px; justify-content: flex-end; }
.tp-library { display: grid; gap: 12px; }
.tp-library-row { border-bottom: 1px solid var(--bt-line); padding: 14px 16px; }
.tp-field { margin: 0; }
.tp-compact-input, .tp-library input, .tp-library select {
min-height: 34px;
padding: 6px 9px;
border-radius: var(--bt-r-sm);
font-size: 12.5px;
line-height: 1.3;
}
.tp-library { display: grid; gap: 0; }
.tp-library-row { border-bottom: 1px solid var(--bt-line); padding: 0; }
.tp-library-row:last-child { border-bottom: none; }
.tp-library-main { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 8px; align-items: end; }
.tp-progressions { display: grid; gap: 8px; margin-top: 10px; }
.tp-progression-row { display: grid; grid-template-columns: 34px minmax(180px, 1fr) auto; gap: 8px; align-items: center; }
.tp-progression-number { color: var(--bt-muted); font-size: 12px; text-align: center; }
.tp-library-main {
display: grid;
grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
gap: 10px;
align-items: end;
padding: 12px 14px;
background: var(--bt-surface-2);
border-bottom: 1px solid var(--bt-line-soft);
}
.tp-library-id { padding: 7px 14px 12px; font-size: 11px; }
.tp-progressions { display: grid; gap: 0; margin: 0; }
.tp-progressions-head {
display: grid;
grid-template-columns: 34px minmax(180px, 1fr) auto;
gap: 8px;
align-items: center;
padding: 8px 14px 4px;
color: var(--bt-muted);
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.tp-progression-row {
display: grid;
grid-template-columns: 34px minmax(180px, 1fr) auto;
gap: 8px;
align-items: center;
padding: 6px 14px;
border-top: 1px solid var(--bt-line-soft);
}
.tp-progression-number { color: var(--bt-muted); font-family: var(--bt-mono); font-size: 11px; text-align: center; }
.tp-progression-input { margin: 0; }
.tp-addline, .tp-formline { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; align-items: end; margin-top: 12px; }
.tp-table-input { width: 100%; min-width: 0; }
.tp-code { min-height: 520px; font-family: var(--bt-mono); font-size: 12.5px; }
@@ -36,7 +73,7 @@
.tp-top, .tp-layout, .tp-day-head, .tp-textareas, .tp-addline, .tp-formline { grid-template-columns: 1fr; }
.tp-side { position: static; }
.tp-actions, .tp-day-actions { justify-content: flex-start; }
.tp-exercise-row, .tp-library-main, .tp-progression-row { grid-template-columns: 1fr; }
.tp-exercise-row, .tp-library-main, .tp-progression-row, .tp-progressions-head { grid-template-columns: 1fr; }
.tp-exercise-actions { justify-content: flex-start; }
.tp-progression-number { text-align: left; }
}
@@ -291,8 +328,8 @@ function renderExercises() {
const rows = (state.cfg.exercises || []).map((exercise) => `
<div class="tp-library-row" data-exercise-id="${esc(exercise.id)}">
<div class="tp-library-main">
<label>Name<input class="tp-table-input" data-exercise-field="name" value="${esc(exercise.name || "")}"></label>
<label>Aktuelle Progression<select data-exercise-field="current_progression_id">
<label class="tp-field">Name<input class="tp-table-input tp-compact-input" data-exercise-field="name" value="${esc(exercise.name || "")}"></label>
<label class="tp-field">Aktuelle Progression<select class="tp-compact-input" data-exercise-field="current_progression_id">
<option value="">Keine Progression</option>
${progressionOptions(exercise, exercise.current_progression_id)}
</select></label>
@@ -302,10 +339,17 @@ function renderExercises() {
</div>
</div>
<div class="tp-progressions">
${(exercise.progressions || []).length ? `
<div class="tp-progressions-head">
<span></span>
<span>Progressionen</span>
<span></span>
</div>
` : ""}
${(exercise.progressions || []).map((progression, index) => `
<div class="tp-progression-row" data-progression-id="${esc(progression.id)}">
<div class="tp-progression-number">${index + 1}</div>
<label>Progression<input class="tp-table-input" data-progression-field="name" value="${esc(progression.name || "")}"></label>
<input class="tp-table-input tp-compact-input tp-progression-input" aria-label="Progression ${index + 1}" data-progression-field="name" value="${esc(progression.name || "")}">
<div class="tp-exercise-actions">
<button class="mini ghost" data-move-progression="-1" title="Nach oben">↑</button>
<button class="mini ghost" data-move-progression="1" title="Nach unten">↓</button>
@@ -314,14 +358,14 @@ function renderExercises() {
</div>
`).join("") || `<div class="bt-empty">Keine Progressionen hinterlegt.</div>`}
</div>
<div class="bt-mono bt-muted" style="margin-top:8px">${esc(exercise.id)}</div>
<div class="tp-library-id bt-mono bt-muted">${esc(exercise.id)}</div>
</div>
`).join("");
$("tab-uebungen").innerHTML = `
<div class="bt-card">
<h2>Übung anlegen</h2>
<div class="tp-formline">
<label>Name<input id="newExerciseName" type="text"></label>
<label>Name<input id="newExerciseName" class="tp-compact-input" type="text"></label>
<button class="primary" data-add-exercise>Hinzufügen</button>
</div>
</div>