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

ggs-header Batch 2 Start: Farmer + Komponenten-Vorruestung

Browse Source 
- Komponente: Logo-Fallback (Kreis-Logo wenn Sim keins hat), Overlay-Modus
  (data-ggs-overlay fuer Vollbild-Canvas), generische Icon-Button-Optik fuer
  Aktionen ohne .ggs-btn-ghost-Klasse, Ton-IDs erweitert (audio-toggle/btnSound).
- Farmer als erstes Bespoke-Muster: ggs-topbar -> ggs-header, schwebende Pille
  (Fallback-Logo + Titel) + Geld-KPI + Icon-Buttons; interne Fachinfo bleibt
  (data-ggs-no-glossar).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 14:33:53 +02:00
parent c913522a77
commit 7b1bdb8d1b
3 changed files with 63 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/assets/css/ggs-header.css
+39
View File
@@ -23,6 +23,16 @@
flex-wrap: nowrap;
}
/* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
Der Sim-Canvas muss dann bis top:0 laufen; Sim-eigene Top-HUDs ggf.
nach unten schieben (siehe Kofferdetektiv). */
.ggs-header--float.ggs-header--overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
}
/* --- Marken-Pille: Kreis-Logo · Titel · Level ---------------- */
.ggs-header--float .ggs-hpille {
display: flex;
@@ -61,6 +71,8 @@
font-size: .92rem;
white-space: nowrap;
line-height: 1;
margin: 0;
padding: 0;
}
.ggs-header--float .ggs-header-badge {
font-size: .6rem;
@@ -115,6 +127,33 @@
gap: .5rem;
flex: none;
}
/* Bespoke-Sims: Buttons/Links in den Aktionen ohne .ggs-btn-ghost-Klasse
bekommen trotzdem die schwebende Icon-Button-Optik. */
.ggs-header--float .ggs-header-actions > button,
.ggs-header--float .ggs-header-actions > a {
width: 38px;
height: 38px;
border-radius: 12px;
border: none;
background: rgba(255, 255, 255, .96);
box-shadow: 0 2px 9px rgba(0, 0, 0, .2);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1f4e5a;
padding: 0;
flex: none;
text-decoration: none;
font-size: 17px;
line-height: 1;
transition: background .15s, transform .1s;
}
.ggs-header--float .ggs-header-actions > button:hover,
.ggs-header--float .ggs-header-actions > a:hover {
background: #fff;
transform: translateY(-1px);
}
/* --- Tempo-Zustandsbutton (zeigt IMMER den aktuellen Speed) --- */
.ggs-header--float .ggs-tempo { position: relative; display: inline-flex; }
App/assets/js/ggs-header.js
+12 -2
View File
@@ -70,7 +70,7 @@
}
return null;
}
var SOUND_IDS = ['btn-sound', 'btn-mute', 'btnVoiceToggle', 'btnAudioToggle', 'btnAudio', 'btn-ton', 'btn-audio'];
var SOUND_IDS = ['btn-sound', 'btn-mute', 'btnVoiceToggle', 'btnAudioToggle', 'btnAudio', 'audio-toggle', 'btnSound', 'btn-ton', 'btn-audio'];
var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart'];
var HELP_IDS = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe'];
@@ -94,6 +94,7 @@
injectSprite();
header.setAttribute('data-ggs-enhanced', '1');
header.classList.add('ggs-header--float');
if (opts.overlay || header.getAttribute('data-ggs-overlay') === '1') header.classList.add('ggs-header--overlay');
var q = function (sel) { return header.querySelector(sel); };
var homeHref = opts.home || header.getAttribute('data-ggs-home') || '/schueler';
@@ -108,10 +109,19 @@
pille.className = 'ggs-hpille';
if (logo) {
logo.parentNode.insertBefore(pille, logo);
pille.appendChild(logo);
} else {
header.insertBefore(pille, header.firstChild);
// Fallback: Kreis-Logo erzeugen, falls die Sim keins im Header hat
logo = document.createElement('a');
logo.className = 'ggs-header-logo';
logo.setAttribute('href', homeHref);
var limg = document.createElement('img');
limg.className = 'ggs-header-logo-icon';
limg.src = opts.logo || header.getAttribute('data-ggs-logo') || '/assets/img/bildLogo.png';
limg.alt = '';
logo.appendChild(limg);
}
pille.appendChild(logo);
var mod = q('.ggs-header-module'); if (mod) pille.appendChild(mod);
var badges = header.querySelectorAll('.ggs-header-badge');
for (var i = 0; i < badges.length; i++) pille.appendChild(badges[i]);