administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix top menu items on mobile

Browse Source
This commit is contained in:
Josh Hawkins 2024-04-18 23:47:16 -05:00
parent 1940371250
commit 4e60176f8b
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/settings/MotionTuner.tsx
View File

@ -78,7 +78,7 @@ export default function MotionTuner({
} }
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, [selectedCamera]);
useEffect(() => { useEffect(() => {
if (!motionSettings.threshold) return; if (!motionSettings.threshold) return;

48
web/src/pages/Settings.tsx
View File

@ -86,32 +86,34 @@ export default function Settings() {
return ( return (
<div className="size-full p-2 flex flex-col"> <div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center"> <div className="w-full h-11 relative flex justify-between items-center">
<ToggleGroup <div className="flex flex-row overflow-x-auto">
className="*:px-3 *:py-4 *:rounded-md" <ToggleGroup
type="single" className="*:px-3 *:py-4 *:rounded-md flex-shrink-0"
size="sm" type="single"
value={pageToggle} size="sm"
onValueChange={(value: SettingsType) => { value={pageToggle}
if (value) { onValueChange={(value: SettingsType) => {
setPageToggle(value); if (value) {
} setPageToggle(value);
}} }
> }}
{Object.values(settingsViews).map((item) => ( >
<ToggleGroupItem {Object.values(settingsViews).map((item) => (
key={item} <ToggleGroupItem
className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`} key={item}
value={item} className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
aria-label={`Select ${item}`} value={item}
> aria-label={`Select ${item}`}
<div className="capitalize">{item}</div> >
</ToggleGroupItem> <div className="capitalize">{item}</div>
))} </ToggleGroupItem>
</ToggleGroup> ))}
</ToggleGroup>
</div>
{(page == "objects" || {(page == "objects" ||
page == "masks / zones" || page == "masks / zones" ||
page == "motion tuner") && ( page == "motion tuner") && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 ml-2 flex-shrink-0">
{page == "masks / zones" && ( {page == "masks / zones" && (
<ZoneMaskFilterButton <ZoneMaskFilterButton
selectedZoneMask={filterZoneMask} selectedZoneMask={filterZoneMask}