chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages 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
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">