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): relative modal height, top position, and z-indexing

Browse Source
This commit is contained in:
Paul Armstrong 2021-02-05 15:46:17 -08:00 committed by Blake Blackshear
parent c89e1a5735
commit 188eb6b9ea
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/public/index.html
View File

@ -14,8 +14,8 @@
<meta name="theme-color" content="#ff0000" /> <meta name="theme-color" content="#ff0000" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root" class="z-0"></div>
<div id="menus"></div> <div id="menus" class="z-0"></div>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/dist/index.js"></script> <script type="module" src="/dist/index.js"></script>
</body> </body>

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

@ -59,7 +59,13 @@ export default function RelativeModal({ className, role = 'dialog', children, on
if (top + menuHeight > windowHeight - WINDOW_PADDING) { if (top + menuHeight > windowHeight - WINDOW_PADDING) {
top = y - menuHeight; top = y - menuHeight;
} }
setPosition({ left, top: top + window.scrollY, width });
if (top <= WINDOW_PADDING) {
top = WINDOW_PADDING;
}
const maxHeight = windowHeight - WINDOW_PADDING * 2 > menuHeight ? null : windowHeight - WINDOW_PADDING * 2;
setPosition({ left, top: top + window.scrollY, width, height: maxHeight });
const focusable = ref.current.querySelector('[tabindex]'); const focusable = ref.current.querySelector('[tabindex]');
focusable && console.log('focusing'); focusable && console.log('focusing');
focusable && focusable.focus(); focusable && focusable.focus();
@ -76,16 +82,20 @@ export default function RelativeModal({ className, role = 'dialog', children, on
const menu = ( const menu = (
<Fragment> <Fragment>
<div className="absolute inset-0" onClick={handleDismiss} /> <div className="absolute inset-0 z-10" onClick={handleDismiss} />
<div <div
className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${ 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}`}
onkeydown={handleKeydown} onkeydown={handleKeydown}
role={role} role={role}
ref={ref} ref={ref}
style={ style={
position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : '' position.width > 0
? `min-width: ${position.width}px; ${position.height ? `max-height: ${position.height}px;` : ''} top: ${
position.top
}px; left: ${position.left}px`
: ''
} }
> >
{children} {children}