From d9433add4b5e74100941628c02ee87d0ac01c586 Mon Sep 17 00:00:00 2001
From: GustavodePaulaGorges <gustavodep.gorges@gmail.com>
Date: Thu, 22 May 2025 22:41:11 -0300
Subject: [PATCH 1/2] Melhoras no mapa completas - MAPDETAILS 7

---
 src/assets/Shadow Down.svg          | 10 ++++++++
 src/components/Map/Column.jsx       | 15 +++++++++--
 src/components/Map/style.module.css | 11 +++++---
 src/global.css                      | 10 ++++++--
 src/pages/Map/index.jsx             | 37 ++++++++++++++-------------
 src/pages/Map/style.module.css      | 39 ++++++++++++++++++++++++++---
 6 files changed, 94 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/Shadow Down.svg

diff --git a/src/assets/Shadow Down.svg b/src/assets/Shadow Down.svg
new file mode 100644
index 0000000..d16eb2d
--- /dev/null
+++ b/src/assets/Shadow Down.svg	
@@ -0,0 +1,10 @@
+<svg width="375" height="167" viewBox="0 0 375 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 9C17.6331 0.95682 38.2192 2.9423 53.9901 14.2072L59.7266 18.3047C81.1601 33.6144 109.617 34.8052 132.255 21.3397L140.039 16.7096C148.605 11.6144 158.045 8.15925 167.875 6.52075L195.573 1.90444C218.679 -1.94644 242.406 1.0921 263.796 10.6409C279.094 17.4703 295.659 21 312.412 21H314.396C326.078 21 337.704 19.408 348.956 16.2681L375 9V167H0V9Z" fill="url(#paint0_linear_588_24510)"/>
+<defs>
+<linearGradient id="paint0_linear_588_24510" x1="187" y1="9" x2="187" y2="141.398" gradientUnits="userSpaceOnUse">
+<stop offset="0.1" stop-color="#1C49BD" stop-opacity="0"/>
+<stop offset="0.49" stop-color="#2122B4" stop-opacity="0.7"/>
+<stop offset="1" stop-color="#002080"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Map/Column.jsx b/src/components/Map/Column.jsx
index cff130c..4ab9101 100644
--- a/src/components/Map/Column.jsx
+++ b/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>
 	);
 }
diff --git a/src/components/Map/style.module.css b/src/components/Map/style.module.css
index 80defe2..a498f0d 100644
--- a/src/components/Map/style.module.css
+++ b/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 {
diff --git a/src/global.css b/src/global.css
index 9241eb7..44aff93 100644
--- a/src/global.css
+++ b/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 {
diff --git a/src/pages/Map/index.jsx b/src/pages/Map/index.jsx
index 3826e78..202ba96 100644
--- a/src/pages/Map/index.jsx
+++ b/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>
 	);
 }
diff --git a/src/pages/Map/style.module.css b/src/pages/Map/style.module.css
index 5895523..227bcfa 100644
--- a/src/pages/Map/style.module.css
+++ b/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.8);
 }

From 4285b25e1af14843d3928209b8c769843f9472c2 Mon Sep 17 00:00:00 2001
From: GustavodePaulaGorges <gustavodep.gorges@gmail.com>
Date: Thu, 22 May 2025 22:45:32 -0300
Subject: [PATCH 2/2] Ajuste no css do card desabilitado - MAPDETAILS 7

---
 src/pages/Map/style.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Map/style.module.css b/src/pages/Map/style.module.css
index 227bcfa..1376f5d 100644
--- a/src/pages/Map/style.module.css
+++ b/src/pages/Map/style.module.css
@@ -36,5 +36,5 @@
 }
 
 .disabled {
-  filter: brightness(0.8);
+  filter: brightness(0.7);
 }