fixed likeBtn blur animation & profile avatar & followers count

This commit is contained in:
srgooglo 2020-10-30 14:15:34 +01:00
parent 1b557a49af
commit 7f28f854b1
3 changed files with 7 additions and 8 deletions

View File

@ -41,7 +41,7 @@
&.active {
opacity: 1;
transform: perspective(100px) translateZ(0px);
//transform: perspective(100px) translateZ(0px);
filter: blur(0px);
letter-spacing: 0.15em;
transition: opacity @blur-transition-duration linear, transform @blur-transition-duration linear, filter @blurFilter-transition-duration linear, letter-spacing @blur-transition-duration linear;
@ -49,8 +49,8 @@
&.past {
opacity: 0;
transform: perspective(100px) translateZ(-10px);
filter: blur(10px);
//transform: perspective(100px) translateZ(-10px);
filter: blur(1px);
letter-spacing: 0.2em;
transition: opacity @blur-transition-duration linear, transform @blur-transition-duration linear, filter @blurFilter-transition-duration linear, letter-spacing @blur-transition-duration linear;
}

View File

@ -34,6 +34,7 @@ class UserLayout extends React.Component {
render() {
const { styleComponent } = this.state
const toStyles = e => styles[`${styleComponent}_${e}`]
const { followers_count } = this.state.layoutData.details ?? { }
return (
<div className={toStyles("wrapper")} >
@ -47,7 +48,7 @@ class UserLayout extends React.Component {
</div>
<div className={toStyles("title")}>
<antd.Tooltip title={`${this.state.layoutData.followers ?? "Non-existent"} Followers`}>
<antd.Tooltip title={`${followers_count ?? "Non-existent"} Followers`}>
<h1>{this.state.userString}</h1>
</antd.Tooltip>

View File

@ -57,6 +57,7 @@
h1 {
margin: 0;
width: fit-content;
}
span{
@ -66,12 +67,8 @@
.UserLayout_avatar {
transform: translate(-35px, -45px);
max-height: 200px;
max-width: 120px;
&>span {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
@ -87,6 +84,7 @@
border-radius: 7px;
img {
height: 120px;
width: 120px;
}
}