UI tweaks for screen sizes (blakeblackshear#11155)

* Make bottom bar items easier to tap * Set max height on list of cameras and labels * remove incorrect character Co-authored-by: Josh Hawkins <[email protected]> --------- Co-authored-by: Josh Hawkins <[email protected]>
guxiaoqi2007 · Apr 29, 2024 · 9117043 · 9117043
1 parent 0c8e155
commit 9117043
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -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"

diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
@@ -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>

diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
@@ -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);

diff --git a/web/src/components/navigation/Bottombar.tsx b/web/src/components/navigation/Bottombar.tsx
@@ -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">