Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

UI tweaks for screen sizes (#11155)

Browse Source 
* Make bottom bar items easier to tap

* Set max height on list of cameras and labels

* remove incorrect character

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen 2024-04-29 09:59:27 -06:00 committed by GitHub
parent 0c8e155afa
commit 9117043adc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -248,7 +248,7 @@ export function CamerasFilterButton({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
</> </>
)} )}
<div className="h-auto p-4 overflow-y-auto overflow-x-hidden"> <div className="h-auto max-h-[80dvh] p-4 overflow-y-auto overflow-x-hidden">
<FilterSwitch <FilterSwitch
isChecked={currentCameras == undefined} isChecked={currentCameras == undefined}
label="All Cameras" label="All Cameras"
@ -571,7 +571,7 @@ export function GeneralFilterContent({
}: GeneralFilterContentProps) { }: GeneralFilterContentProps) {
return ( return (
<> <>
<div className="h-auto overflow-y-auto overflow-x-hidden"> <div className="h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
<div className="flex justify-between items-center my-2.5"> <div className="flex justify-between items-center my-2.5">
<Label <Label
className="mx-2 text-primary cursor-pointer" className="mx-2 text-primary cursor-pointer"

7
web/src/components/menu/AccountSettings.tsx
View File

@ -6,12 +6,15 @@ import {
import { isDesktop } from "react-device-detect"; import { isDesktop } from "react-device-detect";
import { VscAccount } from "react-icons/vsc"; import { VscAccount } from "react-icons/vsc";
export default function AccountSettings() { type AccountSettingsProps = {
className?: string;
};
export default function AccountSettings({ className }: AccountSettingsProps) {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`} className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"} ${className ?? ""}`}
> >
<VscAccount className="size-5 md:m-[6px]" /> <VscAccount className="size-5 md:m-[6px]" />
</div> </div>

4
web/src/components/menu/GeneralSettings.tsx
View File

@ -66,10 +66,10 @@ import {
DialogTrigger, DialogTrigger,
} from "../ui/dialog"; } from "../ui/dialog";
type GeneralSettings = { type GeneralSettingsProps = {
className?: string; className?: string;
}; };
export default function GeneralSettings({ className }: GeneralSettings) { export default function GeneralSettings({ className }: GeneralSettingsProps) {
const { theme, colorScheme, setTheme, setColorScheme } = useTheme(); const { theme, colorScheme, setTheme, setColorScheme } = useTheme();
const [restartDialogOpen, setRestartDialogOpen] = useState(false); const [restartDialogOpen, setRestartDialogOpen] = useState(false);
const [restartingSheetOpen, setRestartingSheetOpen] = useState(false); const [restartingSheetOpen, setRestartingSheetOpen] = useState(false);

17
web/src/components/navigation/Bottombar.tsx
View File

@ -21,16 +21,19 @@ function Bottombar() {
return ( return (
<div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between"> <div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
{navItems.map((item) => ( {navItems.map((item) => (
<NavItem key={item.id} item={item} Icon={item.icon} /> <NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
))} ))}
<GeneralSettings /> <GeneralSettings className="p-2" />
<AccountSettings /> <AccountSettings className="p-2" />
<StatusAlertNav /> <StatusAlertNav className="p-2" />
</div> </div>
); );
} }
function StatusAlertNav() { type StatusAlertNavProps = {
className?: string;
};
function StatusAlertNav({ className }: StatusAlertNavProps) {
const { data: initialStats } = useSWR<FrigateStats>("stats", { const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false, revalidateOnFocus: false,
}); });
@ -71,7 +74,9 @@ function StatusAlertNav() {
<DrawerTrigger> <DrawerTrigger>
<IoIosWarning className="size-5 text-danger" /> <IoIosWarning className="size-5 text-danger" />
</DrawerTrigger> </DrawerTrigger>
<DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden"> <DrawerContent
className={`max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden ${className ?? ""}`}
>
<div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2"> <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
{Object.entries(messages).map(([key, messageArray]) => ( {Object.entries(messages).map(([key, messageArray]) => (
<div key={key} className="w-full flex items-center gap-2"> <div key={key} className="w-full flex items-center gap-2">