mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Update tailwind css and cleanup classNames (#10107)
* Bump tailwindcss from 3.3.5 to 3.4.1 in /web Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 3.3.5 to 3.4.1. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.4.1) --- updated-dependencies: - dependency-name: tailwindcss dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * Update tailwind css and cleanup --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen
GitHub
parent
7fa9a3df42
commit
9893741990
8
web/package-lock.json
generated
8
web/package-lock.json
generated
@ -90,7 +90,7 @@
|
||||
"msw": "^2.2.1",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.4",
|
||||
"vitest": "^1.3.1"
|
||||
@ -7618,9 +7618,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.3.5",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
|
||||
"integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
|
||||
"version": "3.4.1",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
|
||||
"integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"arg": "^5.0.2",
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
"msw": "^2.2.1",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.2.5",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.1.4",
|
||||
"vitest": "^1.3.1"
|
||||
|
||||
@ -21,13 +21,13 @@ function App() {
|
||||
<Providers>
|
||||
<BrowserRouter>
|
||||
<Wrapper>
|
||||
<div className="w-full h-full pt-2 overflow-hidden">
|
||||
<div className="size-full pt-2 overflow-hidden">
|
||||
{isDesktop && <Sidebar />}
|
||||
{isDesktop && <Statusbar />}
|
||||
{isMobile && <Bottombar />}
|
||||
<div
|
||||
id="pageRoot"
|
||||
className="absolute left-0 md:left-16 top-2 right-0 bottom-16 md:bottom-8 overflow-hidden"
|
||||
className="absolute left-0 top-2 right-0 bottom-16 md:left-16 md:bottom-8 overflow-hidden"
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Live />} />
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
import { useApiHost } from "@/api";
|
||||
import { Card } from "../ui/card";
|
||||
import { Event as FrigateEvent } from "@/types/event";
|
||||
import { LuClock, LuStar } from "react-icons/lu";
|
||||
import { useCallback } from "react";
|
||||
import TimeAgo from "../dynamic/TimeAgo";
|
||||
import { HiOutlineVideoCamera } from "react-icons/hi";
|
||||
import { MdOutlineLocationOn } from "react-icons/md";
|
||||
import axios from "axios";
|
||||
|
||||
type MiniEventCardProps = {
|
||||
event: FrigateEvent;
|
||||
onUpdate?: () => void;
|
||||
};
|
||||
|
||||
export default function MiniEventCard({ event, onUpdate }: MiniEventCardProps) {
|
||||
const baseUrl = useApiHost();
|
||||
const onSave = useCallback(
|
||||
async (e: Event) => {
|
||||
e.stopPropagation();
|
||||
let response;
|
||||
if (!event.retain_indefinitely) {
|
||||
response = await axios.post(`events/${event.id}/retain`);
|
||||
} else {
|
||||
response = await axios.delete(`events/${event.id}/retain`);
|
||||
}
|
||||
if (response.status === 200 && onUpdate) {
|
||||
onUpdate();
|
||||
}
|
||||
},
|
||||
[event]
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="mr-2 min-w-[260px] max-w-[320px]">
|
||||
<div className="flex">
|
||||
<div
|
||||
className="relative rounded-l min-w-[125px] h-[125px] bg-contain bg-no-repeat bg-center"
|
||||
style={{
|
||||
backgroundImage: `url(${baseUrl}api/events/${event.id}/thumbnail.jpg)`,
|
||||
}}
|
||||
>
|
||||
<LuStar
|
||||
className="h-6 w-6 text-yellow-300 absolute top-1 right-1 cursor-pointer"
|
||||
onClick={(e: Event) => onSave(e)}
|
||||
fill={event.retain_indefinitely ? "currentColor" : "none"}
|
||||
/>
|
||||
{event.end_time ? null : (
|
||||
<div className="bg-slate-300 dark:bg-slate-700 absolute bottom-0 text-center w-full uppercase text-sm rounded-bl">
|
||||
In progress
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-1 flex flex-col justify-between">
|
||||
<div className="capitalize text-lg font-bold">
|
||||
{event.label.replaceAll("_", " ")}
|
||||
{event.sub_label
|
||||
? `: ${event.sub_label.replaceAll("_", " ")}`
|
||||
: null}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm flex">
|
||||
<LuClock className="h-4 w-4 mr-2 inline" />
|
||||
<div>
|
||||
<TimeAgo time={event.start_time * 1000} dense />
|
||||
</div>
|
||||
</div>
|
||||
<div className="capitalize text-sm flex align-center mt-1 whitespace-nowrap">
|
||||
<HiOutlineVideoCamera className="h-4 w-4 mr-2 inline" />
|
||||
{event.camera.replaceAll("_", " ")}
|
||||
</div>
|
||||
{event.zones.length ? (
|
||||
<div className="capitalize whitespace-nowrap text-sm flex align-center">
|
||||
<MdOutlineLocationOn className="w-4 h-4 mr-2 inline" />
|
||||
{event.zones.join(", ").replaceAll("_", " ")}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -41,8 +41,8 @@ export function AnimatedEventThumbnail({ event }: AnimatedEventThumbnailProps) {
|
||||
aspectRatio: aspectRatio,
|
||||
}}
|
||||
>
|
||||
<div className="absolute bottom-0 w-full h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
|
||||
<div className="absolute left-1 bottom-0 text-xs text-white w-full">
|
||||
<div className="absolute bottom-0 inset-x-0 h-6 bg-gradient-to-t from-slate-900/50 to-transparent rounded">
|
||||
<div className="w-full absolute left-1 bottom-0 text-xs text-white">
|
||||
<TimeAgo time={event.start_time * 1000} dense />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@ import SettingsNavItems from "../settings/SettingsNavItems";
|
||||
|
||||
function Bottombar() {
|
||||
return (
|
||||
<div className="absolute h-16 left-4 bottom-0 right-4 flex flex-row items-center justify-between">
|
||||
<div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
|
||||
{navbarLinks.map((item) => (
|
||||
<NavItem
|
||||
className=""
|
||||
|
||||
@ -52,7 +52,7 @@ export default function NavItem({
|
||||
}
|
||||
>
|
||||
<TooltipTrigger>
|
||||
<Icon className="w-5 h-5 m-[6px]" />
|
||||
<Icon className="size-5 md:m-[6px]" />
|
||||
</TooltipTrigger>
|
||||
</NavLink>
|
||||
<TooltipContent side="right">
|
||||
|
||||
@ -5,7 +5,7 @@ import NavItem from "./NavItem";
|
||||
|
||||
function Sidebar() {
|
||||
return (
|
||||
<aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
||||
<aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
|
||||
<span tabIndex={0} className="sr-only" />
|
||||
<div className="w-full flex flex-col gap-0 items-center">
|
||||
<Logo className="w-8 h-8 mb-6" />
|
||||
|
||||
@ -131,17 +131,17 @@ export default function LivePlayer({
|
||||
: "outline-0"
|
||||
} transition-all duration-500 ${className}`}
|
||||
>
|
||||
<div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
|
||||
<div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
|
||||
<div className="absolute top-0 inset-x-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none"></div>
|
||||
<div className="absolute bottom-0 inset-x-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
|
||||
{player}
|
||||
|
||||
<div
|
||||
className={`absolute left-0 top-0 right-0 bottom-0 w-full ${
|
||||
className={`absolute inset-0 w-full ${
|
||||
showStillWithoutActivity && !liveReady ? "visible" : "invisible"
|
||||
}`}
|
||||
>
|
||||
<AutoUpdatingCameraImage
|
||||
className="w-full h-full"
|
||||
className="size-full"
|
||||
camera={cameraConfig.name}
|
||||
showFps={false}
|
||||
reloadInterval={stillReloadInterval}
|
||||
@ -153,7 +153,7 @@ export default function LivePlayer({
|
||||
in={activeMotion}
|
||||
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
|
||||
>
|
||||
<MdLeakAdd className="w-4 h-4 text-motion" />
|
||||
<MdLeakAdd className="size-4 text-motion" />
|
||||
<div className="hidden md:block ml-1 text-white text-xs">Motion</div>
|
||||
</Chip>
|
||||
|
||||
@ -162,7 +162,7 @@ export default function LivePlayer({
|
||||
in={activeAudio}
|
||||
className={`bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500`}
|
||||
>
|
||||
<BsSoundwave className="w-4 h-4 text-audio" />
|
||||
<BsSoundwave className="size-4 text-audio" />
|
||||
<div className="hidden md:block ml-1 text-white text-xs">Sound</div>
|
||||
</Chip>
|
||||
)}
|
||||
@ -171,7 +171,7 @@ export default function LivePlayer({
|
||||
{isDesktop && (
|
||||
<Chip className="absolute right-2 top-2 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500">
|
||||
{recording == "ON" && (
|
||||
<MdCircle className="w-2 h-2 drop-shadow-md shadow-danger text-danger" />
|
||||
<MdCircle className="size-2 drop-shadow-md shadow-danger text-danger" />
|
||||
)}
|
||||
<div className="ml-1 capitalize text-white text-xs">
|
||||
{cameraConfig.name.replaceAll("_", " ")}
|
||||
|
||||
@ -88,7 +88,7 @@ function Live() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full overflow-y-scroll px-2">
|
||||
<div className="size-full overflow-y-scroll px-2">
|
||||
{isMobile && (
|
||||
<div className="relative h-9 flex items-center justify-between">
|
||||
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
@ -128,7 +128,7 @@ function Live() {
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4`}
|
||||
className={`mt-4 grid ${layout == "grid" ? "grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4" : ""} gap-2 md:gap-4 *:rounded-2xl *:bg-black`}
|
||||
>
|
||||
{cameras.map((camera) => {
|
||||
let grow;
|
||||
@ -143,7 +143,7 @@ function Live() {
|
||||
return (
|
||||
<LivePlayer
|
||||
key={camera.name}
|
||||
className={`rounded-2xl bg-black ${grow}`}
|
||||
className={grow}
|
||||
windowVisible={windowVisible}
|
||||
cameraConfig={camera}
|
||||
preferredLiveMode={isSafari ? "webrtc" : "mse"}
|
||||
|
||||
@ -82,11 +82,11 @@ export default function DesktopRecordingView({
|
||||
className="absolute left-0 top-0 rounded-lg"
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowRoundBack className="w-5 h-5 mr-[10px]" />
|
||||
<IoMdArrowRoundBack className="size-5 mr-[10px]" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
<div className="absolute left-[20%] top-8 right-[20%]">
|
||||
<div className="absolute top-8 inset-x-[20%]">
|
||||
<DynamicVideoPlayer
|
||||
camera={selectedReview.camera}
|
||||
timeRange={timeRange.ranges[selectedRangeIdx]}
|
||||
@ -106,7 +106,7 @@ export default function DesktopRecordingView({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 right-0 bottom-0">
|
||||
<div className="absolute inset-y-0 right-0">
|
||||
<EventReviewTimeline
|
||||
segmentDuration={30}
|
||||
timestampSpread={15}
|
||||
|
||||
@ -189,33 +189,30 @@ export default function EventView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full">
|
||||
<div className="flex flex-col size-full">
|
||||
<div className="relative flex justify-between mb-2">
|
||||
<Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
<ToggleGroup
|
||||
className="*:px-3 *:py4 *:rounded-2xl"
|
||||
type="single"
|
||||
defaultValue="alert"
|
||||
size="sm"
|
||||
onValueChange={(value: ReviewSeverity) => setSeverity(value)}
|
||||
>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
severity == "alert" ? "" : "text-gray-500"
|
||||
}`}
|
||||
className={`${severity == "alert" ? "" : "text-gray-500"}`}
|
||||
value="alert"
|
||||
aria-label="Select alerts"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_alert" />
|
||||
<MdCircle className="size-2 md:mr-[10px] text-severity_alert" />
|
||||
<div className="hidden md:block">Alerts</div>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
className={`px-3 py-4 rounded-2xl ${
|
||||
severity == "detection" ? "" : "text-gray-500"
|
||||
}`}
|
||||
className={`${severity == "detection" ? "" : "text-gray-500"}`}
|
||||
value="detection"
|
||||
aria-label="Select detections"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_detection" />
|
||||
<MdCircle className="size-2 md:mr-[10px] text-severity_detection" />
|
||||
<div className="hidden md:block">Detections</div>
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem
|
||||
@ -225,7 +222,7 @@ export default function EventView({
|
||||
value="significant_motion"
|
||||
aria-label="Select motion"
|
||||
>
|
||||
<MdCircle className="w-2 h-2 md:mr-[10px] text-severity_motion" />
|
||||
<MdCircle className="size-2 md:mr-[10px] text-severity_motion" />
|
||||
<div className="hidden md:block">Motion</div>
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
@ -245,14 +242,14 @@ export default function EventView({
|
||||
/>
|
||||
|
||||
{reachedEnd && currentItems == null && (
|
||||
<div className="w-full h-full flex flex-col justify-center items-center">
|
||||
<LuFolderCheck className="w-16 h-16" />
|
||||
<div className="size-full flex flex-col justify-center items-center">
|
||||
<LuFolderCheck className="size-16" />
|
||||
There are no {severity} items to review
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="w-full mx-2 my-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
|
||||
className="w-full m-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
|
||||
ref={contentRef}
|
||||
>
|
||||
{currentItems ? (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user