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

alignment

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-12 15:55:38 -05:00
parent 18ecabb39c
commit 5df309cd57
1 changed files with 58 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/src/components/filter/CameraGroupSelector.tsx
View File

@ -291,6 +291,7 @@ function NewGroupDialog({
const onSave = () => { const onSave = () => {
setOpen(false); setOpen(false);
setEditState("none"); setEditState("none");
setEditingGroupName("");
}; };
const onCancel = () => { const onCancel = () => {
@ -325,16 +326,18 @@ function NewGroupDialog({
> >
<Content <Content
className={cn( className={cn(
"min-w-0", "scrollbar-container overflow-y-auto",
isDesktop && "my-4 flex max-h-dvh w-6/12 flex-col",
isMobile && "px-4", isMobile && "px-4",
isDesktop && "max-h-dvh w-6/12 overflow-y-hidden",
)} )}
> >
<div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
{editState === "none" && ( {editState === "none" && (
<> <>
<Header className="mt-2" onClose={() => setOpen(false)}> <Header
<Title className="mb-2">Camera Groups</Title> className={cn(isDesktop && "mt-5", "justify-center")}
onClose={() => setOpen(false)}
>
<Title>Camera Groups</Title>
<Description className="sr-only"> <Description className="sr-only">
Edit camera groups Edit camera groups
</Description> </Description>
@ -342,7 +345,7 @@ function NewGroupDialog({
className={cn( className={cn(
"absolute", "absolute",
isDesktop && "right-6 top-10", isDesktop && "right-6 top-10",
isMobile && "absolute right-0 top-3", isMobile && "absolute right-0 top-4",
)} )}
> >
<Button <Button
@ -360,6 +363,7 @@ function NewGroupDialog({
</Button> </Button>
</div> </div>
</Header> </Header>
<div className="flex flex-col gap-4 md:gap-3">
{currentGroups.map((group) => ( {currentGroups.map((group) => (
<CameraGroupRow <CameraGroupRow
key={group[0]} key={group[0]}
@ -368,13 +372,14 @@ function NewGroupDialog({
onEditGroup={() => onEditGroup(group)} onEditGroup={() => onEditGroup(group)}
/> />
))} ))}
</div>
</> </>
)} )}
{editState != "none" && ( {editState != "none" && (
<> <>
<Header className="mt-2" onClose={() => setEditState("none")}> <Header className="mt-2" onClose={() => setEditState("none")}>
<Title className="mb-2"> <Title>
{editState == "add" ? "Add" : "Edit"} Camera Group {editState == "add" ? "Add" : "Edit"} Camera Group
</Title> </Title>
<Description className="sr-only"> <Description className="sr-only">
@ -391,7 +396,6 @@ function NewGroupDialog({
/> />
</> </>
)} )}
</div>
</Content> </Content>
</Overlay> </Overlay>
</> </>
@ -449,7 +453,7 @@ export function EditGroupDialog({
> >
<div className="scrollbar-container flex flex-col overflow-y-auto md:my-4"> <div className="scrollbar-container flex flex-col overflow-y-auto md:my-4">
<Header className="mt-2" onClose={() => setOpen(false)}> <Header className="mt-2" onClose={() => setOpen(false)}>
<Title className="mb-2">Edit Camera Group</Title> <Title>Edit Camera Group</Title>
<Description className="sr-only">Edit camera group</Description> <Description className="sr-only">Edit camera group</Description>
</Header> </Header>
@ -489,7 +493,7 @@ export function CameraGroupRow({
<> <>
<div <div
key={group[0]} key={group[0]}
className="transition-background my-1.5 flex flex-row items-center justify-between rounded-lg duration-100 md:p-1" className="transition-background flex flex-row items-center justify-between rounded-lg duration-100 md:p-1"
> >
<div className={`flex items-center`}> <div className={`flex items-center`}>
<p className="cursor-default">{group[0]}</p> <p className="cursor-default">{group[0]}</p>