a/immich
1
0
Fork 0
mirror of https://github.com/Art051/immich.git synced 2025-08-11 19:29:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web,a11y): standardize the FullScreenModal UI (#8566)

Browse Source 
* feat(web,a11y): standardize the FullScreenModal look

* consistent header, padding, close button, and radius as BaseModal
* vertically stacking ConfirmDialogue CTA buttons in narrow screens
* adding aria-modal tags for screen reader
* add viewport-specific height limits on modals, to enable scrolling
* prevent focus from being hidden under sticky content in modals
* standardize FullScreenModal widths using a Prop

* wip: consistent padding with header

* fix: alignment on "create user" and "edit user" modals

* fix: horizontal modal content alignment

* fix: create user CTA buttons

* chore: remove unnecessary warning

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Ben
2024-04-08 21:02:09 +00:00
committed by GitHub
parent d43daaee81
commit 796c933fb8
43 changed files with 749 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/lib/components/shared-components/base-modal.svelte
View File

@@ -3,12 +3,9 @@
import { quintOut } from 'svelte/easing';
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
import { browser } from '$app/environment';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { clickOutside } from '$lib/utils/click-outside';
import { mdiClose } from '@mdi/js';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
const dispatch = createEventDispatcher<{
close: void;
@@ -28,6 +25,8 @@
*/
export let icon: string | undefined = undefined;
$: titleId = `${id}-title`;
onMount(() => {
if (browser) {
const scrollTop = document.documentElement.scrollTop;
@@ -51,7 +50,7 @@
<FocusTrap>
<div
aria-modal="true"
aria-labelledby={`${id}-title`}
aria-labelledby={titleId}
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
@@ -61,23 +60,11 @@
onOutclick: () => dispatch('close'),
onEscape: () => dispatch('close'),
}}
class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
class="min-h-[200px] w-[450px] overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar scroll-pb-20"
style="max-height: min(95vh, 800px);"
tabindex="-1"
>
<div class="flex place-items-center justify-between px-5 py-3">
<div class="flex gap-2 place-items-center">
{#if showLogo}
<ImmichLogo noText={true} width={32} />
{:else if icon}
<Icon path={icon} size={32} ariaHidden={true} class="text-immich-primary dark:text-immich-dark-primary" />
{/if}
<h1 id={`${id}-title`}>
{title}
</h1>
</div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} title="Close" />
</div>
<ModalHeader id={titleId} {title} {showLogo} {icon} on:close />
<div>
<slot />