Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

fix(web): ensure drawer can slide in/out and not just appear

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-05 15:52:47 -08:00 committed by Blake Blackshear
parent 188eb6b9ea
commit 4e03acc944
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,11 +12,12 @@ export default function NavigationDrawer({ children, header }) {
return ( return (
<Fragment> <Fragment>
{showDrawer ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''} {showDrawer ? <div key="scrim" className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
<div <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 ${ key="drawer"
!showDrawer ? '-translate-x-full' : '' 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 ${
} lg:translate-x-0 transition-transform duration-300`} !showDrawer ? '-translate-x-full lg:translate-x-0' : 'translate-x-0'
} transition-transform duration-300`}
onClick={handleDismiss} onClick={handleDismiss}
> >
{header ? ( {header ? (

3
web/src/components/RelativeModal.jsx
View File

@ -82,8 +82,9 @@ export default function RelativeModal({ className, role = 'dialog', children, on
const menu = ( const menu = (
<Fragment> <Fragment>
<div className="absolute inset-0 z-10" onClick={handleDismiss} /> <div key="scrim" className="absolute inset-0 z-10" onClick={handleDismiss} />
<div <div
key="menu"
className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${ className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
show ? 'scale-100 opacity-100' : '' show ? 'scale-100 opacity-100' : ''
} ${className}`} } ${className}`}