Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Busfahrt: Auftrags-Card tiefer, EN-Button -> Onboarding Seite 2, Texte

Browse Source 
- ggs-quick-intro.js: optionale zweite Seite (config.page2 {title, html})
  mit Weiter/Zurueck-Navigation. Rueckwaertskompatibel (ohne page2 = 1 Seite).
- Busfahrt: EN-Button entfernt; die "Warum Englisch?"-Erklaerung liegt jetzt
  auf Onboarding-Seite 2 + Satz zur mehrsprachigen Hintergrundmusik.
- Onboarding-Schritte ohne lange "-" ausformuliert.
- Auftrags-Card (.bf-order) 20px tiefer (top 84).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 16:32:32 +02:00
parent 6135dd2648
commit 8f89613eee
2 changed files with 73 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/js/ggs-quick-intro.js
+54 -26
View File
@@ -85,6 +85,7 @@
var _config = null;
var _back = null;
var _page = 1;
function lsKey() { return _config && _config.simId ? 'ggs.intro.' + _config.simId : null; }
function markSeen() { try { var k = lsKey(); if (k) localStorage.setItem(k, '1'); } catch (_) {} }
@@ -98,41 +99,68 @@
}
function onKey(e) { if (e.key === 'Escape') close(); }
function open() {
if (!_config) return;
function onBackClick(e) {
if (e.target === _back) { markSeen(); close(); return; }
var a = e.target && e.target.dataset && e.target.dataset.action;
if (a === 'next') { _page = 2; render(); }
else if (a === 'back') { _page = 1; render(); }
else if (a === 'start') { markSeen(); close(); }
}
function render() {
injectCss();
close();
var steps = (_config.steps || []).map(function (s) {
return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
}).join('');
var goals = (_config.goals || []).map(function (g) {
return '<li>' + escapeHtml(g) + '</li>';
}).join('');
var p2 = _config.page2 || null;
var hasP2 = !!(p2 && (p2.html || p2.body));
var headTitle, headLead, body, foot;
if (_page === 2 && hasP2) {
headTitle = p2.title || _config.title || 'Mehr dazu';
headLead = '';
body = (p2.html || p2.body || '');
foot = '<button type="button" class="ggs-qi-btn" data-action="back" style="background:#e8e4d8;color:#2a2a2a">← Zurück</button>'
+ '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
} else {
var steps = (_config.steps || []).map(function (s) {
return '<li>' + (s.indexOf('<') >= 0 ? s : escapeHtml(s)) + '</li>';
}).join('');
var goals = (_config.goals || []).map(function (g) {
return '<li>' + escapeHtml(g) + '</li>';
}).join('');
headTitle = _config.title || 'Anleitung';
headLead = _config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '';
body = (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
+ (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '');
foot = hasP2
? '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="next">Weiter →</button>'
: '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>';
}
var html = ''
+ '<div class="ggs-qi-modal" role="dialog" aria-modal="true" aria-labelledby="ggs-qi-title">'
+ '<div class="ggs-qi-head">'
+ '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(_config.title || 'Anleitung') + '</h2>'
+ (_config.lead ? '<p class="ggs-qi-lead">' + escapeHtml(_config.lead) + '</p>' : '')
+ '</div>'
+ '<div class="ggs-qi-body">'
+ (steps ? '<div class="ggs-qi-h3">Was tust du?</div><ol class="ggs-qi-steps">' + steps + '</ol>' : '')
+ (goals ? '<div class="ggs-qi-h3">Was lernst du?</div><ul class="ggs-qi-goals">' + goals + '</ul>' : '')
+ '</div>'
+ '<div class="ggs-qi-foot">'
+ '<button type="button" class="ggs-qi-btn ggs-qi-btn-primary" data-action="start">Los geht\'s →</button>'
+ '<h2 id="ggs-qi-title" class="ggs-qi-title">' + escapeHtml(headTitle) + '</h2>'
+ headLead
+ '</div>'
+ '<div class="ggs-qi-body">' + body + '</div>'
+ '<div class="ggs-qi-foot">' + foot + '</div>'
+ '</div>';
_back = document.createElement('div');
_back.className = 'ggs-qi-back';
if (!_back) {
_back = document.createElement('div');
_back.className = 'ggs-qi-back';
_back.addEventListener('click', onBackClick);
document.body.appendChild(_back);
document.addEventListener('keydown', onKey);
}
_back.innerHTML = html;
_back.addEventListener('click', function (e) {
if (e.target === _back) { markSeen(); close(); }
if (e.target && e.target.dataset && e.target.dataset.action === 'start') { markSeen(); close(); }
});
document.body.appendChild(_back);
document.addEventListener('keydown', onKey);
var m = _back.querySelector('.ggs-qi-modal'); if (m) m.scrollTop = 0;
}
function open() {
if (!_config) return;
close();
_page = 1;
render();
}
window.GgsQuickIntro = {