new media list layout
This commit is contained in:
Freeplay
parent
9b0b8a4180
commit
8ef68f559c
4 changed files with 116 additions and 119 deletions
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<div class="xubzgfgb" :class="{ cover }" :title="title">
|
||||
<canvas
|
||||
v-if="!loaded"
|
||||
ref="canvas"
|
||||
:width="size"
|
||||
:height="size"
|
||||
:title="title"
|
||||
/>
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:alt="alt"
|
||||
@load="onLoad"
|
||||
/>
|
||||
</div>
|
||||
<canvas
|
||||
v-if="!loaded"
|
||||
ref="canvas"
|
||||
:width="size"
|
||||
:height="size"
|
||||
:title="title"
|
||||
/>
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:title="title"
|
||||
:type="type"
|
||||
:alt="alt"
|
||||
:class="{ cover }"
|
||||
:style="{ 'object-fit': cover ? 'cover' : null }"
|
||||
loading="lazy"
|
||||
@load="onLoad"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -64,31 +65,20 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.xubzgfgb {
|
||||
position: relative;
|
||||
canvas,
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> canvas,
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
> canvas {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
> img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.cover {
|
||||
> img {
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<button v-if="hide" class="qjewsnkg" @click="hide = false">
|
||||
<ImgWithBlurhash
|
||||
class="bg"
|
||||
:hash="image.blurhash"
|
||||
:title="image.comment"
|
||||
:alt="image.comment"
|
||||
|
|
@ -82,20 +81,17 @@ watch(
|
|||
all: unset;
|
||||
position: relative;
|
||||
|
||||
> .bg {
|
||||
filter: brightness(0.5);
|
||||
}
|
||||
|
||||
> .text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0,0,0,0.5);
|
||||
|
||||
> .wrapper {
|
||||
display: table-cell;
|
||||
|
|
@ -112,7 +108,6 @@ watch(
|
|||
|
||||
.gqnyydlz {
|
||||
position: relative;
|
||||
//box-shadow: 0 0 0 1px var(--divider) inset;
|
||||
background: var(--bg);
|
||||
|
||||
> .hide {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="hoawjimk">
|
||||
<div class="hoawjimk files">
|
||||
<XBanner
|
||||
v-for="media in mediaList.filter((media) => !previewable(media))"
|
||||
:key="media.id"
|
||||
|
|
@ -7,14 +7,16 @@
|
|||
/>
|
||||
<div
|
||||
v-if="mediaList.filter((media) => previewable(media)).length > 0"
|
||||
class="gird-container"
|
||||
class="grid-container"
|
||||
:data-count="
|
||||
mediaList.filter((media) => previewable(media)).length < 5
|
||||
? mediaList.filter((media) => previewable(media)).length
|
||||
: null
|
||||
"
|
||||
:class="{ dmWidth: inDm }"
|
||||
>
|
||||
<div
|
||||
ref="gallery"
|
||||
:data-count="
|
||||
mediaList.filter((media) => previewable(media)).length
|
||||
"
|
||||
@click.stop
|
||||
>
|
||||
<template
|
||||
|
|
@ -200,7 +202,7 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
max-width: 40rem;
|
||||
}
|
||||
|
||||
> .gird-container {
|
||||
> .grid-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
|
|
@ -208,71 +210,74 @@ const previewable = (file: misskey.entities.DriveFile): boolean => {
|
|||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
&[data-count] {
|
||||
padding-top: 56.25%; // 16:9;
|
||||
> div {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-count="1"] > div {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
&[data-count="2"] > div {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
&[data-count="3"] > div {
|
||||
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"] > div {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
}
|
||||
|
||||
&:not([data-count]) > div > div {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-gap: 8px;
|
||||
|
||||
> * {
|
||||
> div, > button {
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
pointer-events: all;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
&[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) {
|
||||
> :nth-child(1) {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
> *:nth-child(2) {
|
||||
> :nth-child(2) {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
> *:nth-child(3) {
|
||||
> :nth-child(3) {
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
> *:nth-child(4) {
|
||||
> :nth-child(4) {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
:class="{
|
||||
collapsed,
|
||||
isLong,
|
||||
manyImages: note.files.length > 4,
|
||||
showContent: note.cw && !showContent,
|
||||
disableAnim: disableMfm,
|
||||
}"
|
||||
|
|
@ -96,9 +97,7 @@
|
|||
:to="`/notes/${note.renoteId}`"
|
||||
>{{ i18n.ts.quoteAttached }}: ...</MkA
|
||||
>
|
||||
<div v-if="note.files.length > 0" class="files">
|
||||
<XMediaList :media-list="note.files" />
|
||||
</div>
|
||||
<XMediaList v-if="note.files.length > 0" :media-list="note.files" />
|
||||
<XPoll v-if="note.poll" :note="note" class="poll" />
|
||||
<template v-if="detailed">
|
||||
<MkUrlPreview
|
||||
|
|
@ -188,11 +187,14 @@ const emit = defineEmits<{
|
|||
|
||||
const cwButton = ref<HTMLElement>();
|
||||
const showMoreButton = ref<HTMLElement>();
|
||||
const isLong =
|
||||
!props.detailedView &&
|
||||
props.note.cw == null &&
|
||||
props.note.text != null &&
|
||||
(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
|
||||
const isLong = !props.detailedView
|
||||
&& ( props.note.cw == null
|
||||
&& (props.note.text != null
|
||||
&& (props.note.text.split("\n").length > 9 || props.note.text.length > 500)
|
||||
)
|
||||
|| props.note.files.length > 4
|
||||
);
|
||||
|
||||
const collapsed = $ref(props.note.cw == null && isLong);
|
||||
|
||||
const urls = props.note.text
|
||||
|
|
@ -285,7 +287,7 @@ function focusFooter(ev) {
|
|||
background: var(--buttonHoverBg);
|
||||
}
|
||||
}
|
||||
> .files {
|
||||
> :deep(.files) {
|
||||
margin-top: 0.4em;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
|
@ -332,27 +334,32 @@ function focusFooter(ev) {
|
|||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
&.collapsed > .body {
|
||||
}
|
||||
&.collapsed {
|
||||
&.manyImages {
|
||||
max-height: calc(9em + 200px);
|
||||
}
|
||||
> .body {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.showContent {
|
||||
> .body {
|
||||
min-height: 2em;
|
||||
max-height: 5em;
|
||||
filter: blur(4px);
|
||||
:deep(span) {
|
||||
animation: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
:deep(img) {
|
||||
filter: blur(12px);
|
||||
}
|
||||
}
|
||||
&.showContent {
|
||||
> .body {
|
||||
min-height: 2em;
|
||||
max-height: 5em;
|
||||
filter: blur(4px);
|
||||
:deep(span) {
|
||||
animation: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
:deep(.fade) {
|
||||
inset: 0;
|
||||
top: 40px;
|
||||
:deep(img) {
|
||||
filter: blur(12px);
|
||||
}
|
||||
}
|
||||
:deep(.fade) {
|
||||
inset: 0;
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.disableAnim :deep(span) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue