Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-22 08:57:20 -06:00
Code Issues Packages 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 />
</>
)}
<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
isChecked={currentCameras == undefined}
label="All Cameras"
@ -571,7 +571,7 @@ export function GeneralFilterContent({
}: GeneralFilterContentProps) {
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">
<Label
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 { 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

@ -21,16 +21,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,
});
@ -71,7 +74,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">