jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Fix toolbar on mobile

Browse Source
This commit is contained in:
James Ketr 2025-04-18 16:43:35 -07:00
parent 6eaad89b1a
commit 6a2fe196e6
3 changed files with 71 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/App.css
View File

@ -4,6 +4,11 @@ div {
word-break: break-word; word-break: break-word;
} }
button {
overflow-wrap: initial;
word-break: initial;
}
.TabPanel { .TabPanel {
display: flex; display: flex;
height: 100%; height: 100%;

110
frontend/src/App.tsx
View File

@ -344,7 +344,7 @@ const App = () => {
const [resume, setResume] = useState<MessageData | undefined>(undefined); const [resume, setResume] = useState<MessageData | undefined>(undefined);
const [facts, setFacts] = useState<MessageData | undefined>(undefined); const [facts, setFacts] = useState<MessageData | undefined>(undefined);
const timerRef = useRef<any>(null); const timerRef = useRef<any>(null);
const isDesktop = useMediaQuery('(min-width:600px)'); const isDesktop = useMediaQuery('(min-width:650px)');
const prevIsDesktopRef = useRef<boolean>(isDesktop); const prevIsDesktopRef = useRef<boolean>(isDesktop);
const startCountdown = (seconds: number) => { const startCountdown = (seconds: number) => {
@ -1113,24 +1113,39 @@ const App = () => {
}} }}
> >
<Toolbar> <Toolbar>
{ <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
<Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}> {!isDesktop &&
{ <Box sx={{ display: "flex", flexGrow: 1, flexDirection: "row" }}>
!isDesktop && <IconButton
<IconButton sx={{ display: "flex", margin: 'auto 0px' }}
sx={{ display: "flex", margin: 'auto 0px' }} size="large"
size="large" edge="start"
edge="start" color="inherit"
color="inherit" onClick={handleMenuToggle}
onClick={handleMenuToggle} >
<Tooltip title="Navigation">
<MenuIcon />
</Tooltip>
</IconButton>
<Tooltip title="Backstory">
<Box
sx={{ m: 1, gap: 1, display: "flex", flexDirection: "row", alignItems: "center", fontWeight: "bold", fontSize: "1.0rem", cursor: "pointer" }}
onClick={() => { setTab(0); setMenuOpen(false); }}
> >
<Tooltip title="Navigation"> <Avatar sx={{
<MenuIcon /> width: 24,
</Tooltip> height: 24
</IconButton> }}
} variant="rounded"
alt="Backstory logo"
src="/logo192.png" />
BACKSTORY
</Box>
</Tooltip>
</Box>
}
{ menuOpen === false && {menuOpen === false && isDesktop &&
<Tabs sx={{ display: "flex", flexGrow: 1 }} <Tabs sx={{ display: "flex", flexGrow: 1 }}
value={tab} value={tab}
indicatorColor="secondary" indicatorColor="secondary"
@ -1139,42 +1154,37 @@ const App = () => {
allowScrollButtonsMobile allowScrollButtonsMobile
onChange={handleTabChange} onChange={handleTabChange}
aria-label="Backstory navigation"> aria-label="Backstory navigation">
<Tab sx={{ fontSize: '1rem' }} label="Backstory" <Tab sx={{ fontSize: '1rem' }} label="Backstory"
value={0} value={0}
icon={ icon={
<Avatar sx={{ <Avatar sx={{
width: 24, width: 24,
height: 24 height: 24
}} }}
variant="rounded" variant="rounded"
alt="Backstory logo" alt="Backstory logo"
src="/logo192.png" /> src="/logo192.png" />
}
iconPosition="start" />
{ isDesktop &&
<Tab
value={1}
sx={{ fontSize: '1rem' }} wrapped
label="Resume Builder"
/>
} }
{isDesktop && iconPosition="start" />
<Tab <Tab
value={2} value={1}
sx={{ fontSize: '1rem' }} wrapped sx={{ fontSize: '1rem' }} wrapped
label="Context Visualizer" label="Resume Builder"
/> />
} <Tab
<Tab value={2}
value={3} sx={{ fontSize: '1rem' }} wrapped
sx={{ fontSize: '1rem' }} label="About" /> label="Context Visualizer"
<Tab />
value={4} <Tab
sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />}/> value={3}
sx={{ fontSize: '1rem' }} label="About" />
<Tab
value={4}
sx={{ flexShrink: 1, flexGrow: 0, fontSize: '1rem' }} icon={<SettingsIcon />} />
</Tabs> </Tabs>
} }
</Box> </Box>
}
</Toolbar> </Toolbar>
</AppBar> </AppBar>

6
frontend/src/DocumentViewer.tsx
View File

@ -303,9 +303,9 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({
variant="fullWidth" variant="fullWidth"
sx={{ bgcolor: 'background.paper' }} sx={{ bgcolor: 'background.paper' }}
> >
<Tab label="Job Description" /> <Tab value={0} label="Job Description" />
{(resume !== undefined || processing === "resume") && <Tab label="Resume" />} {(resume !== undefined || processing === "resume") && <Tab value={1} label="Resume" />}
{(facts !== undefined || processing === "facts") && <Tab label="Fact Check" />} {(facts !== undefined || processing === "facts") && <Tab value={2} label="Fact Check" />}
</Tabs> </Tabs>
{/* Document display area */} {/* Document display area */}