refac: styling

This commit is contained in:
Timothy J. Baek 2024-06-18 15:39:50 -07:00
parent d5a1030000
commit 35026849df
3 changed files with 13 additions and 13 deletions

View File

@ -1321,7 +1321,7 @@
<div <div
class="h-screen max-h-[100dvh] {$showSidebar class="h-screen max-h-[100dvh] {$showSidebar
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''} w-full max-w-full flex flex-col z-40" : ''} w-full max-w-full flex flex-col"
> >
{#if $settings?.backgroundImageUrl ?? null} {#if $settings?.backgroundImageUrl ?? null}
<div <div
@ -1349,7 +1349,7 @@
<div <div
class="absolute top-[4.25rem] w-full {$showSidebar class="absolute top-[4.25rem] w-full {$showSidebar
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''} z-0" : ''} z-20"
> >
<div class=" flex flex-col gap-1 w-full"> <div class=" flex flex-col gap-1 w-full">
{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner} {#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}

View File

@ -33,15 +33,15 @@
mounted = true; mounted = true;
}); });
$: if (mounted) { $: if (show && modalElement) {
if (show) { document.body.appendChild(modalElement);
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
} else { } else if (modalElement) {
document.body.removeChild(modalElement);
window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keydown', handleKeyDown);
document.body.style.overflow = 'unset'; document.body.style.overflow = 'unset';
} }
}
</script> </script>
{#if show} {#if show}

View File

@ -209,7 +209,7 @@
{#if $showSidebar} {#if $showSidebar}
<div <div
class=" fixed md:hidden z-50 md:z-30 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain" class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
on:mousedown={() => { on:mousedown={() => {
showSidebar.set(!$showSidebar); showSidebar.set(!$showSidebar);
}} }}
@ -221,12 +221,12 @@
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'md:relative w-[260px]' ? 'md:relative w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 md:z-30 top-0 left-0 rounded-r-2xl : '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0 rounded-r-2xl
" "
data-state={$showSidebar} data-state={$showSidebar}
> >
<div <div
class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 md:z-30 {$showSidebar class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar
? '' ? ''
: 'invisible'}" : 'invisible'}"
> >