forked from Github/frigate
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
@@ -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("_", " ")}
|
||||
|
||||
Reference in New Issue
Block a user