UX: 'Stand erfassen' als Pfoten-Button rechts neben Dog-Chip+Suche

This commit is contained in:
rene 2026-05-19 18:51:17 +02:00
parent 81b5199e18
commit c5bb3ee2cb

View file

@ -562,22 +562,28 @@ window.Page_uebungen = (() => {
function _render() { function _render() {
_container.innerHTML = ` _container.innerHTML = `
<div id="ueb-wrap"> <div id="ueb-wrap">
<div style="padding:var(--space-3) var(--space-4) 0">${UI.dogChip(_appState)}</div> <div style="padding:var(--space-3) var(--space-4) var(--space-2);
<div style="padding:var(--space-3) var(--space-4) var(--space-2);display:flex;gap:var(--space-2);align-items:center"> display:flex;gap:var(--space-3);align-items:stretch">
<!-- Links: Dog-Chip + Suchzeile -->
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)">
${UI.dogChip(_appState)}
<input type="search" id="ueb-search" placeholder="Übung suchen…" <input type="search" id="ueb-search" placeholder="Übung suchen…"
style="flex:1;min-width:0;padding:var(--space-2) var(--space-3); style="flex:1;min-width:0;padding:var(--space-2) var(--space-3);
border:1px solid var(--c-border);border-radius:var(--radius-md); border:1px solid var(--c-border);border-radius:var(--radius-md);
background:var(--c-surface);color:var(--c-text);font-size:var(--text-sm); background:var(--c-surface);color:var(--c-text);font-size:var(--text-sm);
outline:none"> outline:none">
</div>
<!-- Rechts: Pfoten-Button -->
<button id="ueb-quicksetup-btn" <button id="ueb-quicksetup-btn"
style="flex-shrink:0;padding:6px 10px;white-space:nowrap; style="flex-shrink:0;width:68px;align-self:stretch;
background:var(--c-surface-2);border:1px solid var(--c-border); background:var(--c-primary-subtle);border:1.5px solid var(--c-primary-light);
border-radius:var(--radius-md);cursor:pointer; border-radius:var(--radius-lg);cursor:pointer;
display:flex;align-items:center;gap:5px"> display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px">
<svg class="ph-icon" style="width:15px;height:15px;flex-shrink:0;color:var(--c-primary)" aria-hidden="true"> <svg class="ph-icon" style="width:26px;height:26px;color:var(--c-primary)" aria-hidden="true">
<use href="/icons/phosphor.svg#list-checks"></use> <use href="/icons/phosphor.svg#paw-print"></use>
</svg> </svg>
<span style="font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--c-text)">Stand erfassen</span> <span style="font-size:9px;font-weight:var(--weight-semibold);color:var(--c-primary);
line-height:1.2;text-align:center">Stand<br>erfassen</span>
</button> </button>
</div> </div>
${_renderTabs()} ${_renderTabs()}