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

fix: Hex Wars Badge - gleiche Farbe und Position wie Nachrichten

Browse Source
This commit is contained in:
Dicken
2026-06-29 11:58:05 +02:00
parent ed3e56fb43
commit 59596fcc96
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/App.jsx
View File

@@ -182,7 +182,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
)} )}
{collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && ( {collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
<span style={{ position:'absolute', top:-3, right:-3, width:7, height:7, <span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 5px #ff6b9d' }}/> borderRadius:'50%', background:'#4ecdc4', boxShadow:'0 0 5px #4ecdc4' }}/>
)} )}
</span> </span>
{!collapsed && <span style={{ flex:1, color:ic }}>{item.label}</span>} {!collapsed && <span style={{ flex:1, color:ic }}>{item.label}</span>}
@@ -191,7 +191,7 @@ function Sidebar({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTurns
fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{unreadMsgs}</span> fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{unreadMsgs}</span>
)} )}
{!collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && ( {!collapsed && item.id==='gebietseroberung' && hexWarsTurns>0 && (
<span style={{ background:'#ff6b9d', color:'#000', borderRadius:10, fontSize:9, <span style={{ background:'#4ecdc4', color:'#000', borderRadius:10, fontSize:9,
fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{hexWarsTurns}</span> fontFamily:'monospace', padding:'1px 6px', fontWeight:700, flexShrink:0 }}>{hexWarsTurns}</span>
)} )}
</button> </button>
@@ -278,13 +278,15 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
const [appsOpen, setAppsOpen] = useState(false); const [appsOpen, setAppsOpen] = useState(false);
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)', dot=false}) => {
const Ic = Icon; const Ic = Icon;
return ( return (
<button onClick={onClick} style={{ width:'100%', padding:'11px 20px', background:'transparent', <button onClick={onClick} style={{ width:'100%', padding:'11px 20px', background:'transparent',
border:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer' }}> border:'none', display:'flex', alignItems:'center', gap:12, cursor:'pointer', position:'relative' }}>
<span style={{flexShrink:0, width:22, display:'flex', alignItems:'center', justifyContent:'center'}}> <span style={{flexShrink:0, width:22, display:'flex', alignItems:'center', justifyContent:'center', position:'relative'}}>
{Ic ? <Ic size={18} color={color}/> : <span style={{fontSize:17, color}}>{icon}</span>} {Ic ? <Ic size={18} color={color}/> : <span style={{fontSize:17, color}}>{icon}</span>}
{dot && <span style={{ position:'absolute', top:-3, right:-3, width:7, height:7,
borderRadius:'50%', background:'#4ecdc4', boxShadow:'0 0 5px #4ecdc4' }}/>}
</span> </span>
<span style={{color, fontFamily:'monospace', fontSize:13}}>{label}</span> <span style={{color, fontFamily:'monospace', fontSize:13}}>{label}</span>
</button> </button>
@@ -340,7 +342,7 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div> letterSpacing:2, padding:'12px 20px 5px' }}>{group.toUpperCase()}</div>
{tools.map(t => ( {tools.map(t => (
<MI key={t.id} Icon={t.Icon} <MI key={t.id} Icon={t.Icon}
label={t.id==='gebietseroberung' && hexWarsTurns>0 ? `${t.label} ●` : t.label} label={t.label} dot={t.id==='gebietseroberung' && hexWarsTurns>0}
onClick={() => { setActive(t.id); setAppsOpen(false); }} /> onClick={() => { setActive(t.id); setAppsOpen(false); }} />
))} ))}
</div> </div>
@@ -373,11 +375,7 @@ function BottomNav({ active, setActive, user, onLogout, unreadMsgs=0, hexWarsTur
style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
justifyContent:'center', gap:3, background:'transparent', border:'none', justifyContent:'center', gap:3, background:'transparent', border:'none',
cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}> cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
{isApps && hexWarsTurns>0 && ( {isApps && (hexWarsTurns>0 || unreadMsgs>0) && (
<span style={{ position:'absolute', top:2, right:2, width:7, height:7,
borderRadius:'50%', background:'#ff6b9d', boxShadow:'0 0 4px #ff6b9d' }}/>
)}
{isApps && unreadMsgs>0 && (
<span style={{ position:'absolute', top:6, right:'calc(50% - 16px)', <span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
width:8, height:8, borderRadius:'50%', background:'#4ecdc4', width:8, height:8, borderRadius:'50%', background:'#4ecdc4',
boxShadow:'0 0 6px #4ecdc4', display:'inline-block' }} /> boxShadow:'0 0 6px #4ecdc4', display:'inline-block' }} />