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

Make bottom bar items easier to tap

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-29 06:37:04 -06:00
parent 8c610bea49
commit 5b8eb9691f
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,12 +6,15 @@ import {
import { isDesktop } from "react-device-detect";
import { VscAccount } from "react-icons/vsc";
export default function AccountSettings() {
type AccountSettingsProps = {
className?: string;
};
export default function AccountSettings({ className }: AccountSettingsProps) {
return (
<Tooltip>
<TooltipTrigger asChild>
<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]" />
</div>

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

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

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

@ -20,16 +20,19 @@ function Bottombar() {
return (
<div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
{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 />
<AccountSettings />
<StatusAlertNav />
<GeneralSettings className="p-2" />
<AccountSettings className="p-2" />
<StatusAlertNav className="p-2" />
</div>
);
}
function StatusAlertNav() {
type StatusAlertNavProps = {
className?: string;
};
function StatusAlertNav({ className }: StatusAlertNavProps) {
const { data: initialStats } = useSWR<FrigateStats>("stats", {
revalidateOnFocus: false,
});
@ -64,7 +67,9 @@ function StatusAlertNav() {
<DrawerTrigger>
<IoIosWarning className="size-5 text-danger" />
</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">
{Object.entries(messages).map(([key, messageArray]) => (
<div key={key} className="w-full flex items-center gap-2">