From 04ba42f7cd31b84ff35d0e4b4d5dfc9537b3013c Mon Sep 17 00:00:00 2001 From: edgarxongas Date: Thu, 2 Sep 2021 11:49:12 -0300 Subject: [PATCH] fixed responsiveness for mobile --- src/components/AppWrapper/index.tsx | 15 +++ .../CompletedChallenges/styles.module.scss | 6 + src/components/NavBar/styles.module.scss | 17 ++- src/components/Profile/Profile.module.scss | 8 +- src/components/Profile/index.tsx | 5 +- src/components/Table/index.tsx | 59 +++++++++ src/components/Table/styles.module.scss | 117 ++++++++++++++++++ src/context/CountdownContext.tsx | 2 +- src/pages/index.tsx | 7 +- src/pages/leaderboard.tsx | 52 ++------ src/styles/pages/Home.module.scss | 3 +- src/styles/pages/leaderboard.module.scss | 97 ++------------- src/styles/pages/login.module.scss | 14 ++- 13 files changed, 262 insertions(+), 140 deletions(-) create mode 100644 src/components/AppWrapper/index.tsx create mode 100644 src/components/Table/index.tsx create mode 100644 src/components/Table/styles.module.scss diff --git a/src/components/AppWrapper/index.tsx b/src/components/AppWrapper/index.tsx new file mode 100644 index 0000000..17a215b --- /dev/null +++ b/src/components/AppWrapper/index.tsx @@ -0,0 +1,15 @@ +import { NavBar } from "../NavBar"; +import { ReactNode } from "react"; + +type ReactChildren = { + children: ReactNode; +} + +export default function AppWrapper({children}:ReactChildren){ + return( + <> + + {children} + + ); +} \ No newline at end of file diff --git a/src/components/CompletedChallenges/styles.module.scss b/src/components/CompletedChallenges/styles.module.scss index 196adeb..5dfaae7 100644 --- a/src/components/CompletedChallenges/styles.module.scss +++ b/src/components/CompletedChallenges/styles.module.scss @@ -17,4 +17,10 @@ font-size: 1.5rem; } } +} + +@media screen and (max-width: 800px) { + .completedChallenges { + margin: 2rem 0; + } } \ No newline at end of file diff --git a/src/components/NavBar/styles.module.scss b/src/components/NavBar/styles.module.scss index eeea0a6..374ce97 100644 --- a/src/components/NavBar/styles.module.scss +++ b/src/components/NavBar/styles.module.scss @@ -57,15 +57,30 @@ height: 4rem; flex-direction: row; + + img { + width: 4rem; + height: 4rem; + } + > div { flex-direction: row; > div { + width: 1.5rem; + &.selected::before { + height: 2.3rem; + width: 0.3rem; left: initial; - top: - 1.35rem; + top: - 1rem; + //top: - 1.35rem; transform: rotate(-90deg); } + + &:last-child { + margin-right: 3rem; + } } } } diff --git a/src/components/Profile/Profile.module.scss b/src/components/Profile/Profile.module.scss index 9dd0f90..0aeeeb7 100644 --- a/src/components/Profile/Profile.module.scss +++ b/src/components/Profile/Profile.module.scss @@ -32,11 +32,17 @@ .githubButton { margin-left: auto; cursor: pointer; - + text-align: center; p { margin: 0; font-size: 0.875rem; text-align: center; } } +} + +@media screen and (max-width: 800px){ + .profileContainer { + margin-top: 2rem; + } } \ No newline at end of file diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx index c804fd3..b297e7a 100644 --- a/src/components/Profile/index.tsx +++ b/src/components/Profile/index.tsx @@ -12,7 +12,9 @@ export default function Profile(){ return(
+ {user? +
{user? user.name: name? name:'Player 404'}

@@ -24,9 +26,10 @@ export default function Profile(){ {!user &&

router.push('/login')} className={styles.githubButton} title="Login ou Mudar nome do usuário"> github -

Login

+

Sign In

} +
); } \ No newline at end of file diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx new file mode 100644 index 0000000..02d6270 --- /dev/null +++ b/src/components/Table/index.tsx @@ -0,0 +1,59 @@ +import styles from './styles.module.scss'; + +type LeaderBoard = { + name: string; + avatar: string; + level: number; + experience: number; + challengesCompleted: number; +} + +type LeaderBoardProps = { + leaderboard: LeaderBoard[] | null; +} + + +export function Table({leaderboard}:LeaderBoardProps){ + return( + + + + + + + + + + + + {leaderboard?.map((user,index)=>( + + + + + + + + + + + ))} + +
PosiçãoUsuárioDesafiosExperiência
{index+1} + {user.name} +
+ {user.name} +
+ Up + Level {user.level} +
+
+ 		+ {user.challengesCompleted} + completados + + {user.experience} + xp +
+ ); +} \ No newline at end of file diff --git a/src/components/Table/styles.module.scss b/src/components/Table/styles.module.scss new file mode 100644 index 0000000..57eab55 --- /dev/null +++ b/src/components/Table/styles.module.scss @@ -0,0 +1,117 @@ +.leaderboardTable { + width: 100%; + border-collapse: collapse; + font-family: 'Inter', sans-serif; + font-weight: 500; + + td, th { + padding: 0.5rem 1rem; + } + + td { + height: 4.5rem; + } + + th { + color: var(--text); + text-align: left; + } + + tbody { + + tr { + background-color: var(--white); + border-bottom: 7px solid #f2f3f5; + + td { + + &:first-child{ + text-align: center; + font-size: 1.5rem; + color: var(--text); + border-right: 7px solid #f2f3f5; + width: 4rem; + } + + &.profile { + width: 20rem; + display: flex; + align-items: center; + gap: 0.5rem; + + > img { + width: 3rem; + height: 3rem; + border-radius: 50%; + } + + > div { + flex: 1; + + strong { + display: block; + margin-bottom: 0.3rem; + color: var(--title); + } + + > div { + display: flex; + + span { + font-size: 0.975rem; + margin-left: 0.4rem; + color: var(--text); + font-weight: 400; + } + } + } + } + + > span{ + color: var(--blue); + margin-right: 0.4rem; + } + } + } + } +} + +@media screen and (max-width: 800px) { + .leaderboardTable { + overflow: hidden; + border-radius: 5px; + + thead { + display: none; + } + + tbody { + + tr { + width: 90vw; + display: flex; + flex-wrap: wrap; + border-radius: 5px; + margin-bottom: 10px; + border: none; + + td { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + + &:first-child { + border-bottom: 7px solid #f2f3f5; + border-bottom-right-radius: 5px; + } + + &.profile { + width: initial; + } + + } + } + } + } +} \ No newline at end of file diff --git a/src/context/CountdownContext.tsx b/src/context/CountdownContext.tsx index c6b8582..bf1b897 100644 --- a/src/context/CountdownContext.tsx +++ b/src/context/CountdownContext.tsx @@ -20,7 +20,7 @@ const CountdownContext = createContext({} as CountdownContextProviderProps); function CountdownContextProvider({children}:Record){ const { startNewChallenge } = useChallenge(); - const [ time, setTime ] = useState(0.25 * 60); + const [ time, setTime ] = useState(25 * 60); const [ isActive, setIsActive ] = useState(false); const [ hasFinish, setHasFinish ] = useState(false); const [ initialTime, setInitialTime ] = useState(time); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fc317fa..5ba7f8d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,11 +4,11 @@ import CompletedChallenges from '../components/CompletedChallenges'; import Countdown from '../components/Countdown'; import ChallengeBox from '../components/ChallengeBox'; import Head from 'next/head'; -import { NavBar } from '../components/NavBar'; import { useEffect } from 'react'; import { useAuth } from '../hooks/useAuth'; import { GetStaticProps } from 'next'; import styles from '../styles/pages/Home.module.scss'; +import AppWrapper from '../components/AppWrapper'; export default function Home() { @@ -19,8 +19,7 @@ export default function Home() { }, []); return ( - <> - +
Home | MoveIt @@ -38,6 +37,6 @@ export default function Home() {
- + ) } \ No newline at end of file diff --git a/src/pages/leaderboard.tsx b/src/pages/leaderboard.tsx index cf09ec4..d889454 100644 --- a/src/pages/leaderboard.tsx +++ b/src/pages/leaderboard.tsx @@ -11,6 +11,8 @@ import { useAuth } from '../hooks/useAuth'; import { database, getDocs, collection, query, limit, orderBy } from '../service'; // Style import styles from '../styles/pages/leaderboard.module.scss'; +import AppWrapper from '../components/AppWrapper'; +import { Table } from '../components/Table'; type LeaderBoard = { name: string; @@ -24,7 +26,7 @@ type LeaderBoardProps = { leaderboard: LeaderBoard[] | null; } -export default function Ranking({leaderboard}:LeaderBoardProps){ +export default function Leaderboard({leaderboard}:LeaderBoardProps){ const { setCurrentPage } = useAuth(); useEffect(() => { @@ -32,56 +34,20 @@ export default function Ranking({leaderboard}:LeaderBoardProps){ }, []) return( - <> - +
+ Leaderboard | MoveIt +

Leaderboard

- - - - - - - - - - - - {leaderboard?.map((user,index)=>( - - - - - - - - - - ))} - -
PosiçãoUsuárioDesafiosExperiência
{index+1} - {user.name} -
- {user.name} -
- Up - Level {user.level} -
-
- 		- {user.challengesCompleted} - completados - - {user.experience} - xp -
+

Apenas usuários autenticados aparecerão no leaderboard!

+ - + ); } diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss index 05cf174..a07db7d 100644 --- a/src/styles/pages/Home.module.scss +++ b/src/styles/pages/Home.module.scss @@ -20,12 +20,13 @@ @media screen and (max-width: 800px){ .container { - margin-top: 2.5rem; + margin-top: 3rem; section { padding: 1rem 0; display: flex; flex-direction: column; + gap: 1rem; } } } \ No newline at end of file diff --git a/src/styles/pages/leaderboard.module.scss b/src/styles/pages/leaderboard.module.scss index 89ae837..4bfbfef 100644 --- a/src/styles/pages/leaderboard.module.scss +++ b/src/styles/pages/leaderboard.module.scss @@ -3,99 +3,26 @@ max-width: 992px; margin: 0 auto; padding: 2.5rem 2rem; + //overflow: hidden; h1 { margin-bottom: 2rem; } - table { - width: 100%; - border-collapse: collapse; - font-family: 'Inter', sans-serif; - font-weight: 500; - - - td, th { - padding: 0.5rem 1rem; - } - - td { - height: 4.5rem; - } - - th { - color: var(--text); - } - - thead { - text-align: left; - - } - - tbody { - - tr { - background-color: var(--white); - border-bottom: 7px solid #f2f3f5; - - td { - - &:first-child{ - text-align: center; - font-size: 1.5rem; - color: var(--text); - border-right: 7px solid #f2f3f5; - width: 4rem; - } - - &:nth-child(2){ - width: 40%; - display: flex; - align-items: center; - gap: 0.5rem; - - > img { - width: 3rem; - height: 3rem; - border-radius: 50%; - } - - > div { - width: 20rem; - flex: 1; - - strong { - display: block; - margin-bottom: 0.3rem; - color: var(--title); - } - - > div { - display: flex; - - span { - font-size: 0.975rem; - margin-left: 0.4rem; - color: var(--text); - font-weight: 400; - } - } - } - } - - > span{ - color: var(--blue); - margin-right: 0.4rem; - /* font-weight: 500; */ - } - } - } - } - } - > p { text-align: center; font-weight: 500; margin-top: 1rem; } +} + +@media screen and (max-width: 800px) { + .container { + padding: 1rem; + margin-top: 4rem; + + h1 { + margin-bottom: 1rem; + } + } } \ No newline at end of file diff --git a/src/styles/pages/login.module.scss b/src/styles/pages/login.module.scss index 6c7ed8b..091423a 100644 --- a/src/styles/pages/login.module.scss +++ b/src/styles/pages/login.module.scss @@ -1,8 +1,9 @@ .container { background-color: #5965E0; height: 100vh; - display: flex; - flex-direction: column; + /* display: flex; + flex-direction: column; */ + box-sizing: border-box; color: var(--white); @@ -118,6 +119,7 @@ } } + @media screen and (max-width: 800px){ .container { @@ -125,7 +127,13 @@ .bigLogo { display: none; } - + } + + main { + box-sizing: border-box; + width: 90%; + margin: 0 auto; + overflow: hidden; } } } \ No newline at end of file