Melhoras no mapa completas - MAPDETAILS 7

src/components/Map/Column.jsx

@@ -1,14 +1,25 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 
 import styles from "./style.module.css";
 
 function Column({title, children, length}) {
+	const listRef = useRef(null);
+
+	useEffect(() => {
+		const el = listRef.current;
+		if (el && title == "To-do") {
+			el.scrollTop = el.scrollHeight;
+		}
+	}, []);
+
 	return (
 		<div className={styles["column"]}>
 			<span className={styles["title"]}>
 				{length} {title}
 			</span>
-			<div className={styles["cards"]}>{children}</div>
+			<div className={styles["cards"]} ref={listRef}>
+				{children}
+			</div>
 		</div>
 	);
 }

src/components/Map/style.module.css

@@ -15,8 +15,10 @@
 .cards {
 	display: flex;
 	flex-direction: column;
-	gap: 5vh;
+	gap: 3vh;
 	width: 100%;
+	overflow-y: scroll;
+	padding: 1vh 0;
 }
 
 .easy {
@@ -116,9 +118,9 @@
 }
 
 .player-profile {
-	position: fixed;
-  z-index: 10;
-  top: 126px;
+	position: relative;
+    z-index: 10;
+    top: 4dvh;
 }
 
 .name-tickets {
@@ -147,6 +149,7 @@
 .column {
 	display: flex;
 	width: 100%;
+	max-height: 33%;
 }
 
 .column .title {

src/global.css

@@ -47,7 +47,7 @@ body::-webkit-scrollbar {
 }
 
 body::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: transparent;
   border-radius: 10px;
 }
 
@@ -60,9 +60,15 @@ body::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
 
+body::-webkit-scrollbar-button {
+  display: none;
+  height: 0;
+  width: 0;
+}
+
 body {
   scrollbar-width: thin;
-  scrollbar-color: #888 #f1f1f1;
+  scrollbar-color: #888 transparent;
 }
 
 button {

src/pages/Map/index.jsx

@@ -9,7 +9,6 @@ import PlayerProfile from "@components/Map/PlayerProfile";
 import styles from "./style.module.css";
 
 const columns = [
-	{id: 4, title: "Backlog"},
 	{id: 3, title: "To-do"},
 	{id: 2, title: "In progress"},
 	{id: 1, title: "Done"}
@@ -46,14 +45,11 @@ function Map() {
 		return cards.filter((card) => {
 			if (columnTitle === "In progress") return card.id === level;
 			if (columnTitle === "Done") return card.id < level;
-			if (columnTitle === "To-do") return card.id === level + 1;
-			if (columnTitle === "Backlog") return card.id > level + 1;
+			if (columnTitle === "To-do") return card.id > level;
 			return false;
 		});
 	};
 
-	const visibleColumns = columns.filter((column) => getColumnCards(column.title).length > 0);
-
 	useEffect(() => {
 		if (lastCardRef.current) {
 			lastCardRef.current.scrollIntoView({behavior: "smooth", block: "end"});
@@ -62,19 +58,26 @@ function Map() {
 
 	return (
 		<div ref={contentRef} className={styles["content"]}>
+			<img src="../../src/assets/Shadow Down.svg" className={styles["shadowUp"]} alt="" />
 			<PlayerProfile />
-			{visibleColumns.map((column) => {
-				const columnCards = getColumnCards(column.title);
-				return (
-					<Column key={column.id} title={column.title} length={columnCards.length}>
-						{columnCards.map((card, index) => (
-							<Link key={card.title} to={card.route}>
-								<Card difficulty={card.difficulty} {...card} ref={index === cards.length - 1 ? lastCardRef : null} />
-							</Link>
-						))}
-					</Column>
-				);
-			})}
+			<div className={styles["collumnList"]}>
+				{columns.map((column) => {
+					const columnCards = getColumnCards(column.title);
+					return (
+						<Column key={column.id} title={column.title} length={columnCards.length}>
+							{columnCards.map((card, index) => {
+								const disabled = column.title == "To-do";
+								return (
+									<Link key={card.title} to={!disabled ? card.route : ""} className={disabled ? styles["disabled"] : ""}>
+										<Card difficulty={card.difficulty} {...card} ref={index === cards.length - 1 ? lastCardRef : null} />
+									</Link>
+								);
+							})}
+						</Column>
+					);
+				})}
+			</div>
+			<img src="../../src/assets/Shadow Down.svg" className={styles["shadowDown"]} alt="" />
 		</div>
 	);
 }

src/pages/Map/style.module.css

@@ -1,7 +1,40 @@
 .content {
-  padding: 160px 40px 100px 40px;
+	padding: 6dvh 10%;
+	display: flex;
+	flex-direction: column;
+	gap: 4vh;
+	justify-content: center;
+}
+
+.collumnList {
   display: flex;
+  height: 100%;
   flex-direction: column;
-  gap: 12vh;
-  overflow-x: scroll;
+  justify-content: space-around;
+}
+
+.shadowUp {
+  width: 100%;
+  height: 30dvh;
+  object-fit: cover;
+  z-index: 10;
+  rotate: 180deg;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.shadowDown {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.disabled {
+  filter: brightness(0.7);
 }