mirror of https://github.com/elk-zone/elk.git
fix(gallery): redo image sizing + adding description (#407)
This commit is contained in:
parent
9ac4d68fe8
commit
c53e986956
|
@ -32,7 +32,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
|
||||||
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
|
<ModalDialog v-model="isSigninDialogOpen" py-4 px-8>
|
||||||
<UserSignIn />
|
<UserSignIn />
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
<ModalDialog v-model="isPreviewHelpOpen">
|
<ModalDialog v-model="isPreviewHelpOpen" max-w-125>
|
||||||
<HelpPreview @close="closePreviewHelp()" />
|
<HelpPreview @close="closePreviewHelp()" />
|
||||||
</ModalDialog>
|
</ModalDialog>
|
||||||
<ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
|
<ModalDialog v-model="isPublishDialogOpen" max-w-180 flex>
|
||||||
|
|
|
@ -144,7 +144,7 @@ export default {
|
||||||
<!-- We use `class` here to make v-bind being able to be override them -->
|
<!-- We use `class` here to make v-bind being able to be override them -->
|
||||||
<div
|
<div
|
||||||
ref="elDialogMain"
|
ref="elDialogMain"
|
||||||
class="dialog-main w-full rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-w-125 max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
|
class="dialog-main rounded shadow-lg pointer-events-auto isolate bg-base border-base border-1px border-solid w-full max-h-full of-y-auto overscroll-contain touch-pan-y touch-pan-x"
|
||||||
v-bind="bindTypeToAny($attrs)"
|
v-bind="bindTypeToAny($attrs)"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -29,41 +29,43 @@ function onClick(e: MouseEvent) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div relative h-full w-full flex select-none pointer-events-none>
|
<div relative h-full w-full flex select-none pointer-events-none pt-12>
|
||||||
<div absolute top-0 left-0 right-0 text-white text-center>
|
|
||||||
{{ mediaPreviewIndex + 1 }} / {{ mediaPreviewList.length }}
|
|
||||||
</div>
|
|
||||||
<button
|
<button
|
||||||
v-if="hasNext"
|
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
|
||||||
pointer-events-auto
|
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1
|
||||||
btn-action-icon bg="black/20" aria-label="Close"
|
:title="$t('action.next')" @click="next"
|
||||||
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 />
|
<div i-ri:arrow-right-s-line text-white />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
v-if="hasPrev"
|
v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
|
||||||
pointer-events-auto
|
hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" left-1
|
||||||
btn-action-icon bg="black/20" aria-label="Close"
|
:title="$t('action.prev')" @click="prev"
|
||||||
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 />
|
<div i-ri:arrow-left-s-line text-white />
|
||||||
</button>
|
</button>
|
||||||
<img :src="current.url || current.previewUrl" :alt="current.description || ''" max-h="95%" max-w="95%" ma>
|
<img
|
||||||
|
:src="current.url || current.previewUrl" :alt="current.description || ''" max-h-full max-w-full 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')"
|
|
||||||
>
|
>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -31,6 +31,7 @@
|
||||||
"bookmarked": "Bookmarked",
|
"bookmarked": "Bookmarked",
|
||||||
"boost": "Boost",
|
"boost": "Boost",
|
||||||
"boosted": "Boosted",
|
"boosted": "Boosted",
|
||||||
|
"close": "Close",
|
||||||
"compose": "Compose",
|
"compose": "Compose",
|
||||||
"enter_app": "Enter App",
|
"enter_app": "Enter App",
|
||||||
"favourite": "Favourite",
|
"favourite": "Favourite",
|
||||||
|
|
Loading…
Reference in New Issue