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

Dateien nach "frontend/src" hochladen

Browse Source
This commit is contained in:
Dicken
2026-05-26 14:21:16 +02:00
parent cc407f38fb
commit a0687ebb6e
2 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/App.jsx
View File

@@ -39,12 +39,16 @@ function Toast({ msg, type }) {
function Modal({ title, onClose, children }) {
return (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', zIndex:5000,
display:'flex', alignItems:'flex-end', justifyContent:'center' }}
display:'flex',
alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
onClick={e=>e.target===e.currentTarget&&onClose()}>
<div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.1)',
borderRadius:'16px 16px 0 0', padding:'20px 20px 40px', width:'100%',
maxWidth:600, maxHeight:'85vh', overflowY:'auto' }}>
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/>
<div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
padding:'20px 20px 40px', width:'100%',
maxWidth:600, maxHeight:'85vh', overflowY:'auto',
boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}>
{window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.2)', borderRadius:2, margin:'0 auto 20px' }}/>}
<div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18 }}>
<span style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:14, fontWeight:700 }}>{title}</span>
<button onClick={onClose} style={{ background:'transparent', border:'none', color:'rgba(255,255,255,0.4)', fontSize:20, cursor:'pointer', padding:'0 4px' }}>✕</button>
@@ -291,7 +295,22 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
);
};
const Sheet = ({open, onClose, children}) => !open ? null : (
const Sheet = ({open, onClose, children}) => {
if (!open) return null;
const isDesktop = window.innerWidth >= 768;
if (isDesktop) return (
<div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)',
display:'flex', alignItems:'center', justifyContent:'center', padding:24 }}
onClick={onClose}>
<div style={{ background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.15)',
borderRadius:16, padding:'20px 0', width:'100%', maxWidth:380,
boxShadow:'0 24px 80px rgba(0,0,0,0.6)' }}
onClick={e=>e.stopPropagation()}>
{children}
</div>
</div>
);
return (
<div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
onClick={onClose}>
<div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
@@ -305,6 +324,7 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
</div>
</div>
);
};
const mainNav = [
{ id:'dashboard', Icon:HomeIcon, label:'Home' },

16
frontend/src/confirm.jsx
View File

@@ -19,14 +19,18 @@ export function useConfirm() {
const ConfirmDialog = () => !state.open ? null : (
<div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.75)',
zIndex:9000, display:'flex', alignItems:'flex-end', justifyContent:'center' }}
zIndex:9000, display:'flex',
alignItems: window.innerWidth>=768 ? 'center' : 'flex-end',
justifyContent:'center', padding: window.innerWidth>=768 ? 24 : 0 }}
onClick={() => handle(false)}>
<div style={{ background:'#1a1a1e', borderRadius:'16px 16px 0 0', width:'100%',
maxWidth:500, padding:'20px 20px 32px',
border:'1px solid rgba(255,255,255,0.1)' }}
<div style={{ background:'#1a1a1e',
borderRadius: window.innerWidth>=768 ? 16 : '16px 16px 0 0',
width:'100%', maxWidth:500, padding:'20px 20px 32px',
border:'1px solid rgba(255,255,255,0.15)',
boxShadow: window.innerWidth>=768 ? '0 24px 80px rgba(0,0,0,0.6)' : 'none' }}
onClick={e => e.stopPropagation()}>
<div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
borderRadius:2, margin:'0 auto 18px' }}/>
{window.innerWidth < 768 && <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)',
borderRadius:2, margin:'0 auto 18px' }}/>}
<p style={{ color:'#fff', fontFamily:'monospace', fontSize:14,
textAlign:'center', marginBottom:20, lineHeight:1.6 }}>{state.msg}</p>
<div style={{ display:'flex', gap:10 }}>