administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix sizing on mobile and make scrollable

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-01 08:29:40 -06:00
parent 2fb9c94895
commit 44dc274291
1 changed files with 209 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
web/src/components/settings/GeneralSettings.tsx
View File

@ -125,14 +125,21 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</Tooltip> </Tooltip>
</a> </a>
</Trigger> </Trigger>
<Content className={isDesktop ? "w-72 mr-5" : "max-h-[75dvh]"}> <Content
className={
isDesktop ? "w-72 mr-5" : "max-h-[75dvh] p-2 overflow-hidden"
}
>
<div className="w-full flex-col overflow-y-auto overflow-x-hidden">
<DropdownMenuLabel>System</DropdownMenuLabel> <DropdownMenuLabel>System</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}> <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/storage"> <Link to="/storage">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuHardDrive className="mr-2 size-4" /> <LuHardDrive className="mr-2 size-4" />
@ -142,7 +149,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/system"> <Link to="/system">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuActivity className="mr-2 size-4" /> <LuActivity className="mr-2 size-4" />
@ -152,7 +161,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/logs"> <Link to="/logs">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuList className="mr-2 size-4" /> <LuList className="mr-2 size-4" />
@ -160,7 +171,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem> </MenuItem>
</Link> </Link>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuLabel className="mt-3"> <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Configuration Configuration
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -168,7 +179,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/settings"> <Link to="/settings">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuSettings className="mr-2 size-4" /> <LuSettings className="mr-2 size-4" />
@ -178,19 +191,25 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/config"> <Link to="/config">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuPenSquare className="mr-2 size-4" /> <LuPenSquare className="mr-2 size-4" />
<span>Configuration editor</span> <span>Configuration editor</span>
</MenuItem> </MenuItem>
</Link> </Link>
<DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel> <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Appearance
</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<SubItem> <SubItem>
<SubItemTrigger <SubItemTrigger
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuSunMoon className="mr-2 size-4" /> <LuSunMoon className="mr-2 size-4" />
@ -200,7 +219,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<SubItemContent> <SubItemContent>
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
onClick={() => setTheme("light")} onClick={() => setTheme("light")}
> >
@ -215,7 +236,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem> </MenuItem>
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
onClick={() => setTheme("dark")} onClick={() => setTheme("dark")}
> >
@ -230,7 +253,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem> </MenuItem>
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
onClick={() => setTheme("system")} onClick={() => setTheme("system")}
> >
@ -249,7 +274,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<SubItem> <SubItem>
<SubItemTrigger <SubItemTrigger
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuSunMoon className="mr-2 size-4" /> <LuSunMoon className="mr-2 size-4" />
@ -261,7 +288,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<MenuItem <MenuItem
key={scheme} key={scheme}
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
onClick={() => setColorScheme(scheme)} onClick={() => setColorScheme(scheme)}
> >
@ -281,12 +310,16 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</Portal> </Portal>
</SubItem> </SubItem>
</DropdownMenuGroup> </DropdownMenuGroup>
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel> <DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Help
</DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<a href="https://docs.frigate.video"> <a href="https://docs.frigate.video">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuLifeBuoy className="mr-2 size-4" /> <LuLifeBuoy className="mr-2 size-4" />
@ -296,21 +329,26 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<a href="https://github.com/blakeblackshear/frigate"> <a href="https://github.com/blakeblackshear/frigate">
<MenuItem <MenuItem
className={ className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center" isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
} }
> >
<LuGithub className="mr-2 size-4" /> <LuGithub className="mr-2 size-4" />
<span>GitHub</span> <span>GitHub</span>
</MenuItem> </MenuItem>
</a> </a>
<DropdownMenuSeparator className="mt-3" /> <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem <MenuItem
className={isDesktop ? "cursor-pointer" : "p-2 flex items-center"} className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center text-sm"
}
onClick={() => setRestartDialogOpen(true)} onClick={() => setRestartDialogOpen(true)}
> >
<LuRotateCw className="mr-2 size-4" /> <LuRotateCw className="mr-2 size-4" />
<span>Restart Frigate</span> <span>Restart Frigate</span>
</MenuItem> </MenuItem>
</div>
</Content> </Content>
</Container> </Container>
</div> </div>