diff options
Diffstat (limited to 'packages/frontend/src/components/MkPagePreview.vue')
| -rw-r--r-- | packages/frontend/src/components/MkPagePreview.vue | 43 |
1 files changed, 21 insertions, 22 deletions
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue index 65464956be..53920da50d 100644 --- a/packages/frontend/src/components/MkPagePreview.vue +++ b/packages/frontend/src/components/MkPagePreview.vue @@ -5,15 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj" tabindex="-1"> - <div v-if="page.eyeCatchingImage" class="thumbnail"> - <MediaImage - :image="page.eyeCatchingImage" - :disableImageLink="true" - :controls="false" - :cover="true" - :class="$style.eyeCatchingImageRoot" - /> - </div> + <div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div> <article> <header> <h1 :title="page.title">{{ page.title }}</h1> @@ -31,22 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only import { } from 'vue'; import * as Misskey from 'misskey-js'; import { userName } from '@/filters/user'; -import MediaImage from '@/components/MkMediaImage.vue'; const props = defineProps<{ page: Misskey.entities.Page; }>(); </script> -<style module> -.eyeCatchingImageRoot { - width: 100%; - height: 200px; - border-radius: var(--radius) var(--radius) 0 0; - overflow: hidden; -} -</style> - <style lang="scss" scoped> .vhpxefrj { display: block; @@ -57,15 +39,32 @@ const props = defineProps<{ } > .thumbnail { + width: 100%; + height: 200px; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; + + > button { + font-size: 3.5em; + opacity: 0.7; + + &:hover { + font-size: 4em; + opacity: 0.9; + } + } + & + article { - border-radius: 0 0 var(--radius) var(--radius); + left: 100px; + width: calc(100% - 100px); } } > article { - background-color: var(--panel); padding: 16px; - border-radius: var(--radius); > header { margin-bottom: 8px; |