mirror of
https://github.com/alexhopeoconnor/frigate.git
synced 2026-10-22 11:17:50 +10:00
Use prettier-plugin-tailwindcss (#11373)
* use prettier-plugin-tailwindcss to keep class names organized * use prettierrc file to ensure formatting on save works with vscode * classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
@@ -111,13 +111,13 @@ export default function ObjectSettings({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row size-full">
|
||||
<div className="flex size-full flex-col md:flex-row">
|
||||
<Toaster position="top-center" closeButton={true} />
|
||||
<div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 md:w-3/12 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
|
||||
<div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0 md:w-3/12">
|
||||
<Heading as="h3" className="my-2">
|
||||
Debug
|
||||
</Heading>
|
||||
<div className="text-sm text-muted-foreground mb-5 space-y-3">
|
||||
<div className="mb-5 space-y-3 text-sm text-muted-foreground">
|
||||
<p>
|
||||
Frigate uses your detectors{" "}
|
||||
{config
|
||||
@@ -142,17 +142,17 @@ export default function ObjectSettings({
|
||||
<TabsTrigger value="objectlist">Object List</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="debug">
|
||||
<div className="flex flex-col w-full space-y-6">
|
||||
<div className="flex w-full flex-col space-y-6">
|
||||
<div className="mt-2 space-y-6">
|
||||
<div className="my-2.5 flex flex-col gap-2.5">
|
||||
{DEBUG_OPTIONS.map(({ param, title, description }) => (
|
||||
<div
|
||||
key={param}
|
||||
className="flex flex-row w-full justify-between items-center"
|
||||
className="flex w-full flex-row items-center justify-between"
|
||||
>
|
||||
<div className="flex flex-col mb-2">
|
||||
<div className="mb-2 flex flex-col">
|
||||
<Label
|
||||
className="w-full text-primary capitalize cursor-pointer mb-2"
|
||||
className="mb-2 w-full cursor-pointer capitalize text-primary"
|
||||
htmlFor={param}
|
||||
>
|
||||
{title}
|
||||
@@ -183,7 +183,7 @@ export default function ObjectSettings({
|
||||
</div>
|
||||
|
||||
{cameraConfig ? (
|
||||
<div className="flex md:w-7/12 md:grow md:h-dvh md:max-h-full">
|
||||
<div className="flex md:h-dvh md:max-h-full md:w-7/12 md:grow">
|
||||
<div className="size-full min-h-10">
|
||||
<AutoUpdatingCameraImage
|
||||
camera={cameraConfig.name}
|
||||
@@ -222,15 +222,15 @@ function ObjectList(objects?: ObjectType[]) {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full overflow-y-auto">
|
||||
<div className="flex w-full flex-col overflow-y-auto">
|
||||
{objects && objects.length > 0 ? (
|
||||
objects.map((obj) => {
|
||||
return (
|
||||
<Card className="text-sm p-2 mb-1" key={obj.id}>
|
||||
<Card className="mb-1 p-2 text-sm" key={obj.id}>
|
||||
<div className="flex flex-row items-center gap-3 pb-1">
|
||||
<div className="flex flex-row flex-1 items-center justify-start p-3 pl-1">
|
||||
<div className="flex flex-1 flex-row items-center justify-start p-3 pl-1">
|
||||
<div
|
||||
className="p-2 rounded-lg"
|
||||
className="rounded-lg p-2"
|
||||
style={{
|
||||
backgroundColor: obj.stationary
|
||||
? "rgb(110,110,110)"
|
||||
@@ -243,10 +243,10 @@ function ObjectList(objects?: ObjectType[]) {
|
||||
{capitalizeFirstLetter(obj.label)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row w-8/12 items-end justify-end">
|
||||
<div className="mr-2 text-md w-1/3">
|
||||
<div className="flex w-8/12 flex-row items-end justify-end">
|
||||
<div className="text-md mr-2 w-1/3">
|
||||
<div className="flex flex-col items-end justify-end">
|
||||
<p className="text-sm mb-1.5 text-primary-variant">
|
||||
<p className="mb-1.5 text-sm text-primary-variant">
|
||||
Score
|
||||
</p>
|
||||
{obj.score
|
||||
@@ -255,17 +255,17 @@ function ObjectList(objects?: ObjectType[]) {
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-2 text-md w-1/3">
|
||||
<div className="text-md mr-2 w-1/3">
|
||||
<div className="flex flex-col items-end justify-end">
|
||||
<p className="text-sm mb-1.5 text-primary-variant">
|
||||
<p className="mb-1.5 text-sm text-primary-variant">
|
||||
Ratio
|
||||
</p>
|
||||
{obj.ratio ? obj.ratio.toFixed(2).toString() : "-"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mr-2 text-md w-1/3">
|
||||
<div className="text-md mr-2 w-1/3">
|
||||
<div className="flex flex-col items-end justify-end">
|
||||
<p className="text-sm mb-1.5 text-primary-variant">
|
||||
<p className="mb-1.5 text-sm text-primary-variant">
|
||||
Area
|
||||
</p>
|
||||
{obj.area ? obj.area.toString() : "-"}
|
||||
|
||||
Reference in New Issue
Block a user