rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Hilfe-? inline neben 'Dein Plan für heute' statt absolut oben rechts (SW by-v663)

Browse source
This commit is contained in:
rene 2026-05-03 21:13:10 +02:00
parent 0413483692
commit 1d1171e5f2
6 changed files with 30 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

15
backend/static/css/components.css
View file

@ -6553,25 +6553,20 @@ html.modal-open {
/* ============================================================ /* ============================================================
PAGE INFO — generische Seiten-Hilfe (UI.pageInfo) PAGE INFO — generische Seiten-Hilfe (UI.pageInfo)
============================================================ */ ============================================================ */
.pinfo-trigger { .pinfo-trigger-inline {
position: absolute; width: 26px; height: 26px;
top: calc(env(safe-area-inset-top, 0px) + 10px);
right: var(--space-4);
width: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: var(--c-surface-2); background: var(--c-surface-2);
border: 1px solid var(--c-border-light); border: 1px solid var(--c-border-light);
color: var(--c-text-secondary); color: var(--c-text-secondary);
cursor: pointer; cursor: pointer;
display: flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 50;
flex-shrink: 0; flex-shrink: 0;
box-shadow: var(--shadow-sm);
transition: background .15s, color .15s; transition: background .15s, color .15s;
} }
.pinfo-trigger:hover { background: var(--c-primary-subtle, rgba(196,132,58,.1)); color: var(--c-primary); } .pinfo-trigger-inline:hover { background: var(--c-primary-subtle, rgba(196,132,58,.1)); color: var(--c-primary); }
.pinfo-banner { .pinfo-banner {
margin: var(--space-3) var(--space-4) 0; margin: var(--space-3) var(--space-4) 0;
@ -6645,8 +6640,6 @@ html.modal-open {
} }
.pinfo-tip .ph-icon { color: var(--c-primary); flex-shrink: 0; margin-top: 1px; } .pinfo-tip .ph-icon { color: var(--c-primary); flex-shrink: 0; margin-top: 1px; }
/* Container braucht position:relative für den absoluten Trigger-Button */
.page-body { position: relative; }
.by-help-btn { .by-help-btn {
display: inline-flex; display: inline-flex;

8
backend/static/index.html
View file

@ -93,9 +93,9 @@
</script> </script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=662"> <link rel="stylesheet" href="/css/design-system.css?v=663">
<link rel="stylesheet" href="/css/layout.css?v=662"> <link rel="stylesheet" href="/css/layout.css?v=663">
<link rel="stylesheet" href="/css/components.css?v=662"> <link rel="stylesheet" href="/css/components.css?v=663">
</head> </head>
<body> <body>
@ -562,7 +562,7 @@
<script src="/js/api.js?v=94"></script> <script src="/js/api.js?v=94"></script>
<script src="/js/ui.js?v=94"></script> <script src="/js/ui.js?v=94"></script>
<script src="/js/app.js?v=94"></script> <script src="/js/app.js?v=94"></script>
<script src="/js/worlds.js?v=662"></script> <script src="/js/worlds.js?v=663"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '662'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '663'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.3.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.3.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';

7
backend/static/js/pages/uebungen.js
View file

@ -34,6 +34,7 @@ window.Page_uebungen = (() => {
// ---------------------------------------------------------- // ----------------------------------------------------------
// STATS STATE // STATS STATE
// ---------------------------------------------------------- // ----------------------------------------------------------
let _helpHandle = null; // Rückgabe von UI.pageInfo — für inline Trigger-Button
let _statsData = null; // cached stats from /api/training/stats let _statsData = null; // cached stats from /api/training/stats
let _badgesData = null; // cached badges from /api/achievements let _badgesData = null; // cached badges from /api/achievements
let _exercisesByTab = {}; // aus API geladen let _exercisesByTab = {}; // aus API geladen
@ -476,7 +477,7 @@ window.Page_uebungen = (() => {
if (_VALID_TABS.has(mapped)) _activeTab = mapped; if (_VALID_TABS.has(mapped)) _activeTab = mapped;
} }
_render(); _render();
UI.pageInfo(_container, { _helpHandle = UI.pageInfo(_container, {
pageId: 'uebungen', pageId: 'uebungen',
title: 'Übungsbibliothek', title: 'Übungsbibliothek',
icon: 'graduation-cap', icon: 'graduation-cap',
@ -747,10 +748,14 @@ window.Page_uebungen = (() => {
<span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-text)"> <span style="font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--c-text)">
Dein Plan für heute Dein Plan für heute
</span> </span>
<span id="ueb-help-anchor" style="margin-left:auto"></span>
</div> </div>
<div style="display:flex;flex-direction:column;gap:var(--space-2)"> <div style="display:flex;flex-direction:column;gap:var(--space-2)">
${cards.join('')} ${cards.join('')}
</div>`; </div>`;
if (_helpHandle) {
document.getElementById('ueb-help-anchor')?.appendChild(_helpHandle.makeTriggerBtn());
}
el.querySelectorAll('.ueb-trainer-btn').forEach(btn => { el.querySelectorAll('.ueb-trainer-btn').forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {

21
backend/static/js/ui.js
View file

@ -313,13 +313,8 @@ const UI = (() => {
}); });
} }
// Kleiner ? Button oben rechts — immer sichtbar // Kein automatischer absolut-positionierter Trigger mehr.
const headerBtn = document.createElement('button'); // Aufrufer kann openModal() nutzen und den Button selbst platzieren.
headerBtn.className = 'pinfo-trigger';
headerBtn.setAttribute('aria-label', 'Hilfe');
headerBtn.innerHTML = _svgIcon('question');
headerBtn.addEventListener('click', _openModal);
container.appendChild(headerBtn);
// Banner beim ersten Besuch // Banner beim ersten Besuch
if (!seen) { if (!seen) {
@ -340,6 +335,18 @@ const UI = (() => {
banner.querySelector('.pinfo-banner-more').addEventListener('click', () => { banner.remove(); _openModal(); }); banner.querySelector('.pinfo-banner-more').addEventListener('click', () => { banner.remove(); _openModal(); });
container.insertAdjacentElement('afterbegin', banner); container.insertAdjacentElement('afterbegin', banner);
} }
// Inline-Trigger-Button (für Aufrufer zum Einbetten)
function makeTriggerBtn() {
const btn = document.createElement('button');
btn.className = 'pinfo-trigger-inline';
btn.setAttribute('aria-label', 'Hilfe');
btn.innerHTML = _svgIcon('question');
btn.addEventListener('click', _openModal);
return btn;
}
return { openModal: _openModal, makeTriggerBtn };
} }
// ---------------------------------------------------------- // ----------------------------------------------------------

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v662'; const CACHE_VERSION = 'by-v663';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache