mirror/MisskeyIO
1
0
Fork 0
mirror of https://github.com/MisskeyIO/misskey synced 2024-11-23 14:46:40 +09:00
Code

enhance(Gallery): サムネイルをホバーしてもぼかしが外れないように & ギャラリーの説明を一番上に表示するように (MisskeyIO#820)

Browse Source
This commit is contained in:
まっちゃてぃー。 2024-11-21 22:06:14 +09:00 committed by GitHub
parent 1bad66913c
commit f4ebae3956
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/frontend/src/components/MkGalleryPostPreview.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1" @pointerenter="enterHover" @pointerleave="leaveHover"> <MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
<div class="thumbnail"> <div class="thumbnail">
<Transition> <Transition>
<ImgWithBlurhash <ImgWithBlurhash
@ -41,17 +41,8 @@ const props = defineProps<{
post: Misskey.entities.GalleryPost; post: Misskey.entities.GalleryPost;
}>(); }>();
const hover = ref(false);
const safe = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive); const safe = computed(() => defaultStore.state.nsfw === 'ignore' || defaultStore.state.nsfw === 'respect' && !props.post.isSensitive);
const show = computed(() => safe.value || hover.value); const show = computed(() => safe.value);
function enterHover(): void {
hover.value = true;
}
function leaveHover(): void {
hover.value = false;
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>

10
packages/frontend/src/pages/gallery/post.vue
View File

@ -10,14 +10,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_root"> <div class="_root">
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> <Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="post" class="rkxwuolj"> <div v-if="post" class="rkxwuolj">
<div class="files">
<div v-for="file in post.files" :key="file.id" class="file">
<img :src="file.url"/>
</div>
</div>
<div class="body"> <div class="body">
<div class="title">{{ post.title }}</div> <div class="title">{{ post.title }}</div>
<div class="description"><Mfm :text="post.description"/></div> <div class="description"><Mfm :text="post.description"/></div>
<div class="files">
<div v-for="file in post.files" :key="file.id" class="file">
<img :src="file.url"/>
</div>
</div>
<div class="info"> <div class="info">
<i class="ti ti-clock"></i> <MkTime :time="post.createdAt" mode="detail"/> <i class="ti ti-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
</div> </div>