administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 21:25:24 +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>
</a>
</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>
<DropdownMenuSeparator />
<DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
<Link to="/storage">
<MenuItem
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" />
@ -142,7 +149,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/system">
<MenuItem
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" />
@ -152,7 +161,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/logs">
<MenuItem
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" />
@ -160,7 +171,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem>
</Link>
</DropdownMenuGroup>
<DropdownMenuLabel className="mt-3">
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Configuration
</DropdownMenuLabel>
<DropdownMenuSeparator />
@ -168,7 +179,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/settings">
<MenuItem
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" />
@ -178,19 +191,25 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<Link to="/config">
<MenuItem
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" />
<span>Configuration editor</span>
</MenuItem>
</Link>
<DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Appearance
</DropdownMenuLabel>
<DropdownMenuSeparator />
<SubItem>
<SubItemTrigger
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" />
@ -200,7 +219,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<SubItemContent>
<MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
}
onClick={() => setTheme("light")}
>
@ -215,7 +236,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem>
<MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
}
onClick={() => setTheme("dark")}
>
@ -230,7 +253,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</MenuItem>
<MenuItem
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
}
onClick={() => setTheme("system")}
>
@ -249,7 +274,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<SubItem>
<SubItemTrigger
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" />
@ -261,7 +288,9 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<MenuItem
key={scheme}
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center"
isDesktop
? "cursor-pointer"
: "p-2 flex items-center text-sm"
}
onClick={() => setColorScheme(scheme)}
>
@ -281,12 +310,16 @@ export default function GeneralSettings({ className }: GeneralSettings) {
</Portal>
</SubItem>
</DropdownMenuGroup>
<DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
<DropdownMenuLabel className={isDesktop ? "mt-3" : "mt-1"}>
Help
</DropdownMenuLabel>
<DropdownMenuSeparator />
<a href="https://docs.frigate.video">
<MenuItem
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" />
@ -296,21 +329,26 @@ export default function GeneralSettings({ className }: GeneralSettings) {
<a href="https://github.com/blakeblackshear/frigate">
<MenuItem
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" />
<span>GitHub</span>
</MenuItem>
</a>
<DropdownMenuSeparator className="mt-3" />
<DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
<MenuItem
className={isDesktop ? "cursor-pointer" : "p-2 flex items-center"}
className={
isDesktop ? "cursor-pointer" : "p-2 flex items-center text-sm"
}
onClick={() => setRestartDialogOpen(true)}
>
<LuRotateCw className="mr-2 size-4" />
<span>Restart Frigate</span>
</MenuItem>
</div>
</Content>
</Container>
</div>