cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): modal sticky bottom scrolling

Browse Source
This commit is contained in:
ben-basten
2024-09-13 16:44:44 -04:00
parent 7893dca733
commit 0019cf13f3
3 changed files with 45 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/forms/tag-asset-form.svelte
+36 -36
View File
@@ -49,42 +49,42 @@
</FormatMessage> </FormatMessage>
</p> </p>
</div> </div>
<form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form"> <div class="min-h-36">
<div class="my-4 flex flex-col gap-2"> <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="create-tag-form">
<Combobox <div class="my-4 flex flex-col gap-2">
on:select={({ detail: option }) => handleSelect(option)} <Combobox
label={$t('tag')} on:select={({ detail: option }) => handleSelect(option)}
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))} label={$t('tag')}
placeholder={$t('search_tags')} options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
/> placeholder={$t('search_tags')}
</div> />
</form> </div>
</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]}
{#if tag} {#if tag}
<div class="flex group transition-all"> <div class="flex group transition-all">
<span <span
class="inline-block h-min whitespace-nowrap pl-3 pr-1 group-hover:pl-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-tl-full rounded-bl-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all" class="inline-block h-min whitespace-nowrap pl-3 pr-1 group-hover:pl-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-tl-full rounded-bl-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
> >
<p class="text-sm"> <p class="text-sm">
{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" title="Remove tag"
title="Remove tag" on:click={() => handleRemove(tagId)}
on:click={() => handleRemove(tagId)} >
> <Icon path={mdiClose} />
<Icon path={mdiClose} /> </button>
</button> </div>
</div> {/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>
web/src/lib/components/shared-components/full-screen-modal.svelte
+8 -12
View File
@@ -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>
{#if isStickyBottom}
<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]"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div> </div>
{#if isStickyBottom}
<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"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div> </div>
</section> </section>
web/src/lib/i18n/en.json
+1 -1
View File
@@ -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",