better compact attachments

This commit is contained in:
Henry Jameson 2021-06-18 14:12:50 +03:00
parent 5c2744b426
commit bfe31e20ea
4 changed files with 20 additions and 13 deletions

View file

@ -68,6 +68,7 @@ const Attachment = {
'-nsfw-placeholder': this.hidden '-nsfw-placeholder': this.hidden
}, },
'-' + this.type, '-' + this.type,
'-' + this.size,
`-${this.useContainFit ? 'contain' : 'cover'}-fit` `-${this.useContainFit ? 'contain' : 'cover'}-fit`
] ]
}, },
@ -102,10 +103,18 @@ const Attachment = {
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown' return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
}, },
useModal () { useModal () {
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio'] let modalTypes = []
: this.mergedConfig.playVideosInModal switch (this.size) {
? ['image', 'video'] case 'hide':
: ['image'] case 'small':
modalTypes = ['image', 'video', 'audio', 'flash']
break
default:
modalTypes = this.mergedConfig.playVideosInModal
? ['image', 'video', 'flash']
: ['image']
break
}
return modalTypes.includes(this.type) return modalTypes.includes(this.type)
}, },
...mapGetters(['mergedConfig']) ...mapGetters(['mergedConfig'])

View file

@ -95,7 +95,10 @@
height: 0; height: 0;
width: 100%; width: 100%;
flex-grow: 1; flex-grow: 1;
margin-top: 0.5em;
&:not(:first-child) {
margin-top: 0.5em;
}
} }
&.-long { &.-long {

View file

@ -123,6 +123,7 @@
} }
&.-compact { &.-compact {
align-items: top;
flex-direction: row; flex-direction: row;
--emoji-size: 16px; --emoji-size: 16px;
@ -140,9 +141,7 @@
mask-size: auto 3.5em, auto auto; mask-size: auto 3.5em, auto auto;
mask-position: 0 0, 0 0; mask-position: 0 0, 0 0;
mask-repeat: repeat-x, repeat; mask-repeat: repeat-x, repeat;
mask-image: mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
linear-gradient(to top, white 0.5em, transparent 2.5em),
linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */ /* Autoprefixed seem to ignore this one, and also syntax is different */
-webkit-mask-composite: xor; -webkit-mask-composite: xor;
@ -154,6 +153,7 @@
flex: 1 1 0; flex: 1 1 0;
min-width: 5em; min-width: 5em;
height: 100%; height: 100%;
margin-left: 0.5em;
} }
.summary-wrapper { .summary-wrapper {

View file

@ -51,10 +51,5 @@ $status-margin: 0.75em;
.StatusContent { .StatusContent {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
&.-compact {
flex {
display: flex;
}
}
} }
</style> </style>