chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Use prettier-plugin-tailwindcss (#11373)

Browse Source 
* 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:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,12 +105,12 @@ export default function Settings() {
}, []);
return (
<div className="size-full p-2 flex flex-col">
<div className="w-full h-11 relative flex justify-between items-center">
<div className="flex size-full flex-col p-2">
<div className="relative flex h-11 w-full items-center justify-between">
<ScrollArea className="w-full whitespace-nowrap">
<div ref={tabsRef} className="flex flex-row">
<ToggleGroup
className="*:px-3 *:py-4 *:rounded-md"
className="*:rounded-md *:px-3 *:py-4"
type="single"
size="sm"
value={pageToggle}
@@ -123,7 +123,7 @@ export default function Settings() {
{Object.values(settingsViews).map((item) => (
<ToggleGroupItem
key={item}
className={`flex items-center justify-between gap-2 scroll-mx-10 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
className={`flex scroll-mx-10 items-center justify-between gap-2 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
value={item}
data-nav-item={item}
aria-label={`Select ${item}`}
@@ -138,7 +138,7 @@ export default function Settings() {
{(page == "debug" ||
page == "masks / zones" ||
page == "motion tuner") && (
<div className="flex items-center gap-2 ml-2 flex-shrink-0">
<div className="ml-2 flex flex-shrink-0 items-center gap-2">
{page == "masks / zones" && (
<ZoneMaskFilterButton
selectedZoneMask={filterZoneMask}
@@ -153,7 +153,7 @@ export default function Settings() {
</div>
)}
</div>
<div className="mt-2 flex flex-col items-start w-full h-full md:h-dvh md:pb-24">
<div className="mt-2 flex h-full w-full flex-col items-start md:h-dvh md:pb-24">
{page == "general" && <General />}
{page == "debug" && <ObjectSettings selectedCamera={selectedCamera} />}
{page == "masks / zones" && (
@@ -216,11 +216,11 @@ function CameraSelectButton({
const trigger = (
<Button
className="flex items-center gap-2 capitalize bg-selected hover:bg-selected"
className="flex items-center gap-2 bg-selected capitalize hover:bg-selected"
size="sm"
>
<FaVideo className="text-background dark:text-primary" />
<div className="hidden md:block text-background dark:text-primary">
<div className="hidden text-background dark:text-primary md:block">
{selectedCamera == undefined
? "No Camera"
: selectedCamera.replaceAll("_", " ")}
@@ -237,7 +237,7 @@ function CameraSelectButton({
<DropdownMenuSeparator />
</>
)}
<div className="h-auto max-h-[80dvh] p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
<div className="mb-5 h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4 md:mb-1">
<div className="flex flex-col gap-2.5">
{allCameras.map((item) => (
<FilterSwitch