zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix(gallery): redo image sizing + adding description (#407)

Browse source
This commit is contained in:
Michel EDIGHOFFER 2022-12-14 10:10:42 +01:00 • committed by GitHub
parent 9ac4d68fe8
commit c53e986956
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

56
components/modal/ModalMediaPreview.vue
View file

@ -29,41 +29,43 @@ function onClick(e: MouseEvent) {
</script>
<template>
<div relative h-full w-full flex select-none pointer-events-none>
<div absolute top-0 left-0 right-0 text-white text-center>
{{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
</div>
<div relative h-full w-full flex select-none pointer-events-none pt-12>
<button
v-if="hasNext"
pointer-events-auto
btn-action-icon bg="black/20" aria-label="Close"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
absolute top="1/2" right-1
:title="$t('action.next')"
@click="next"
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1
:title="$t('action.next')" @click="next"
>
<div i-ri:arrow-right-s-line text-white />
</button>
<button
v-if="hasPrev"
pointer-events-auto
btn-action-icon bg="black/20" aria-label="Close"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
absolute top="1/2" left-1
:title="$t('action.prev')"
@click="prev"
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1
:title="$t('action.prev')" @click="prev"
>
<div i-ri:arrow-left-s-line text-white />
</button>
<img :src="current.url || current.previewUrl" :alt="current.description || ''" max-h="95%" max-w="95%" ma>
<button
btn-action-icon bg="black/20" aria-label="Close"
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20"
absolute top-0 right-0 m1 pointer-events-auto
@click="emit('close')"
<img
:src="current.url || current.previewUrl" :alt="current.description || ''" max-h-full max-w-full ma
>
<div i-ri:close-fill text-white />
</button>
<div absolute top-0 w-full flex justify-between>
<button
btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
dark:hover:bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
>
<div i-ri:close-fill text-white />
</button>
<div bg="black/30" dark:bg="white/10" ml-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
<div v-if="mediaPreviewList.length > 1" p="y-1 x-2" rounded-r-0 shrink-0>
{{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
</div>
<p
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-r-full line-clamp-1
ws-pre-wrap break-all :title="current.description" w-full
>
{{ current.description }}
</p>
</div>
</div>
</div>
</template>