update status/user card to use same gradient mask fading effect instead of

background hack
This commit is contained in:
Henry Jameson 2019-09-15 02:14:40 +03:00
parent f0cb6fe03f
commit d2fe797821
3 changed files with 37 additions and 20 deletions

View file

@ -665,6 +665,15 @@ $status-margin: 0.75em;
height: 220px; height: 220px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
z-index: 1;
.status-content {
height: 100%;
mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, white);
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
mask-composite: exclude;
}
} }
.tall-status-hider { .tall-status-hider {
@ -676,12 +685,7 @@ $status-margin: 0.75em;
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 110px; line-height: 110px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); z-index: 2;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
&_focused {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
}
} }
.status-unhider, .cw-status-hider { .status-unhider, .cw-status-hider {

View file

@ -38,19 +38,10 @@ export default {
const rgb = (typeof color === 'string') ? hex2rgb(color) : color const rgb = (typeof color === 'string') ? hex2rgb(color) : color
const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
const gradient = [
[tintColor, this.hideBio ? '60%' : ''],
this.hideBio ? [
color, '100%'
] : [
tintColor, ''
]
].map(_ => _.join(' ')).join(', ')
return { return {
backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
backgroundImage: [ backgroundImage: [
`linear-gradient(to bottom, ${gradient})`, `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
`url(${this.user.cover_photo})` `url(${this.user.cover_photo})`
].join(', ') ].join(', ')
} }

View file

@ -2,8 +2,9 @@
<div <div
class="user-card" class="user-card"
:class="classes" :class="classes"
:style="style"
> >
<div :class="{ 'hide-bio': hideBio }" :style="style" class="background-image">
</div>
<div class="panel-heading"> <div class="panel-heading">
<div class="user-info"> <div class="user-info">
<div class="container"> <div class="container">
@ -298,7 +299,7 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.user-card { .user-card {
background-size: cover; position: relative;
.panel-heading { .panel-heading {
padding: .5em 0; padding: .5em 0;
@ -307,14 +308,35 @@
background: transparent; background: transparent;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
// create new stacking context
position: relative;
} }
.panel-body { .panel-body {
word-wrap: break-word; word-wrap: break-word;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
border-bottom-right-radius: inherit; border-bottom-right-radius: inherit;
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
// create new stacking context
position: relative;
}
.background-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
mask: linear-gradient(to top, white, transparent) bottom no-repeat,
linear-gradient(to top, white, white);
// Autoprefixed seem to ignore this one, and also syntax is different
-webkit-mask-composite: xor;
mask-composite: exclude;
background-size: cover;
mask-size: 100% 60%;
&.hide-bio {
mask-size: 100% 40px;
}
} }
p { p {