From ac7537278c7d4701cec3f4f7c0aabb0c102f0f4a Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 8 Feb 2023 16:54:51 +0900 Subject: [PATCH] enhance(client): tweak medialist style --- .../frontend/src/components/MkMediaList.vue | 132 ++++++++---------- 1 file changed, 56 insertions(+), 76 deletions(-) diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue index f263ae0ce9..562cd3d63f 100644 --- a/packages/frontend/src/components/MkMediaList.vue +++ b/packages/frontend/src/components/MkMediaList.vue @@ -1,11 +1,11 @@ <template> -<div class="hoawjimk"> +<div> <XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/> - <div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container"> - <div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length"> + <div v-if="mediaList.filter(media => previewable(media)).length > 0" :class="$style.container"> + <div ref="gallery" :class="[$style.medias, count <= 4 ? $style['n' + count] : $style.nMany]"> <template v-for="media in mediaList.filter(media => previewable(media))"> - <XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/> - <XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/> + <XVideo v-if="media.type.startsWith('video')" :key="media.id" :class="$style.media" :video="media"/> + <XImage v-else-if="media.type.startsWith('image')" :key="media.id" :class="$style.media" class="image" :data-id="media.id" :image="media" :raw="raw"/> </template> </div> </div> @@ -32,6 +32,7 @@ const props = defineProps<{ const gallery = ref(null); const pswpZIndex = os.claimZIndex('middle'); +const count = $computed(() => props.mediaList.filter(media => previewable(media)).length); onMounted(() => { const lightbox = new PhotoSwipeLightbox({ @@ -122,82 +123,61 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { }; </script> -<style lang="scss" scoped> -.hoawjimk { - > .gird-container { - position: relative; - width: 100%; - margin-top: 4px; +<style lang="scss" module> +.container { + position: relative; + width: 100%; + margin-top: 4px; +} - &:before { - content: ''; - display: block; - padding-top: 56.25% // 16:9; +.medias { + display: grid; + grid-gap: 8px; + + &.n1 { + aspect-ratio: 16/9; + grid-template-rows: 1fr; + } + + &.n2 { + aspect-ratio: 16/9; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + } + + &.n3 { + aspect-ratio: 16/9; + grid-template-columns: 1fr 0.5fr; + grid-template-rows: 1fr 1fr; + + > .media:nth-child(1) { + grid-row: 1 / 3; } - > div { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: grid; - grid-gap: 8px; - - > * { - overflow: hidden; - border-radius: 6px; - } - - &[data-count="1"] { - grid-template-rows: 1fr; - } - - &[data-count="2"] { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - } - - &[data-count="3"] { - grid-template-columns: 1fr 0.5fr; - grid-template-rows: 1fr 1fr; - - > *:nth-child(1) { - grid-row: 1 / 3; - } - - > *:nth-child(3) { - grid-column: 2 / 3; - grid-row: 2 / 3; - } - } - - &[data-count="4"] { - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - } - - > *:nth-child(1) { - grid-column: 1 / 2; - grid-row: 1 / 2; - } - - > *:nth-child(2) { - grid-column: 2 / 3; - grid-row: 1 / 2; - } - - > *:nth-child(3) { - grid-column: 1 / 2; - grid-row: 2 / 3; - } - - > *:nth-child(4) { - grid-column: 2 / 3; - grid-row: 2 / 3; - } + > .media:nth-child(3) { + grid-column: 2 / 3; + grid-row: 2 / 3; } } + + &.n4 { + aspect-ratio: 16/9; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + } + + &.nMany { + grid-template-columns: 1fr 1fr; + + > .media { + aspect-ratio: 16/9; + } + } +} + +.media { + overflow: hidden; // clipにするとバグる + border-radius: 8px; } </style>