better compact attachments
This commit is contained in:
parent
5c2744b426
commit
bfe31e20ea
4 changed files with 20 additions and 13 deletions
|
@ -68,6 +68,7 @@ const Attachment = {
|
|||
'-nsfw-placeholder': this.hidden
|
||||
},
|
||||
'-' + this.type,
|
||||
'-' + this.size,
|
||||
`-${this.useContainFit ? 'contain' : 'cover'}-fit`
|
||||
]
|
||||
},
|
||||
|
@ -102,10 +103,18 @@ const Attachment = {
|
|||
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
|
||||
},
|
||||
useModal () {
|
||||
const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
|
||||
: this.mergedConfig.playVideosInModal
|
||||
? ['image', 'video']
|
||||
: ['image']
|
||||
let modalTypes = []
|
||||
switch (this.size) {
|
||||
case 'hide':
|
||||
case 'small':
|
||||
modalTypes = ['image', 'video', 'audio', 'flash']
|
||||
break
|
||||
default:
|
||||
modalTypes = this.mergedConfig.playVideosInModal
|
||||
? ['image', 'video', 'flash']
|
||||
: ['image']
|
||||
break
|
||||
}
|
||||
return modalTypes.includes(this.type)
|
||||
},
|
||||
...mapGetters(['mergedConfig'])
|
||||
|
|
|
@ -95,7 +95,10 @@
|
|||
height: 0;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
margin-top: 0.5em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.-long {
|
||||
|
|
|
@ -123,6 +123,7 @@
|
|||
}
|
||||
|
||||
&.-compact {
|
||||
align-items: top;
|
||||
flex-direction: row;
|
||||
|
||||
--emoji-size: 16px;
|
||||
|
@ -140,9 +141,7 @@
|
|||
mask-size: auto 3.5em, auto auto;
|
||||
mask-position: 0 0, 0 0;
|
||||
mask-repeat: repeat-x, repeat;
|
||||
mask-image:
|
||||
linear-gradient(to top, white 0.5em, transparent 2.5em),
|
||||
linear-gradient(to top, white, white);
|
||||
mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
|
||||
|
||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
||||
-webkit-mask-composite: xor;
|
||||
|
@ -154,6 +153,7 @@
|
|||
flex: 1 1 0;
|
||||
min-width: 5em;
|
||||
height: 100%;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.summary-wrapper {
|
||||
|
|
|
@ -51,10 +51,5 @@ $status-margin: 0.75em;
|
|||
.StatusContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
&.-compact {
|
||||
flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue