diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2022-12-27 14:36:33 +0900 |
| commit | 9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch) | |
| tree | ce5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkGalleryPostPreview.vue | |
| parent | wip: retention for dashboard (diff) | |
| download | misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2 misskey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip | |
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkGalleryPostPreview.vue')
| -rw-r--r-- | packages/client/src/components/MkGalleryPostPreview.vue | 115 |
1 files changed, 0 insertions, 115 deletions
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue deleted file mode 100644 index a133f6431b..0000000000 --- a/packages/client/src/components/MkGalleryPostPreview.vue +++ /dev/null @@ -1,115 +0,0 @@ -<template> -<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1"> - <div class="thumbnail"> - <ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/> - </div> - <article> - <header> - <MkAvatar :user="post.user" class="avatar"/> - </header> - <footer> - <span class="title">{{ post.title }}</span> - </footer> - </article> -</MkA> -</template> - -<script lang="ts" setup> -import { } from 'vue'; -import { userName } from '@/filters/user'; -import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue'; -import * as os from '@/os'; - -const props = defineProps<{ - post: any; -}>(); -</script> - -<style lang="scss" scoped> -.ttasepnz { - display: block; - position: relative; - height: 200px; - - &:hover { - text-decoration: none; - color: var(--accent); - - > .thumbnail { - transform: scale(1.1); - } - - > article { - > footer { - &:before { - opacity: 1; - } - } - } - } - - > .thumbnail { - width: 100%; - height: 100%; - position: absolute; - transition: all 0.5s ease; - - > .img { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - > article { - position: absolute; - z-index: 1; - width: 100%; - height: 100%; - - > header { - position: absolute; - top: 0; - width: 100%; - padding: 12px; - box-sizing: border-box; - display: flex; - - > .avatar { - margin-left: auto; - width: 32px; - height: 32px; - } - } - - > footer { - position: absolute; - bottom: 0; - width: 100%; - padding: 16px; - box-sizing: border-box; - color: #fff; - text-shadow: 0 0 8px #000; - background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); - - &:before { - content: ""; - display: block; - position: absolute; - z-index: -1; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(rgba(0, 0, 0, 0.4), transparent); - opacity: 0; - transition: opacity 0.5s ease; - } - - > .title { - font-weight: bold; - } - } - } -} -</style> |