helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 749 additions and 853 deletions
Download patch file Download diff file Expand all files Collapse all files

44
web/src/lib/components/shared-components/version-announcement-box.svelte
View file

@ -33,34 +33,28 @@
</script>
{#if showModal}
<FullScreenModal onClose={() => (showModal = false)}>
<div
class="max-w-lg rounded-3xl border bg-immich-bg px-8 py-10 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<p class="mb-4 text-2xl">🎉 NEW VERSION AVAILABLE 🎉</p>
<FullScreenModal id="new-version-modal" title="🎉 NEW VERSION AVAILABLE" onClose={() => (showModal = false)}>
<div>
Hi friend, there is a new version of the application please take your time to visit the
<span class="font-medium underline"
><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
>release notes</a
></span
>
and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
especially if you use WatchTower or any mechanism that handles updating your application automatically.
</div>
<div>
Hi friend, there is a new version of the application please take your time to visit the
<span class="font-medium underline"
><a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer"
>release notes</a
></span
>
and ensure your <code>docker-compose</code>, and <code>.env</code> setup is up-to-date to prevent any misconfigurations,
especially if you use WatchTower or any mechanism that handles updating your application automatically.
</div>
<div class="mt-4 font-medium">Your friend, Alex</div>
<div class="mt-4 font-medium">Your friend, Alex</div>
<div class="font-sm mt-8">
<code>Server Version: {serverVersion}</code>
<br />
<code>Latest Version: {releaseVersion}</code>
</div>
<div class="font-sm mt-8">
<code>Server Version: {serverVersion}</code>
<br />
<code>Latest Version: {releaseVersion}</code>
</div>
<div class="mt-8 text-right">
<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
</div>
<div class="mt-8 text-right">
<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
</div>
</FullScreenModal>
{/if}