CloudToys/elk
1
0
Fork 0
Code

feat(ui): move alt text under the media preview (#863)

Browse Source
This commit is contained in:
baptiste0928 2023-01-17 22:54:03 +01:00 committed by GitHub
parent 0b77ad3f43
commit 6c1d0e7121
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/modal/ModalMediaPreview.vue
View File

@ -54,7 +54,21 @@ onUnmounted(() => locked.value = false)
</button> </button>
<div flex flex-row items-center mxa> <div flex flex-row items-center mxa>
<div flex="~ col center" max-h-full max-w-full>
<ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" /> <ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
<div bg="black/30" dark:bg="white/10" ms-4 mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
<div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
{{ index + 1 }} / {{ mediaPreviewList.length }}
</div>
<p
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-3" rounded-ie-full line-clamp-1
ws-pre-wrap break-all :title="current.description" w-full
>
{{ current.description }}
</p>
</div>
</div>
</div> </div>
<div absolute top-0 w-full flex justify-between> <div absolute top-0 w-full flex justify-between>
@ -64,17 +78,6 @@ onUnmounted(() => locked.value = false)
> >
<div i-ri:close-line text-white /> <div i-ri:close-line text-white />
</button> </button>
<div bg="black/30" dark:bg="white/10" ms-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>
{{ index + 1 }} / {{ mediaPreviewList.length }}
</div>
<p
v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-ie-full line-clamp-1
ws-pre-wrap break-all :title="current.description" w-full
>
{{ current.description }}
</p>
</div>
</div> </div>
</div> </div>
</template> </template>