fix(web): modal sticky bottom scrolling
This commit is contained in:
@@ -49,6 +49,7 @@
|
|||||||
</FormatMessage>
|
</FormatMessage>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="min-h-36">
|
||||||
<form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
|
<form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
|
||||||
<div class="my-4 flex flex-col gap-2">
|
<div class="my-4 flex flex-col gap-2">
|
||||||
<Combobox
|
<Combobox
|
||||||
@@ -59,7 +60,6 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<section class="flex flex-wrap pt-2 gap-1">
|
<section class="flex flex-wrap pt-2 gap-1">
|
||||||
{#each selectedIds as tagId (tagId)}
|
{#each selectedIds as tagId (tagId)}
|
||||||
{@const tag = tagMap[tagId]}
|
{@const tag = tagMap[tagId]}
|
||||||
@@ -72,7 +72,6 @@
|
|||||||
{tag.value}
|
{tag.value}
|
||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-tr-full rounded-br-full place-items-center place-content-center pr-2 pl-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-tr-full rounded-br-full place-items-center place-content-center pr-2 pl-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
||||||
@@ -85,6 +84,7 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
<svelte:fragment slot="sticky-bottom">
|
<svelte:fragment slot="sticky-bottom">
|
||||||
<Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
|
<Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
|
||||||
|
|||||||
@@ -74,22 +74,18 @@
|
|||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
aria-labelledby={titleId}
|
aria-labelledby={titleId}
|
||||||
>
|
>
|
||||||
<div
|
<div class="immich-scrollbar overflow-y-auto max-h-[min(85dvh,44rem)]">
|
||||||
class="immich-scrollbar overflow-y-auto max-h-[min(92dvh,64rem)]"
|
|
||||||
class:scroll-pb-40={isStickyBottom}
|
|
||||||
class:sm:scroll-p-24={isStickyBottom}
|
|
||||||
>
|
|
||||||
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
|
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
|
||||||
<div class="px-5 pt-0" class:pb-5={isStickyBottom}>
|
<div class="px-5 pt-0" class:pb-5={isStickyBottom}>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{#if isStickyBottom}
|
{#if isStickyBottom}
|
||||||
<div
|
<div
|
||||||
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow z-[9999]"
|
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 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" />
|
<slot name="sticky-bottom" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -1187,7 +1187,7 @@
|
|||||||
"tag_assets": "Tag assets",
|
"tag_assets": "Tag assets",
|
||||||
"tag_created": "Created tag: {tag}",
|
"tag_created": "Created tag: {tag}",
|
||||||
"tag_feature_description": "Browsing photos and videos grouped by logical tag topics",
|
"tag_feature_description": "Browsing photos and videos grouped by logical tag topics",
|
||||||
"tag_not_found_question": "Cannot find a tag? Create one <link>here</link>",
|
"tag_not_found_question": "Cannot find a tag? <link>Create a new tag.</link>",
|
||||||
"tag_updated": "Updated tag: {tag}",
|
"tag_updated": "Updated tag: {tag}",
|
||||||
"tagged_assets": "Tagged {count, plural, one {# asset} other {# assets}}",
|
"tagged_assets": "Tagged {count, plural, one {# asset} other {# assets}}",
|
||||||
"tags": "Tags",
|
"tags": "Tags",
|
||||||
|
|||||||
Reference in New Issue
Block a user