Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: HelpModal schließbar, mobile Nav scrollbar + einklappbar

Browse Source
This commit is contained in:
Dicken
2026-06-28 13:45:26 +02:00
parent 41405f3f18
commit 19837567cd
2 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/App.jsx
View File

@@ -284,6 +284,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0 }) {
function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) { function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const [appsOpen, setAppsOpen] = useState(false); const [appsOpen, setAppsOpen] = useState(false);
const [mobileCollapsedGroups, setMobileCollapsedGroups] = useState({});
const NAV_H = 56; const NAV_H = 56;
const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => { const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => {
@@ -339,19 +340,27 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0 }) {
return ( return (
<> <>
{/* Apps Sheet mit Gruppenüberschriften */} {/* Apps Sheet mit Gruppenüberschriften + einklappbar + scrollbar */}
<Sheet open={appsOpen} onClose={()=>setAppsOpen(false)}> <Sheet open={appsOpen} onClose={()=>setAppsOpen(false)}>
<div style={{ paddingBottom:4 }}> <div style={{ overflowY:'auto', maxHeight:'60vh', paddingBottom:8 }}>
{getGroupedTools().map(([group, tools]) => ( {getGroupedTools().map(([group, tools]) => {
const isGrpCollapsed = !!mobileCollapsedGroups[group];
return (
<div key={group}> <div key={group}>
<div style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace', <button onClick={() => setMobileCollapsedGroups(prev => ({ ...prev, [group]: !prev[group] }))}
letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div> style={{ width:'100%', display:'flex', alignItems:'center', gap:6,
{tools.map(t => ( background:'none', border:'none', cursor:'pointer', padding:'12px 20px 5px' }}>
<span style={{ color:'rgba(78,205,196,0.85)', fontSize:9, fontFamily:'monospace',
letterSpacing:2, flex:1, textAlign:'left' }}>{group.toUpperCase()}</span>
<ChevronIcon size={10} color="rgba(78,205,196,0.5)" dir={isGrpCollapsed ? 'right' : 'down'} />
</button>
{!isGrpCollapsed && tools.map(t => (
<MI key={t.id} Icon={t.Icon} label={t.label} <MI key={t.id} Icon={t.Icon} label={t.label}
onClick={() => { setActive(t.id); setAppsOpen(false); }} /> onClick={() => { setActive(t.id); setAppsOpen(false); }} />
))} ))}
</div> </div>
))} );
})}
</div> </div>
</Sheet> </Sheet>

12
frontend/src/tools/gebietseroberung.jsx
View File

@@ -23,12 +23,17 @@ function getMyRole() {
// ── Spielerklärung ──────────────────────────────────────────────────────────── // ── Spielerklärung ────────────────────────────────────────────────────────────
function HelpModal({ onClose }) { function HelpModal({ onClose }) {
return ( return (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.85)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000, padding:16, overflowY:'auto' }}> <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.85)', zIndex:1000, display:'flex', flexDirection:'column' }}
<div style={{ ...S.card, maxWidth:460, width:'100%' }}> onClick={onClose}>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}> <div style={{ ...S.card, maxWidth:460, width:'100%', margin:'16px auto', display:'flex', flexDirection:'column',
maxHeight:'calc(100dvh - 32px)', overflow:'hidden' }}
onClick={e => e.stopPropagation()}>
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center',
paddingBottom:14, marginBottom:14, borderBottom:'1px solid rgba(255,255,255,0.08)', flexShrink:0 }}>
<span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700, letterSpacing:1 }}>⬡ SPIELREGELN</span> <span style={{ color:'#fff', fontFamily:'Space Mono,monospace', fontSize:14, fontWeight:700, letterSpacing:1 }}>⬡ SPIELREGELN</span>
<button onClick={onClose} style={S.btn('#ff6b9d', true)}>✕ Schließen</button> <button onClick={onClose} style={S.btn('#ff6b9d', true)}>✕ Schließen</button>
</div> </div>
<div style={{ overflowY:'auto', paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' }}>
<div style={{ color:'rgba(255,255,255,0.75)', fontSize:13, lineHeight:1.9, fontFamily:'monospace' }}> <div style={{ color:'rgba(255,255,255,0.75)', fontSize:13, lineHeight:1.9, fontFamily:'monospace' }}>
<p style={{ marginTop:0 }}> <p style={{ marginTop:0 }}>
<strong style={{ color:MY_COLOR }}>Ziel:</strong> Sammle mehr <strong>Punkte</strong> als dein Gegner — durch clevere Expansion und das Meiden von Fallen. <strong style={{ color:MY_COLOR }}>Ziel:</strong> Sammle mehr <strong>Punkte</strong> als dein Gegner — durch clevere Expansion und das Meiden von Fallen.
@@ -64,6 +69,7 @@ function HelpModal({ onClose }) {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }