RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

cover expands on click

Browse Source
This commit is contained in:
srgooglo 2022-09-19 15:23:46 +02:00
parent 8f104fd319
commit 9afbd45ff6
2 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/pages/account/index.jsx
View File

@ -182,6 +182,12 @@ export default class Account extends React.Component {
})
}
toogleCoverExpanded = async (to) => {
this.setState({
coverExpanded: to ?? !this.state.coverExpanded,
})
}
handlePageTransition = (key) => {
if (typeof key !== "string") {
console.error("Cannot handle page transition. Invalid key, only valid passing string", key)
@ -227,7 +233,14 @@ export default class Account extends React.Component {
}
return <div className="accountProfile">
{user.cover && <div ref={this.coverComponent} className="cover" style={{ backgroundImage: `url("${user.cover}")` }} />}
{user.cover && <div
className={classnames("cover", {
["expanded"]: this.state.coverExpanded
})}
ref={this.coverComponent}
style={{ backgroundImage: `url("${user.cover}")` }}
onClick={() => this.toogleCoverExpanded()}
/>}
<div className="profileCardWrapper">
<div className="profileCard">
<div className="basicData">

10
packages/app/src/pages/account/index.less
View File

@ -30,6 +30,16 @@
transform: translate(0, 10px);
transition: all 0.3s ease-in-out;
&.expanded {
height: 70vh;
transform: translate(0, 0);
background-size: cover;
background-repeat: no-repeat;
border-radius: @borderRadius;
margin-bottom: 10px;
}
}
.profileCardWrapper {