feat(frontend): responsiveness for wheel of balance (root) screen bb-…

…586 (#604) * feat(frontend): add responsiveness for user-wheel page bb-586 * feat(frontend): add style variants for wheel chart bb-586 * fix(frontend): update date to be hidden for editing on non-desktop screens bb-586 --------- Co-authored-by: Farid Shabanov <[email protected]>
BinaryStudioAcademy · Sep 27, 2024 · a0142e8 · a0142e8
1 parent e15ee1b
commit a0142e8
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 15 deletions.
diff --git a/apps/frontend/src/libs/components/balance-wheel-chart/balance-wheel-chart.tsx b/apps/frontend/src/libs/components/balance-wheel-chart/balance-wheel-chart.tsx
@@ -29,11 +29,13 @@ ChartJS.register(PolarAreaController, ArcElement, Tooltip, RadialLinearScale);
 type Properties = {
 	data: ChartDataType[];
 	isAnimating?: boolean;
+	variant?: "animation" | "chat" | "root";
 };
 
 const BalanceWheelChart: React.FC<Properties> = ({
 	data,
 	isAnimating = false,
+	variant = "root",
 }: Properties) => {
 	const chartReference = useRef<ChartJS<PolarAreaType> | null>(null);
 
@@ -121,13 +123,7 @@ const BalanceWheelChart: React.FC<Properties> = ({
 	}, [data, handleUpdateChartData]);
 
 	return (
-		<div
-			className={
-				isAnimating
-					? styles["animation-container"]
-					: styles["root-wheel-container"]
-			}
-		>
+		<div className={styles[`${variant}-wheel-container`]}>
 			<canvas ref={handleRenderChart} />
 		</div>
 	);

diff --git a/apps/frontend/src/libs/components/balance-wheel-chart/styles.module.css b/apps/frontend/src/libs/components/balance-wheel-chart/styles.module.css
@@ -1,8 +1,21 @@
-.animation-container {
+.animation-wheel-container {
 	z-index: var(--z-index-low);
 	width: 250px;
 }
 
+.chat-wheel-container {
+	width: 500px;
+	height: 500px;
+}
+
 .root-wheel-container {
 	width: 500px;
+	height: 500px;
+}
+
+@media (width <= 1200px) {
+	.root-wheel-container {
+		width: 390px;
+		height: 390px;
+	}
 }
diff --git a/apps/frontend/src/pages/chat/libs/components/initial-messages/initial-messages.tsx b/apps/frontend/src/pages/chat/libs/components/initial-messages/initial-messages.tsx
@@ -32,7 +32,7 @@ const InitialMessages: React.FC = () => {
 				<div className={styles["content-container"]}>
 					<p>here&apos;s how your wheel looks like right now:</p>
 					<div className={styles["content"]}>
-						<BalanceWheelChart data={chartData} />
+						<BalanceWheelChart data={chartData} variant="chat" />
 					</div>
 				</div>
 			</div>

diff --git a/apps/frontend/src/pages/quiz/libs/components/balance-wheel/balance-wheel.tsx b/apps/frontend/src/pages/quiz/libs/components/balance-wheel/balance-wheel.tsx
@@ -105,6 +105,7 @@ const BalanceWheel: React.FC = () => {
 			<BalanceWheelChart
 				data={BALANCE_WHEEL_ANIMATED_INITIAL_DATA}
 				isAnimating
+				variant="animation"
 			/>
 			<span className={styles["text"]}>Analyzing {roundedPercentage}%</span>
 		</div>

diff --git a/.../src/pages/root/components/user-wheel/libs/components/scores-edit-modal/styles.module.css b/.../src/pages/root/components/user-wheel/libs/components/scores-edit-modal/styles.module.css
@@ -3,7 +3,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: space-between;
-	max-width: 391px;
+	width: 391px;
 	height: 783px;
 	padding: 15px 25px 28px 18px;
 	border: 1px solid var(--light-gray);

diff --git a/apps/frontend/src/pages/root/components/user-wheel/styles.module.css b/apps/frontend/src/pages/root/components/user-wheel/styles.module.css
@@ -7,6 +7,7 @@
 
 .header {
 	display: flex;
+	gap: 25%;
 	align-items: center;
 	width: 100%;
 	height: 69px;
@@ -23,15 +24,21 @@
 
 .switch-container {
 	position: relative;
-	left: 25%;
 	width: 253px;
 }
 
 .content-wrapper {
 	display: flex;
-	gap: 45px;
 	justify-content: center;
 	height: fit-content;
+	margin: 0 20px;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-left: 16px;
 }
 
 .button-wrapper {
@@ -63,3 +70,33 @@
 	flex-direction: column;
 	gap: 7px;
 }
+
+@media (width <= 1024px) {
+	.container {
+		margin-bottom: 30px;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.content-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		align-items: center;
+	}
+
+	.header {
+		display: flex;
+		flex-direction: column;
+		gap: 7px;
+		align-items: flex-start;
+		height: auto;
+	}
+
+	.switch-container {
+		left: 0;
+		align-self: center;
+	}
+}
diff --git a/apps/frontend/src/pages/root/components/user-wheel/user-wheel.tsx b/apps/frontend/src/pages/root/components/user-wheel/user-wheel.tsx
@@ -4,6 +4,7 @@ import {
 	Loader,
 	Switch,
 } from "~/libs/components/components.js";
+import { getValidClassNames } from "~/libs/helpers/helpers.js";
 import {
 	useAppDispatch,
 	useAppSelector,
@@ -50,6 +51,21 @@ const UserWheel: React.FC = () => {
 		? "Edit my wheel results"
 		: "My wheel results";
 
+	const estimationStyles = getValidClassNames(
+		styles["content"],
+		isEditingModalOpen && styles["hidden"],
+	);
+
+	const dateContainerStyles = getValidClassNames(
+		styles["date-container"],
+		isEditingModalOpen && styles["hidden"],
+	);
+
+	const modalStyles = getValidClassNames(
+		styles["content"],
+		!isEditingModalOpen && styles["hidden"],
+	);
+
 	const lastWheelUpdateDate = scoresLastUpdatedAt
 		? getFormattedDate(new Date(scoresLastUpdatedAt), "d MMM yyyy, EEEE")
 		: null;
@@ -95,7 +111,7 @@ const UserWheel: React.FC = () => {
 			<div className={styles["header"]}>
 				<div className={styles["header-text-container"]}>
 					<h4 className={styles["header-text"]}>{headerText}</h4>
-					<div className={styles["date-container"]}>
+					<div className={dateContainerStyles}>
 						<p className={styles["date"]}>{lastWheelUpdateDate}</p>
 					</div>
 				</div>
@@ -115,14 +131,16 @@ const UserWheel: React.FC = () => {
 			</div>
 			<div className={styles["content-wrapper"]}>
 				{scores.length > NO_SCORES_COUNT && (
-					<div>
+					<div className={estimationStyles}>
 						<BalanceWheelChart data={chartData} />
 						<CircularProgress
 							percentage={completionTasksPercentage ?? NO_TASKS_PERCENTAGE}
 						/>
 					</div>
 				)}
-				{isEditingModalOpen && handleGetModal(editMode)}
+				<div className={modalStyles}>
+					{isEditingModalOpen && handleGetModal(editMode)}
+				</div>
 			</div>
 			{!isEditingModalOpen && (
 				<div className={styles["button-wrapper"]}>