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

Refactor Settings UI (#20392)

Browse Source 
* refactor with sidebar and mobile page

* sidebar spacing and color tweaks

* layout tweaks

* move camera switch button to header

* improve mobile

* remove back button on mobile page header

* mobile fixes

* remove debug

* don't use mobilepage

* more mobile tweaks

* use mobile page for components

* add optional actions to mobile page header for top right buttons

* fix alignment

* use page toggle

* tweaks

* sidebar inset tweaks

* move triggers to notifications sub menu

* consistency

* fix padding

* more padding fixes

* navigate history
This commit is contained in:
Josh Hawkins
2025-10-08 14:59:21 -05:00
committed by GitHub
parent 3c7e36fb16
commit 6df950bb78
14 changed files with 431 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/settings/AuthenticationView.tsx
+7 -7
View File
@@ -405,9 +405,9 @@ export default function AuthenticationView({
// Users section
const UsersSection = (
<>
<div className="mb-5 flex flex-row items-center justify-between gap-2">
<div className="mb-5 flex flex-row items-center justify-between gap-2 md:pr-2">
<div className="flex flex-col items-start">
<Heading as="h3" className="my-2">
<Heading as="h4" className="mb-2">
{t("users.management.title")}
</Heading>
<p className="text-sm text-muted-foreground">
@@ -425,7 +425,7 @@ export default function AuthenticationView({
</Button>
</div>
<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt">
<div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-2">
<div className="h-full overflow-auto">
<Table>
<TableHeader className="sticky top-0 bg-muted/50">
@@ -594,9 +594,9 @@ export default function AuthenticationView({
// Roles section
const RolesSection = (
<>
<div className="mb-5 flex flex-row items-center justify-between gap-2">
<div className="mb-5 flex flex-row items-center justify-between gap-2 md:pr-2">
<div className="flex flex-col items-start">
<Heading as="h3" className="my-2">
<Heading as="h4" className="mb-2">
{t("roles.management.title")}
</Heading>
<p className="text-sm text-muted-foreground">
@@ -614,7 +614,7 @@ export default function AuthenticationView({
</Button>
</div>
<div className="mb-6 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt">
<div className="scrollbar-container flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-2">
<div className="h-full overflow-auto">
<Table>
<TableHeader className="sticky top-0 bg-muted/50">
@@ -784,7 +784,7 @@ export default function AuthenticationView({
return (
<div className="flex size-full flex-col">
<Toaster position="top-center" closeButton={true} />
<div className="scrollbar-container 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">
<div className="scrollbar-container order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-2 md:mt-0">
{section === "users" && UsersSection}
{section === "roles" && RolesSection}
{!section && (