From 33317fa48ba412c158199636fd1aea00e373c2a2 Mon Sep 17 00:00:00 2001 From: James Ji Date: Sat, 4 Feb 2023 22:28:59 +1100 Subject: [PATCH 1/3] fixed responsiveness i think --- .../components/start/advice/AdviceView.tsx | 3 ++ next/src/components/start/advice/InfoCard.tsx | 1 + .../components/start/connect/ConnectView.tsx | 35 ++++++++++++++++--- .../components/start/welcome/WelcomeView.tsx | 1 + 4 files changed, 35 insertions(+), 5 deletions(-) diff --git a/next/src/components/start/advice/AdviceView.tsx b/next/src/components/start/advice/AdviceView.tsx index c0f67820..8aaa85a0 100644 --- a/next/src/components/start/advice/AdviceView.tsx +++ b/next/src/components/start/advice/AdviceView.tsx @@ -48,6 +48,8 @@ const MainContainer = styled.div` flex: 1; display: flex; flex-direction: column; + justify-content: center; + width: 100%; `; const InfoCardsContainer = styled.div` @@ -61,6 +63,7 @@ const InfoCardsContainer = styled.div` right: 0; top:0; bottom: 30px; + @media ${device.laptop} { justify-content: space-around; diff --git a/next/src/components/start/advice/InfoCard.tsx b/next/src/components/start/advice/InfoCard.tsx index 23ad92a1..54cb709b 100644 --- a/next/src/components/start/advice/InfoCard.tsx +++ b/next/src/components/start/advice/InfoCard.tsx @@ -115,6 +115,7 @@ const Button = styled.button` font-size: 20px; height: 40px; + @media ${device.laptop} { font-size: 16px; height: 32px; diff --git a/next/src/components/start/connect/ConnectView.tsx b/next/src/components/start/connect/ConnectView.tsx index 21f74aae..c128a59e 100644 --- a/next/src/components/start/connect/ConnectView.tsx +++ b/next/src/components/start/connect/ConnectView.tsx @@ -14,6 +14,8 @@ import InstagramScreenshot from "../../../../public/assets/csesoc_instagram.png" import YoutubeScreenshot from "../../../../public/assets/csesoc_youtube.png"; import SpotifyScreenshot from "../../../../public/assets/csesoc_spotify.png"; +import { device } from "../../../styles/device"; + const MainContainer = styled.div` display: flex; flex-direction: column-reverse; @@ -40,7 +42,25 @@ const Preview = styled.div` const SocialIcons = styled.div` display: flex; justify-content: center; - gap: 2rem; + + gap: 0.5rem; + + @media ${device.tablet} { + gap: 2rem; + } + + +`; + +const SocialIconImageContainer = styled.div` + position: relative; + height: 40px; + width: 40px; + + @media ${device.tablet} { + height: 60px; + width: 60px; + } `; const Button = styled.button<{ active?: boolean }>` @@ -50,15 +70,18 @@ const Button = styled.button<{ active?: boolean }>` background: none; border: none; cursor: pointer; - width: 60px; - height: 60px; border-radius: 100%; + padding: 0.5rem; ${({ active }) => active && ` box-shadow: 0 0 0 4px var(--primary-purple); `} + + @media ${device.tablet} { + padding: 1rem; + } `; const socialIcons = [ @@ -83,7 +106,7 @@ const socialIcons = [ { name: "YouTube", icon: YoutubeLogo, - link: "cseso.cc/youtube", + link: "https://cseso.cc/youtube", screenshot: YoutubeScreenshot, }, { @@ -102,7 +125,9 @@ export default function ConnectView() { {socialIcons.map(({ name, icon }) => ( ))} diff --git a/next/src/components/start/welcome/WelcomeView.tsx b/next/src/components/start/welcome/WelcomeView.tsx index 83399b8c..5cdb1a0a 100644 --- a/next/src/components/start/welcome/WelcomeView.tsx +++ b/next/src/components/start/welcome/WelcomeView.tsx @@ -9,6 +9,7 @@ const MainContainer = styled.div` justify-content: center; align-items: center; row-gap: 30px; + width: 100%; `; const blink = keyframes` From 92c312521bcd50094ff2237a3aecaee99c9cf59a Mon Sep 17 00:00:00 2001 From: James Ji Date: Sun, 5 Feb 2023 02:44:27 +1100 Subject: [PATCH 2/3] fix(start): better mobile responsiveness + remove clipping --- .../src/components/start/advice/AdviceView.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/next/src/components/start/advice/AdviceView.tsx b/next/src/components/start/advice/AdviceView.tsx index 8aaa85a0..f6f40300 100644 --- a/next/src/components/start/advice/AdviceView.tsx +++ b/next/src/components/start/advice/AdviceView.tsx @@ -57,18 +57,14 @@ const InfoCardsContainer = styled.div` flex-direction: column; overflow-y: auto; - // This is to set the bounds of the container to allow the scrollbar to show up - position:absolute; - left: 0; - right: 0; - top:0; - bottom: 30px; - + height: 70vh; + @media ${device.laptop} { justify-content: space-around; flex-direction: row; position: relative; + height: fit-content; } `; @@ -77,16 +73,16 @@ const MainButtonContainer = styled.div` align-items: center; justify-content: space-around; - padding-top: 36px; + padding-top: 12px; @media ${device.laptop} { - padding-top: 48px; + padding-top: 36px; } @media ${device.laptopL} { - padding-top: 56px; + padding-top: 48px; } @media ${device.desktop} { - padding-top: 64px; + padding-top: 56px; } `; From f9fba0029dcf6df820a0d70f7e5c5c1cf1939728 Mon Sep 17 00:00:00 2001 From: James Ji Date: Sun, 5 Feb 2023 02:51:26 +1100 Subject: [PATCH 3/3] fix(start): better mobile responsiveness + remove clipping --- next/src/components/start/connect/ConnectView.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/next/src/components/start/connect/ConnectView.tsx b/next/src/components/start/connect/ConnectView.tsx index c128a59e..f548632d 100644 --- a/next/src/components/start/connect/ConnectView.tsx +++ b/next/src/components/start/connect/ConnectView.tsx @@ -42,7 +42,6 @@ const Preview = styled.div` const SocialIcons = styled.div` display: flex; justify-content: center; - gap: 0.5rem; @media ${device.tablet} { @@ -126,7 +125,7 @@ export default function ConnectView() { {socialIcons.map(({ name, icon }) => ( ))}