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
},
'-' + 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'])

View file

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

View file

@ -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 {

View file

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