rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.9.69 updated UI layout and styles

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-18 11:33:14 -04:00
parent efaec151c6
commit 19932d9ca8
6 changed files with 73 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/SchedulePage.jsx
View File

@@ -1003,7 +1003,7 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="6 9 12 15 18 9"/></svg>
</button>
{createOpen && (
<div style={{ position:'absolute', top:'100%', left:0, right:0, zIndex:100, background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--radius)', marginTop:4, boxShadow:'0 4px 16px rgba(0,0,0,0.12)' }}>
<div style={{ position:'absolute', top:'100%', left:0, right:0, zIndex:100, background:'var(--surface-variant)', border:'1px solid var(--border)', borderRadius:'var(--radius)', marginTop:4, boxShadow:'0 4px 16px rgba(0,0,0,0.18)' }}>
{[['Event', ()=>{setPanel('eventForm');setEditingEvent(null);setCreateOpen(false);}],
['Event Type', ()=>{setPanel('eventTypes');setCreateOpen(false);}],
['Bulk Event Import', ()=>{setPanel('bulkImport');setCreateOpen(false);}]
@@ -1063,11 +1063,7 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
<div style={{ display:'flex', alignItems:'center', gap:8, padding:'8px 16px', borderBottom:'1px solid var(--border)', background:'var(--surface)', flexShrink:0, flexWrap:'nowrap' }}>
{/* Mobile title + create */}
{isMobile && (
<>
<span style={{ fontSize:15, fontWeight:700, flex:1 }}>Team Schedule</span>
{/* User footer trigger on mobile — compact avatar button */}
<UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} mobileCompact={true} />
</>
<span style={{ fontSize:15, fontWeight:700, flex:1 }}>Team Schedule</span>
)}
{!isMobile && (
@@ -1172,13 +1168,31 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
</div>
)}
{/* Mobile FAB for creating events */}
{isMobile && isToolManager && panel === 'calendar' && (
<button onClick={()=>{setPanel('eventForm');setEditingEvent(null);}} style={{ position:'fixed',bottom:24,right:24,zIndex:30,width:56,height:56,borderRadius:'50%',background:'var(--primary)',color:'white',border:'none',cursor:'pointer',boxShadow:'0 4px 16px rgba(0,0,0,0.25)',display:'flex',alignItems:'center',justifyContent:'center' }}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" width="24" height="24">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
{/* Mobile bottom bar: UserFooter + Create Event button */}
{isMobile && (
<div style={{ background:'var(--surface)', borderTop:'1px solid var(--border)', flexShrink:0 }}>
{isToolManager && panel === 'calendar' && (
<div style={{ padding:'10px 16px 4px', position:'relative' }} ref={createRef}>
<button className="newchat-btn" onClick={() => setCreateOpen(v=>!v)} style={{ width:'100%', justifyContent:'center', gap:8 }}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="18" height="18">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
Create Event
</button>
{createOpen && (
<div style={{ position:'absolute', bottom:'100%', left:16, right:16, zIndex:100, background:'var(--surface-variant)', border:'1px solid var(--border)', borderRadius:'var(--radius)', marginBottom:4, boxShadow:'0 -4px 16px rgba(0,0,0,0.15)' }}>
{[['Event', ()=>{setPanel('eventForm');setEditingEvent(null);setCreateOpen(false);}],
['Event Type', ()=>{setPanel('eventTypes');setCreateOpen(false);}],
].map(([label,action])=>(
<button key={label} onClick={action} style={{display:'block',width:'100%',padding:'12px 16px',textAlign:'left',fontSize:15,background:'none',border:'none',cursor:'pointer',color:'var(--text-primary)',borderBottom:'1px solid var(--border)'}}
onMouseEnter={e=>e.currentTarget.style.background='var(--background)'} onMouseLeave={e=>e.currentTarget.style.background=''}>{label}</button>
))}
</div>
)}
</div>
)}
<UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
</div>
)}
{/* Event detail modal */}