Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-02-09 00:17:00 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): make app bar and sidebar fully responsive

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-03 15:15:27 -08:00 committed by Blake Blackshear
parent 276ce8710c
commit 063030bcf3
5 changed files with 75 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/src/App.jsx
View File

@ -4,7 +4,6 @@ import AppBar from './components/AppBar';
import Camera from './Camera';
import CameraMap from './CameraMap';
import Cameras from './Cameras';
import { DarkModeProvider } from './context';
import Debug from './Debug';
import Event from './Event';
import Events from './Events';
@ -12,34 +11,37 @@ import { Router } from 'preact-router';
import Sidebar from './Sidebar';
import StyleGuide from './StyleGuide';
import Api, { FetchStatus, useConfig } from './api';
import { DarkModeProvider, SidebarProvider } from './context';
export default function App() {
const { data, status } = useConfig();
return (
<DarkModeProvider>
<div class="w-full">
<AppBar title="Frigate" />
{status !== FetchStatus.LOADED ? (
<div className="flex flex-grow-1 min-h-screen justify-center items-center">
<ActivityIndicator />
</div>
) : (
<div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<Sidebar />
<div className="w-full flex-auto p-2 mt-20 md:p-4 lg:pl-8 lg:pr-8 min-w-0">
<Router>
<CameraMap path="/cameras/:camera/editor" />
<Camera path="/cameras/:camera" />
<Event path="/events/:eventId" />
<Events path="/events" />
<Debug path="/debug" />
{import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
<Cameras default path="/" />
</Router>
<SidebarProvider>
<div class="w-full">
<AppBar title="Frigate" />
{status !== FetchStatus.LOADED ? (
<div className="flex flex-grow-1 min-h-screen justify-center items-center">
<ActivityIndicator />
</div>
</div>
)}
</div>
) : (
<div className="flex flex-row min-h-screen w-full bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<Sidebar />
<div className="w-full flex-auto p-2 mt-20 px-4 min-w-0">
<Router>
<CameraMap path="/cameras/:camera/editor" />
<Camera path="/cameras/:camera" />
<Event path="/events/:eventId" />
<Events path="/events" />
<Debug path="/debug" />
{import.meta.env.SNOWPACK_MODE !== 'development' ? <StyleGuide path="/styleguide" /> : null}
<Cameras default path="/" />
</Router>
</div>
</div>
)}
</div>
</SidebarProvider>
</DarkModeProvider>
);
}

45
web/src/Sidebar.jsx
View File

@ -1,10 +1,11 @@
import { h } from 'preact';
import { h, Fragment } from 'preact';
import Link from './components/Link';
import LinkedLogo from './components/LinkedLogo';
import { Link as RouterLink } from 'preact-router/match';
import { useCallback, useState } from 'preact/hooks';
import { useSidebar } from './context';
function NavLink({ className = '', href, text }) {
function NavLink({ className = '', href, text, ...other }) {
const external = href.startsWith('http');
const El = external ? Link : RouterLink;
const props = external ? { rel: 'noopener nofollow', target: '_blank' } : {};
@ -13,6 +14,7 @@ function NavLink({ className = '', href, text }) {
activeClassName="bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200"
className={`block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline self-end ${className}`}
href={href}
{...other}
{...props}
>
{text}
@ -21,21 +23,34 @@ function NavLink({ className = '', href, text }) {
}
export default function Sidebar() {
const { showSidebar, setShowSidebar } = useSidebar();
const handleDismiss = useCallback(() => {
setShowSidebar(false);
}, [setShowSidebar]);
return (
<div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0">
<div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
<div class="text-gray-500">
<LinkedLogo />
<Fragment>
{showSidebar ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
<div
className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
!showSidebar ? '-translate-x-full' : ''
} lg:translate-x-0 transition-transform duration-300`}
>
<div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
<div class="text-gray-500">
<LinkedLogo />
</div>
</div>
<nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
<NavLink onClick={handleDismiss} href="/" text="Cameras" />
<NavLink onClick={handleDismiss} href="/events" text="Events" />
<NavLink onClick={handleDismiss} href="/debug" text="Debug" />
<hr className="border-solid border-gray-500 mt-2" />
<NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
<NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
</nav>
</div>
<nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
<NavLink href="/" text="Cameras" />
<NavLink href="/events" text="Events" />
<NavLink href="/debug" text="Debug" />
<hr className="border-solid border-gray-500 mt-2" />
<NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
<NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
</nav>
</div>
</Fragment>
);
}

9
web/src/components/AppBar.jsx
View File

@ -4,7 +4,7 @@ import LinkedLogo from './LinkedLogo';
import Menu, { MenuItem } from './Menu';
import MenuIcon from '../icons/Menu';
import MoreIcon from '../icons/More';
import { useDarkMode } from '../context';
import { useDarkMode, useSidebar } from '../context';
import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
// We would typically preserve these in component state
@ -18,6 +18,7 @@ export default function AppBar({ title }) {
const [sidebarVisible, setSidebarVisible] = useState(true);
const [showMoreMenu, setShowMoreMenu] = useState(false);
const { currentMode, persistedMode, setDarkMode } = useDarkMode();
const { showSidebar, setShowSidebar } = useSidebar();
const handleSelectDarkMode = useCallback(
(value, label) => {
@ -61,6 +62,10 @@ export default function AppBar({ title }) {
setShowMoreMenu(false);
}, [setShowMoreMenu]);
const handleShowSidebar = useCallback(() => {
setShowSidebar(true);
}, [setShowSidebar]);
return (
<div
className={`w-full border-b border-gray-100 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
@ -68,7 +73,7 @@ export default function AppBar({ title }) {
} ${!atZero ? 'shadow' : ''}`}
>
<div className="lg:hidden">
<Button className="rounded-full w-12 h-12 -ml-4 -mt-4 -mb-4" type="text">
<Button className="rounded-full w-12 h-12" onClick={handleShowSidebar} type="text">
<MenuIcon />
</Button>
</div>

2
web/src/components/Card.jsx
View File

@ -20,7 +20,7 @@ export default function Box({
<div className={`bg-white dark:bg-gray-800 shadow-md hover:shadow-xl rounded-lg overflow-hidden ${className}`}>
<Element href={href} {...props}>
{media}
<div class="p-2 pb-2 lg:p-4 lg:pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
<div class="p-4 pb-2">{header ? <Heading size="base">{header}</Heading> : null}</div>
</Element>
{buttons.length || content ? (
<div class="pl-4 pb-2">

12
web/src/context/index.jsx
View File

@ -64,3 +64,15 @@ export function DarkModeProvider({ children }) {
export function useDarkMode() {
return useContext(DarkMode);
}
const Sidebar = createContext(null);
export function SidebarProvider({ children }) {
const [showSidebar, setShowSidebar] = useState(false);
return <Sidebar.Provider value={{ showSidebar, setShowSidebar }}>{children}</Sidebar.Provider>;
}
export function useSidebar() {
return useContext(Sidebar);
}