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

Show text on tablets as well

Browse Source
This commit is contained in:
Nicolas Mowen 2024-06-13 08:35:20 -06:00
parent 17bfd6e8e7
commit 13c8e66cb6
1 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web/src/views/events/EventView.tsx
View File

@ -29,7 +29,7 @@ import {
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { isDesktop, isMobile } from "react-device-detect"; import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
import { LuFolderCheck, LuFolderX } from "react-icons/lu"; import { LuFolderCheck, LuFolderX } from "react-icons/lu";
import { MdCircle } from "react-icons/md"; import { MdCircle } from "react-icons/md";
import useSWR from "swr"; import useSWR from "swr";
@ -248,19 +248,7 @@ export default function EventView({
value="alert" value="alert"
aria-label="Select alerts" aria-label="Select alerts"
> >
{isDesktop ? ( {isMobileOnly ? (
<>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Alerts
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
) : (
<div <div
className={cn( className={cn(
"flex size-6 items-center justify-center rounded text-severity_alert", "flex size-6 items-center justify-center rounded text-severity_alert",
@ -273,6 +261,18 @@ export default function EventView({
<ActivityIndicator className="size-4" /> <ActivityIndicator className="size-4" />
)} )}
</div> </div>
) : (
<>
<MdCircle className="size-2 text-severity_alert md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Alerts
{reviewCounts.alert > -1 ? (
` ∙ ${reviewCounts.alert}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)} )}
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
@ -282,19 +282,7 @@ export default function EventView({
value="detection" value="detection"
aria-label="Select detections" aria-label="Select detections"
> >
{isDesktop ? ( {isMobileOnly ? (
<>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Detections
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
) : (
<div <div
className={cn( className={cn(
"flex size-6 items-center justify-center rounded text-severity_detection", "flex size-6 items-center justify-center rounded text-severity_detection",
@ -309,6 +297,18 @@ export default function EventView({
<ActivityIndicator className="size-4" /> <ActivityIndicator className="size-4" />
)} )}
</div> </div>
) : (
<>
<MdCircle className="size-2 text-severity_detection md:mr-[10px]" />
<div className="hidden md:flex md:flex-row md:items-center">
Detections
{reviewCounts.detection > -1 ? (
` ∙ ${reviewCounts.detection}`
) : (
<ActivityIndicator className="ml-2 size-4" />
)}
</div>
</>
)} )}
</ToggleGroupItem> </ToggleGroupItem>
<ToggleGroupItem <ToggleGroupItem
@ -319,13 +319,13 @@ export default function EventView({
value="significant_motion" value="significant_motion"
aria-label="Select motion" aria-label="Select motion"
> >
{isDesktop ? ( {isMobileOnly ? (
<GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" />
) : (
<> <>
<MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" /> <MdCircle className="size-2 text-severity_significant_motion md:mr-[10px]" />
<div className="hidden md:block">Motion</div> <div className="hidden md:block">Motion</div>
</> </>
) : (
<GiSoundWaves className="size-6 rotate-90 text-severity_significant_motion" />
)} )}
</ToggleGroupItem> </ToggleGroupItem>
</ToggleGroup> </ToggleGroup>