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

DevTools Mobile: horizontale scroll-Chips statt 2-Spalten-Grid

Browse Source
This commit is contained in:
Dicken
2026-06-05 01:13:32 +02:00
parent ceb21a7c1f
commit 6f8d1559d9
1 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/tools/devtools.jsx
View File

@@ -3106,33 +3106,55 @@ export default function DevTools({ toast, mobile }) {
<span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
</div>
{/* Tool-Auswahl: 2-spaltiges Grid */}
<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>
{TOOL_DEFS.map(t=>(
<button key={t.id} title={t.desc}
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
style={{
display:'flex', alignItems:'center', gap:9,
padding:'8px 11px', borderRadius:9, fontFamily:'monospace',
cursor:t.ready?'pointer':'default', textAlign:'left', border:'none',
background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : t.ready ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
}}>
<span style={{fontSize:17,flexShrink:0,lineHeight:1,minWidth:22,textAlign:'center'}}>{getIcon(t.label)}</span>
<div style={{minWidth:0,flex:1}}>
<div style={{
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.3)',
fontSize:12, fontWeight: activeTool===t.id?700:500,
overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
{getText(t.label)}
{/* Tool-Auswahl: Mobile = horizontal scroll, Desktop = 2-Spalten-Grid */}
{mobile ? (
<div style={{display:'flex',gap:6,overflowX:'auto',marginBottom:16,
paddingBottom:4,scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
{TOOL_DEFS.map(t=>(
<button key={t.id}
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
style={{
display:'flex', alignItems:'center', gap:6, flexShrink:0,
padding:'7px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
cursor:t.ready?'pointer':'default', whiteSpace:'nowrap', border:'none',
background: activeTool===t.id ? 'rgba(78,205,196,0.2)' : 'rgba(255,255,255,0.06)',
outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.75)' : 'rgba(255,255,255,0.3)',
fontWeight: activeTool===t.id ? 700 : 400,
}}>
<span style={{fontSize:15}}>{getIcon(t.label)}</span>
<span>{getText(t.label)}</span>
</button>
))}
</div>
) : (
<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>
{TOOL_DEFS.map(t=>(
<button key={t.id} title={t.desc}
onClick={()=>{ if(t.ready){setActiveTool(t.id);setActiveTab(t.tabs?.[0]?.id||'');} else toast('Kommt bald 🚧'); }}
style={{
display:'flex', alignItems:'center', gap:9,
padding:'8px 11px', borderRadius:9, fontFamily:'monospace',
cursor:t.ready?'pointer':'default', textAlign:'left', border:'none',
background: activeTool===t.id ? 'rgba(78,205,196,0.15)' : t.ready ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
outline: activeTool===t.id ? '1px solid #4ecdc4' : 'none',
}}>
<span style={{fontSize:17,flexShrink:0,lineHeight:1,minWidth:22,textAlign:'center'}}>{getIcon(t.label)}</span>
<div style={{minWidth:0,flex:1}}>
<div style={{
color: activeTool===t.id ? '#4ecdc4' : t.ready ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.3)',
fontSize:12, fontWeight: activeTool===t.id?700:500,
overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>
{getText(t.label)}
</div>
<div style={{color:'rgba(255,255,255,0.28)',fontSize:9,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:1}}>
{t.desc}
</div>
</div>
<div style={{color:'rgba(255,255,255,0.28)',fontSize:9,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginTop:1}}>
{t.desc}
</div>
</div>
</button>
))}
</div>
</button>
))}
</div>
)}
<div style={{...S.card}}>
<div style={{display:'flex',alignItems:'center',gap:10,marginBottom:14,flexWrap:'wrap'}}>