From 9afbd45ff66b462bdf9f3a7643392ef437ad82f1 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Mon, 19 Sep 2022 15:23:46 +0200
Subject: [PATCH] cover expands on click

---
 packages/app/src/pages/account/index.jsx  | 15 ++++++++++++++-
 packages/app/src/pages/account/index.less | 10 ++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/pages/account/index.jsx b/packages/app/src/pages/account/index.jsx
index 2fab6148..0e62888e 100644
--- a/packages/app/src/pages/account/index.jsx
+++ b/packages/app/src/pages/account/index.jsx
@@ -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">
diff --git a/packages/app/src/pages/account/index.less b/packages/app/src/pages/account/index.less
index 732b8396..61fcb6d9 100644
--- a/packages/app/src/pages/account/index.less
+++ b/packages/app/src/pages/account/index.less
@@ -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 {