public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-28 13:59:45 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

feat(web): fixed combobox positioning (#12848)

Browse Source 
* fix(web): modal sticky bottom scrolling

* chore: minor styling tweaks

* wip: add portal so modals show on Safari in detail panel

* feat: fixed position dropdown menu

* chore: refactoring and cleanup

* feat: zooming and virtual keyboard working for iPadOS/Safari

* Revert "feat: zooming and virtual keyboard working for iPadOS/Safari"

This reverts commit cac29bac0d.

* wip: minor code cleanup

* wip: recover from visual viewport changes

* wip: ease in a little more visualviewport magic

* wip: code cleanup

* fix: only show dropdown above when viewport is zoomed out

* fix: code review suggestions for code style

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

* fix: better variable naming

* chore: better documentation for the bottom breakpoint

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
This commit is contained in:
Ben
2024-09-25 12:04:53 -04:00
committed by GitHub
parent 46fe60693e
commit 8d515adac5
5 changed files with 134 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/lib/components/shared-components/full-screen-modal.svelte
View File

@@ -68,28 +68,24 @@
use:focusTrap
>
<div
class="z-[9999] max-w-[95vw] {modalWidth} overflow-hidden rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg pt-3 pb-4"
class="flex flex-col max-h-[min(95dvh,60rem)] z-[9999] max-w-[95vw] {modalWidth} overflow-hidden rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg pt-3 pb-4"
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
tabindex="-1"
aria-modal="true"
aria-labelledby={titleId}
>
<div
class="immich-scrollbar overflow-y-auto max-h-[min(92dvh,64rem)] py-1"
class:scroll-pb-40={isStickyBottom}
class:sm:scroll-p-24={isStickyBottom}
>
<div class="immich-scrollbar overflow-y-auto pt-1" class:pb-4={isStickyBottom}>
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
<div class="px-5 pt-0">
<slot />
</div>
{#if isStickyBottom}
<div
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky -bottom-[4px] py-2 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow z-[9999]"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div>
{#if isStickyBottom}
<div
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div>
</section>