From eb644dc882b52c6411afbe68806b589d7e844c7e Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Fri, 15 Nov 2024 13:12:01 +0000 Subject: [PATCH 01/10] fix: opportunty card responsiveness Signed-off-by: upsaurav12 . --- src/reusecore/Layout/Row.js | 5 +++++ .../Careers-Internship-grid/InternshipPage.style.js | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/src/reusecore/Layout/Row.js b/src/reusecore/Layout/Row.js index 4f5bc953fb1c..57c5b6769b1f 100644 --- a/src/reusecore/Layout/Row.js +++ b/src/reusecore/Layout/Row.js @@ -5,6 +5,11 @@ const RowWrapper = styled.div` display: flex; margin-left: -15px; margin-right: -15px; + + @media (max-width: 1440px) { + flex-wrap: wrap; + } + @media (max-width: 760px) { flex-wrap: wrap; } diff --git a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js index 26776273efbf..7ad9f1e97ecd 100644 --- a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js +++ b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js @@ -123,6 +123,13 @@ p{ @media screen and (max-width: 991px) { .opportunity-card { height: 12.5rem; + width: 16rem; + } + } + + @media screen and (max-width: 700px) { + .opportunity-card { + width: 23rem; } } From 9dcf7502bbf5084feb56e20349ac1fdf2d53ba91 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Fri, 15 Nov 2024 13:26:22 +0000 Subject: [PATCH 02/10] fix:full time Signed-off-by: upsaurav12 . --- .../Careers/Careers-Internship-grid/InternshipPage.style.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js index 7ad9f1e97ecd..98081fde0fd0 100644 --- a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js +++ b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js @@ -115,7 +115,8 @@ p{ } .full_time { - .opportunity-card { + flex-wrap: wrap; + .opportunity-card { height: 12rem; } } From db7adb42e4f3395c546a1d91c4437bc11c0f8156 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Mon, 18 Nov 2024 12:28:26 +0000 Subject: [PATCH 03/10] fix: cards responsive issue on mobile view Signed-off-by: upsaurav12 . --- src/reusecore/Layout/Row.js | 1 + .../Careers/Careers-Internship-grid/InternshipPage.style.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/src/reusecore/Layout/Row.js b/src/reusecore/Layout/Row.js index 57c5b6769b1f..4b52946d27d9 100644 --- a/src/reusecore/Layout/Row.js +++ b/src/reusecore/Layout/Row.js @@ -5,6 +5,7 @@ const RowWrapper = styled.div` display: flex; margin-left: -15px; margin-right: -15px; + flex-wrap: wrap; @media (max-width: 1440px) { flex-wrap: wrap; diff --git a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js index 98081fde0fd0..8847dffeecac 100644 --- a/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js +++ b/src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js @@ -128,6 +128,12 @@ p{ } } + @media only screen and (max-width: 489px) { + .opportunity-card { + width: 100% !important; + } + } + @media screen and (max-width: 700px) { .opportunity-card { width: 23rem; From ce8c583f8486c06b90c96ab07acf5fb19145f152 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Mon, 2 Dec 2024 12:05:47 +0000 Subject: [PATCH 04/10] fix: handbook responsice issue Signed-off-by: upsaurav12 . --- src/components/handbook-navigation/toc.style.js | 2 +- .../Adventures-of-Five/adventures.style.js | 4 ---- src/sections/Community/Handbook/Handbook.style.js | 14 +++++++++++--- src/sections/Community/Handbook/mentorships.js | 6 ++++++ 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/handbook-navigation/toc.style.js b/src/components/handbook-navigation/toc.style.js index aa68a9852a6c..a2d8e4016116 100644 --- a/src/components/handbook-navigation/toc.style.js +++ b/src/components/handbook-navigation/toc.style.js @@ -106,7 +106,7 @@ const TOCWrapper = styled.div` color: ${(props) => props.theme.secondaryColor}; } - @media only screen and (max-width: 750px){ + @media only screen and (max-width: 1400px){ position: initial; margin-right: 3rem; width: auto; diff --git a/src/sections/Community/Adventures-of-Five/adventures.style.js b/src/sections/Community/Adventures-of-Five/adventures.style.js index 88a50f319dc6..f702d16e4035 100644 --- a/src/sections/Community/Adventures-of-Five/adventures.style.js +++ b/src/sections/Community/Adventures-of-Five/adventures.style.js @@ -45,10 +45,6 @@ export const AdventuresWrapper = styled.div` padding-top: 7rem; margin-top: -7rem; } - @media (min-width: 750px) { - margin-top: -36rem; - margin-left: 20rem; - } display: flex; } diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js index 68a77ec63999..1ef246a222cf 100644 --- a/src/sections/Community/Handbook/Handbook.style.js +++ b/src/sections/Community/Handbook/Handbook.style.js @@ -37,6 +37,8 @@ export const HandbookWrapper = styled.div` } .page-section{ + margin-top: -48rem; + margin-left: 20rem; h2{ padding-top: 7rem; margin-top: -7rem; @@ -45,10 +47,16 @@ export const HandbookWrapper = styled.div` padding-top: 7rem; margin-top: -7rem; } - @media (min-width: 750px) { - margin-top: -36rem; - margin-left: 20rem; + + @media (max-width: 1400px) { + margin-top: 0rem; + margin-left: 0rem; + } + + @media (max-width: 920px) { + margin-left: 0rem; } + display: flex; @media screen and (min-width: 768px) and (max-height: 1145px) { diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js index 9b5db630e9b8..85afbb350485 100644 --- a/src/sections/Community/Handbook/mentorships.js +++ b/src/sections/Community/Handbook/mentorships.js @@ -12,6 +12,12 @@ const ConductWrapper = styled.div` padding: 0 5rem 3rem 20rem; margin-top: -46.5rem; + @media screen and (max-width: 1400px) { + margin-top: -7.5rem; + padding-left: 0rem; + padding-right: 0rem; + } + @media screen and (min-width: 768px) and (max-height: 1145px) { margin-top : -80vh From 72c75c6d0f1db2f4c6f14f5b15daab81b9037104 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Wed, 4 Dec 2024 12:31:33 +0000 Subject: [PATCH 05/10] fix: single job page responsive issue Signed-off-by: upsaurav12 . --- src/components/handbook-navigation/toc.style.js | 2 +- .../Careers/Career-single/CareerSingle.style.js | 5 +++-- src/sections/Careers/Career-single/index.js | 2 +- src/sections/Community/Handbook/Handbook.style.js | 11 +++-------- src/sections/Community/Handbook/mentorships.js | 9 +-------- 5 files changed, 9 insertions(+), 20 deletions(-) diff --git a/src/components/handbook-navigation/toc.style.js b/src/components/handbook-navigation/toc.style.js index a2d8e4016116..aa68a9852a6c 100644 --- a/src/components/handbook-navigation/toc.style.js +++ b/src/components/handbook-navigation/toc.style.js @@ -106,7 +106,7 @@ const TOCWrapper = styled.div` color: ${(props) => props.theme.secondaryColor}; } - @media only screen and (max-width: 1400px){ + @media only screen and (max-width: 750px){ position: initial; margin-right: 3rem; width: auto; diff --git a/src/sections/Careers/Career-single/CareerSingle.style.js b/src/sections/Careers/Career-single/CareerSingle.style.js index 974038ab538f..d434dbe79eaf 100644 --- a/src/sections/Careers/Career-single/CareerSingle.style.js +++ b/src/sections/Careers/Career-single/CareerSingle.style.js @@ -13,9 +13,10 @@ const CareerPageWrapper = styled.div` border-bottom: 1px solid rgba(0, 0, 0, 0.2); } - @media screen and (max-width: 767px) { + @media screen and (max-width: 1200px) { .job-header-row { flex-direction: column-reverse; + align-items: center; } } @@ -70,7 +71,7 @@ const CareerPageWrapper = styled.div` } } - @media screen and (max-width: 767px) { + @media screen and (max-width: 1200px) { .layer5-logo { margin: 0 auto 1.5rem; } diff --git a/src/sections/Careers/Career-single/index.js b/src/sections/Careers/Career-single/index.js index a44d059797fb..78c0ab367f36 100644 --- a/src/sections/Careers/Career-single/index.js +++ b/src/sections/Careers/Career-single/index.js @@ -19,7 +19,7 @@ const CareerSingle = ({ data }) => {
- +
Start Date
diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js index 1ef246a222cf..e5a4c6556c71 100644 --- a/src/sections/Community/Handbook/Handbook.style.js +++ b/src/sections/Community/Handbook/Handbook.style.js @@ -47,14 +47,9 @@ export const HandbookWrapper = styled.div` padding-top: 7rem; margin-top: -7rem; } - - @media (max-width: 1400px) { - margin-top: 0rem; - margin-left: 0rem; - } - - @media (max-width: 920px) { - margin-left: 0rem; + @media (min-width: 750px) { + margin-top: -36rem; + margin-left: 20rem; } display: flex; diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js index 85afbb350485..6869c50215cc 100644 --- a/src/sections/Community/Handbook/mentorships.js +++ b/src/sections/Community/Handbook/mentorships.js @@ -11,13 +11,6 @@ const ConductWrapper = styled.div` padding: 0 5rem 3rem 20rem; margin-top: -46.5rem; - - @media screen and (max-width: 1400px) { - margin-top: -7.5rem; - padding-left: 0rem; - padding-right: 0rem; - } - @media screen and (min-width: 768px) and (max-height: 1145px) { margin-top : -80vh @@ -152,7 +145,7 @@ const MentorshipPrograms = () => {
- +

{name}

{description}

From feb3c60be9e20d6c0b070cd5050b04f213bd56c0 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Wed, 4 Dec 2024 12:44:54 +0000 Subject: [PATCH 06/10] fix: single job page responsive issue Signed-off-by: upsaurav12 . --- src/sections/Community/Adventures-of-Five/adventures.style.js | 4 ++++ src/sections/Community/Handbook/Handbook.style.js | 2 -- src/sections/Community/Handbook/mentorships.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/sections/Community/Adventures-of-Five/adventures.style.js b/src/sections/Community/Adventures-of-Five/adventures.style.js index f702d16e4035..88a50f319dc6 100644 --- a/src/sections/Community/Adventures-of-Five/adventures.style.js +++ b/src/sections/Community/Adventures-of-Five/adventures.style.js @@ -45,6 +45,10 @@ export const AdventuresWrapper = styled.div` padding-top: 7rem; margin-top: -7rem; } + @media (min-width: 750px) { + margin-top: -36rem; + margin-left: 20rem; + } display: flex; } diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js index e5a4c6556c71..574d1ded52c9 100644 --- a/src/sections/Community/Handbook/Handbook.style.js +++ b/src/sections/Community/Handbook/Handbook.style.js @@ -37,8 +37,6 @@ export const HandbookWrapper = styled.div` } .page-section{ - margin-top: -48rem; - margin-left: 20rem; h2{ padding-top: 7rem; margin-top: -7rem; diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js index 6869c50215cc..7dec338011b4 100644 --- a/src/sections/Community/Handbook/mentorships.js +++ b/src/sections/Community/Handbook/mentorships.js @@ -145,7 +145,7 @@ const MentorshipPrograms = () => {
- +

{name}

{description}

From 3f74e9513ef47ff695873311ad7c7f56ceab68dd Mon Sep 17 00:00:00 2001 From: Saurav Upadhyay <116784047+upsaurav12@users.noreply.github.com> Date: Wed, 4 Dec 2024 18:15:55 +0530 Subject: [PATCH 07/10] Delete src/sections/Community/Handbook/mentorships.js Signed-off-by: Saurav Upadhyay <116784047+upsaurav12@users.noreply.github.com> --- .../Community/Handbook/mentorships.js | 174 ------------------ 1 file changed, 174 deletions(-) delete mode 100644 src/sections/Community/Handbook/mentorships.js diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js deleted file mode 100644 index 7dec338011b4..000000000000 --- a/src/sections/Community/Handbook/mentorships.js +++ /dev/null @@ -1,174 +0,0 @@ -import React, { isValidElement } from "react"; -import { Container, Row, Col } from "../../../reusecore/Layout"; -import { HandbookWrapper } from "./Handbook.style"; -import styled from "styled-components"; -import Button from "../../../reusecore/Button"; -import TOC from "../../../components/handbook-navigation/index"; -import { programs_data } from "./programs-data"; -import TocPagination from "../../../components/handbook-navigation/TocPagination"; - -const ConductWrapper = styled.div` - - padding: 0 5rem 3rem 20rem; - margin-top: -46.5rem; - @media screen and (min-width: 768px) and (max-height: 1145px) { - margin-top : -80vh - - } - - - .explain-2{ - padding: 25px 0px; - .text{ - padding: 1.25rem 1.25rem 0px 1.25rem; - h2{ - font-weight: 700; - font-size: 40px; - padding: 1.25rem 0px; - } - p{ - color: ${props => props.theme.tertiaryColor}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } - img, svg { - height: auto; - width: 23rem; - display: block; - margin-left: auto; - margin-right: auto; - } - - path { - stroke: none; - } - - .communitybridge_logo_svg__cls-1{ - fill: ${props => props.theme.whiteToBlue003764}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .hacktoberfest_svg__cls-1 { - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - fill: ${props => props.theme.whiteToRed662839}; - } - - .lfx-white_svg__b{ - fill: ${props => props.theme.whiteToBlue003764}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .lfx-white_svg__c{ - fill: ${props => props.theme.whiteToBlue0096d6}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .layer5-colorMode_svg__colorMode1 { - fill: ${props => props.theme.whiteToGreen3C494F}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .mlh_svg__cls-1 { - fill: ${props => props.theme.whiteToBlack}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - .sca_svg__fil0, .sca_svg__fil6 { - fill: ${props => props.theme.whiteToBlack}; - transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - - Button{ - margin: 1.25rem 0px; - color: white; - } - - #col2 { - align-self: center - } - } - @media only screen and (max-width: 750px){ - margin-top: -2rem; - margin-left: 0; - padding: 1rem 1.5rem; - - .explain-2 div { - flex-direction: column-reverse; - } - - } - - @media only screen and (max-width: 475px){ - margin-top: -2rem; - margin-left: 0rem; - - .explain-2 img, .explain-2 svg{ - width: 15rem; - } - .explain-2 .text h2{ - font-size: 30px; - } - } - - @media only screen and (min-width: 765px){ - .first { - .list{ - display:flex; - flex-wrap:wrap - } - #col1 { - order: 2; - } - #col2 { - order: 1; - } - } - } - -`; - - -const MentorshipPrograms = () => { - const data = React.useMemo(() => programs_data); - return ( - -
-

Mentorship Programs

-
- - - - - {data.map((data) => { - const { id, name, description, buttonLink, imageLink, imagePosition } = data; - return ( -
-
- - -
-

{name}

-

{description}

-
- - - { isValidElement(imageLink) - ? imageLink - : {name} - } - - -
-
- ); - })} - - - - - - ); -}; - -export default MentorshipPrograms; From 57316861ccebf6058194fe07b36f5a8022399953 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Wed, 4 Dec 2024 12:47:14 +0000 Subject: [PATCH 08/10] fix: single job page responsive issue Signed-off-by: upsaurav12 . --- src/sections/Community/Adventures-of-Five/adventures.style.js | 1 + src/sections/Community/Handbook/Handbook.style.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/sections/Community/Adventures-of-Five/adventures.style.js b/src/sections/Community/Adventures-of-Five/adventures.style.js index 88a50f319dc6..b230007f8008 100644 --- a/src/sections/Community/Adventures-of-Five/adventures.style.js +++ b/src/sections/Community/Adventures-of-Five/adventures.style.js @@ -49,6 +49,7 @@ export const AdventuresWrapper = styled.div` margin-top: -36rem; margin-left: 20rem; } + display: flex; } diff --git a/src/sections/Community/Handbook/Handbook.style.js b/src/sections/Community/Handbook/Handbook.style.js index 574d1ded52c9..68a77ec63999 100644 --- a/src/sections/Community/Handbook/Handbook.style.js +++ b/src/sections/Community/Handbook/Handbook.style.js @@ -49,7 +49,6 @@ export const HandbookWrapper = styled.div` margin-top: -36rem; margin-left: 20rem; } - display: flex; @media screen and (min-width: 768px) and (max-height: 1145px) { From cbea4c2c067a15b9a897f6d75cb2b5dd889307c2 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Wed, 4 Dec 2024 17:03:03 +0000 Subject: [PATCH 09/10] fix: preview site Signed-off-by: upsaurav12 . --- src/reusecore/Layout/Row.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/reusecore/Layout/Row.js b/src/reusecore/Layout/Row.js index 4b52946d27d9..8cf57549aae0 100644 --- a/src/reusecore/Layout/Row.js +++ b/src/reusecore/Layout/Row.js @@ -6,7 +6,6 @@ const RowWrapper = styled.div` margin-left: -15px; margin-right: -15px; flex-wrap: wrap; - @media (max-width: 1440px) { flex-wrap: wrap; } From 5d791d44d367870681bbbb7191b9d42085367606 Mon Sep 17 00:00:00 2001 From: "upsaurav12 ." Date: Thu, 5 Dec 2024 04:23:23 +0000 Subject: [PATCH 10/10] fix: mentorship.js Signed-off-by: upsaurav12 . --- .../Community/Handbook/mentorships.js | 174 ++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 src/sections/Community/Handbook/mentorships.js diff --git a/src/sections/Community/Handbook/mentorships.js b/src/sections/Community/Handbook/mentorships.js new file mode 100644 index 000000000000..7dec338011b4 --- /dev/null +++ b/src/sections/Community/Handbook/mentorships.js @@ -0,0 +1,174 @@ +import React, { isValidElement } from "react"; +import { Container, Row, Col } from "../../../reusecore/Layout"; +import { HandbookWrapper } from "./Handbook.style"; +import styled from "styled-components"; +import Button from "../../../reusecore/Button"; +import TOC from "../../../components/handbook-navigation/index"; +import { programs_data } from "./programs-data"; +import TocPagination from "../../../components/handbook-navigation/TocPagination"; + +const ConductWrapper = styled.div` + + padding: 0 5rem 3rem 20rem; + margin-top: -46.5rem; + @media screen and (min-width: 768px) and (max-height: 1145px) { + margin-top : -80vh + + } + + + .explain-2{ + padding: 25px 0px; + .text{ + padding: 1.25rem 1.25rem 0px 1.25rem; + h2{ + font-weight: 700; + font-size: 40px; + padding: 1.25rem 0px; + } + p{ + color: ${props => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + img, svg { + height: auto; + width: 23rem; + display: block; + margin-left: auto; + margin-right: auto; + } + + path { + stroke: none; + } + + .communitybridge_logo_svg__cls-1{ + fill: ${props => props.theme.whiteToBlue003764}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .hacktoberfest_svg__cls-1 { + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + fill: ${props => props.theme.whiteToRed662839}; + } + + .lfx-white_svg__b{ + fill: ${props => props.theme.whiteToBlue003764}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .lfx-white_svg__c{ + fill: ${props => props.theme.whiteToBlue0096d6}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .layer5-colorMode_svg__colorMode1 { + fill: ${props => props.theme.whiteToGreen3C494F}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .mlh_svg__cls-1 { + fill: ${props => props.theme.whiteToBlack}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .sca_svg__fil0, .sca_svg__fil6 { + fill: ${props => props.theme.whiteToBlack}; + transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + Button{ + margin: 1.25rem 0px; + color: white; + } + + #col2 { + align-self: center + } + } + @media only screen and (max-width: 750px){ + margin-top: -2rem; + margin-left: 0; + padding: 1rem 1.5rem; + + .explain-2 div { + flex-direction: column-reverse; + } + + } + + @media only screen and (max-width: 475px){ + margin-top: -2rem; + margin-left: 0rem; + + .explain-2 img, .explain-2 svg{ + width: 15rem; + } + .explain-2 .text h2{ + font-size: 30px; + } + } + + @media only screen and (min-width: 765px){ + .first { + .list{ + display:flex; + flex-wrap:wrap + } + #col1 { + order: 2; + } + #col2 { + order: 1; + } + } + } + +`; + + +const MentorshipPrograms = () => { + const data = React.useMemo(() => programs_data); + return ( + +
+

Mentorship Programs

+
+ + + + + {data.map((data) => { + const { id, name, description, buttonLink, imageLink, imagePosition } = data; + return ( +
+
+ + +
+

{name}

+

{description}

+
+ + + { isValidElement(imageLink) + ? imageLink + : {name} + } + + +
+
+ ); + })} + + + + + + ); +}; + +export default MentorshipPrograms;