administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-15 15:45:27 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix double scrollbars and add separators on mobile too

Browse Source
This commit is contained in:
Josh Hawkins 2024-10-15 19:21:58 -05:00
parent a894cd650e
commit 4fb807afc1
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/overlay/dialog/SearchFilterDialog.tsx
View File

@ -16,7 +16,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { isDesktop, isMobile, isMobileOnly } from "react-device-detect"; import { isDesktop, isMobileOnly } from "react-device-detect";
import { useFormattedHour } from "@/hooks/use-date-utils"; import { useFormattedHour } from "@/hooks/use-date-utils";
import Heading from "@/components/ui/heading"; import Heading from "@/components/ui/heading";
import FilterSwitch from "@/components/filter/FilterSwitch"; import FilterSwitch from "@/components/filter/FilterSwitch";
@ -58,7 +58,7 @@ export default function SearchFilterDialog({
</Button> </Button>
); );
const content = ( const content = (
<> <div className="space-y-3">
<TimeRangeFilterContent <TimeRangeFilterContent
config={config} config={config}
timeRange={currentFilter.time_range} timeRange={currentFilter.time_range}
@ -110,7 +110,7 @@ export default function SearchFilterDialog({
Reset Reset
</Button> </Button>
</div> </div>
</> </div>
); );
return ( return (
@ -183,9 +183,9 @@ function TimeRangeFilterContent({
}, [selectedAfterHour, selectedBeforeHour]); }, [selectedAfterHour, selectedBeforeHour]);
return ( return (
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden"> <div className="overflow-x-hidden">
<Heading as="h4">Time Range</Heading> <Heading as="h4">Time Range</Heading>
<div className="my-5 flex flex-row items-center justify-center gap-2"> <div className="my-3 flex flex-row items-center justify-center gap-2">
<Popover <Popover
open={startOpen} open={startOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
@ -278,8 +278,8 @@ export function ZoneFilterContent({
}: ZoneFilterContentProps) { }: ZoneFilterContentProps) {
return ( return (
<> <>
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden"> <div className="overflow-x-hidden">
{isDesktop && <DropdownMenuSeparator className="mb-2" />} <DropdownMenuSeparator className="mb-3" />
<Heading as="h4">Zones</Heading> <Heading as="h4">Zones</Heading>
{allZones && ( {allZones && (
<> <>
@ -344,8 +344,8 @@ export function SubFilterContent({
setSubLabels, setSubLabels,
}: SubFilterContentProps) { }: SubFilterContentProps) {
return ( return (
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden"> <div className="overflow-x-hidden">
{isDesktop && <DropdownMenuSeparator className="mb-2" />} <DropdownMenuSeparator className="mb-3" />
<Heading as="h4">Sub Labels</Heading> <Heading as="h4">Sub Labels</Heading>
<div className="mb-5 mt-2.5 flex items-center justify-between"> <div className="mb-5 mt-2.5 flex items-center justify-between">
<Label className="mx-2 cursor-pointer text-primary" htmlFor="allLabels"> <Label className="mx-2 cursor-pointer text-primary" htmlFor="allLabels">
@ -401,8 +401,8 @@ export function SearchTypeContent({
}: SearchTypeContentProps) { }: SearchTypeContentProps) {
return ( return (
<> <>
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden"> <div className="overflow-x-hidden">
{isDesktop && <DropdownMenuSeparator className="mb-2" />} <DropdownMenuSeparator className="mb-3" />
<Heading as="h4">Search Sources</Heading> <Heading as="h4">Search Sources</Heading>
<div className="my-2.5 flex flex-col gap-2.5"> <div className="my-2.5 flex flex-col gap-2.5">
<FilterSwitch <FilterSwitch