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

DevTools Mobile: Pfeil-Buttons statt Gradient-Fades, kein Chip-Clipping

Browse Source
This commit is contained in:
Dicken
2026-06-05 01:35:23 +02:00
parent eea77f30da
commit e9e639b654
1 changed files with 36 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3117,12 +3117,19 @@ export default function DevTools({ toast, mobile }) {
<span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span> <span style={{color:'rgba(255,255,255,0.5)',fontFamily:'monospace',fontSize:10}}>Konverter · Formatter · Helfer</span>
</div> </div>
{/* Tool-Auswahl: Mobile = horizontal scroll mit Fade-Hint, Desktop = 2-Spalten-Grid */} {/* Tool-Auswahl: Mobile = horizontal scroll mit Pfeil-Hints, Desktop = 2-Spalten-Grid */}
{mobile ? ( {mobile ? (
<div style={{position:'relative', marginBottom:16}}> <div style={{marginBottom:16}}>
<div style={{display:'flex',alignItems:'center',gap:4}}>
{chipScroll.left && (
<button onClick={()=>{ chipScrollRef.current?.scrollBy({left:-160,behavior:'smooth'}); }}
style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
padding:'6px 8px',fontSize:14,lineHeight:1}}>‹</button>
)}
<div ref={chipScrollRef} onScroll={onChipScroll} <div ref={chipScrollRef} onScroll={onChipScroll}
style={{display:'flex',gap:6,overflowX:'auto', style={{display:'flex',gap:6,overflowX:'auto',flex:1,
padding:'3px 3px 6px 3px', padding:'3px 2px 6px',
scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}> scrollbarWidth:'none',WebkitOverflowScrolling:'touch'}}>
{TOOL_DEFS.map(t=>( {TOOL_DEFS.map(t=>(
<button key={t.id} <button key={t.id}
@@ -3140,25 +3147,15 @@ export default function DevTools({ toast, mobile }) {
<span>{getText(t.label)}</span> <span>{getText(t.label)}</span>
</button> </button>
))} ))}
<div style={{flexShrink:0, width:28}}/>
</div> </div>
{/* Links-Fade — erscheint wenn nach rechts gescrollt */}
{chipScroll.left && (
<div style={{
position:'absolute', left:3, top:3, bottom:6, width:52, pointerEvents:'none',
borderRadius:20,
background:'linear-gradient(to right, #0d0d0f 30%, transparent)',
}}/>
)}
{/* Rechts-Fade — verschwindet wenn am Ende */}
{chipScroll.right && ( {chipScroll.right && (
<div style={{ <button onClick={()=>{ chipScrollRef.current?.scrollBy({left:160,behavior:'smooth'}); }}
position:'absolute', right:3, top:3, bottom:6, width:52, pointerEvents:'none', style={{flexShrink:0,background:'rgba(255,255,255,0.06)',border:'1px solid rgba(255,255,255,0.12)',
borderRadius:20, borderRadius:20,color:'rgba(255,255,255,0.6)',cursor:'pointer',
background:'linear-gradient(to left, #0d0d0f 30%, transparent)', padding:'6px 8px',fontSize:14,lineHeight:1}}>›</button>
}}/>
)} )}
</div> </div>
</div>
) : ( ) : (
<div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}> <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:5,marginBottom:16}}>
{TOOL_DEFS.map(t=>( {TOOL_DEFS.map(t=>(