-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add mobile view and fix bugs for judge images
- Loading branch information
1 parent
bb142be
commit 3375380
Showing
7 changed files
with
217 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,54 @@ | ||
| .judge-image { | ||
| mask: url(#trapezoidMask); | ||
| -webkit-mask: url(#trapezoidMask); | ||
| background-repeat: no-repeat; | ||
| } | ||
|
|
||
| .judge-card { | ||
| display: flex; | ||
| gap: 2rem; | ||
|
|
||
| &:nth-of-type(even) { | ||
| flex-direction: row-reverse; | ||
| } | ||
|
|
||
| @media (max-width: 438px) { | ||
| flex-direction: column; | ||
|
|
||
| &:nth-of-type(even) { | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| // &:nth-of-type(3) { | ||
| // We may need to change the image offset because it can be too close to thet planets on smaller screen sizes | ||
| // Make sure to also account for mobile | ||
| // transform: translateX(-50px); | ||
| // } | ||
|
|
||
| .svg-container { | ||
| display: flex; | ||
| position: relative; | ||
| min-width: 180px; | ||
|
|
||
| .svg-image { | ||
| min-width: 160px; | ||
| top: 0; | ||
| left: 0; | ||
|
|
||
| .judge-image { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| } | ||
|
|
||
| .orange-bar { | ||
| position: absolute; | ||
| transform: translateX(145px); | ||
| } | ||
| } | ||
|
|
||
| .judge-info { | ||
| h3 { | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .fun-fact { | ||
| max-width: 65ch; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| export const JudgeInfo = [ | ||
| { | ||
| name: "Julia Nguyen", | ||
| pronouns: "She/Her", | ||
| position: "Product Designer @ ServiceNow", | ||
| funFact: "I enjoy designing and sewing my clothes for myself.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863617/frontiers24/judges/julia_nguyen_a2mnj2.webp", | ||
| }, | ||
| { | ||
| name: "Alan Tran", | ||
| pronouns: "He/Him", | ||
| position: "UX Engineer @ Illumina", | ||
| funFact: | ||
| "I want to create a public website that objectively scores the best pho in San Diego/OC area.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863614/frontiers24/judges/alan_tran_axarse.webp", | ||
| }, | ||
| { | ||
| name: "Dexter Zavalza", | ||
| pronouns: "He/Him", | ||
| position: "Conversational AI UX Design Lead (Manager) @ Deloitte", | ||
| funFact: "First job out of college was in a surfboard factory.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863615/frontiers24/judges/dexter_zavalza_pgx3sy.webp", | ||
| }, | ||
| { | ||
| name: "Andrew Nguyen", | ||
| pronouns: "He/Him", | ||
| position: "Consultant (UX / Experience Design) @ Arup", | ||
| funFact: | ||
| "I’ve appeared on the livestreams of 2 separate large esports broadcasts: the 2017 Overwatch World Cup in an audience interview and the 2023 Valorant Champions Finals on the Stare Cam.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863616/frontiers24/judges/andrew_nguyen_ur8x1m.webp", | ||
| }, | ||
| { | ||
| name: "Soon-Won Dy", | ||
| pronouns: "She/Her", | ||
| position: "UX Designer @ Axos Bank", | ||
| funFact: | ||
| "I love going to cafes & recreating their fancy coffees and baked goods at home.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863613/frontiers24/judges/soon-won_dy_hwyj2p.webp", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,37 @@ | ||
| .judges { | ||
| height: 100%; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .judge-stuff { | ||
| .judges { | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| @media (max-width: $tablet-breakpoint) { | ||
| align-items: baseline; | ||
| padding-top: 3rem; | ||
| } | ||
|
|
||
| .judges-container { | ||
| display: grid; | ||
| gap: 3rem; | ||
| } | ||
| } | ||
|
|
||
| .judge-component { | ||
| margin-bottom: 35px; | ||
| } | ||
|
|
||
| .mobile { | ||
| display: none; | ||
| background-color: $primary-white; | ||
| color: $primary-blue; | ||
| } | ||
|
|
||
| @media (max-width: $mobile-breakpoint) { | ||
| .mobile { | ||
| display: block; | ||
| } | ||
|
|
||
| .judge-component { | ||
| margin-bottom: 35px; | ||
| .desktop { | ||
| display: none; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,71 @@ | ||
| import "./Judges.scss"; | ||
| import JudgeComponent from "../../components/JudgeComponent/JudgeComponent"; | ||
| import { useRef } from "react"; | ||
|
|
||
| const JudgeList1 = [ | ||
| { | ||
| name: "Julia Nguyen", | ||
| pronouns: "She/Her", | ||
| position: "Product Designer @ ServiceNow", | ||
| funFact: "I enjoy designing and sewing my clothes for myself.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863617/frontiers24/judges/julia_nguyen_a2mnj2.webp", | ||
| }, | ||
| { | ||
| name: "Alan Tran", | ||
| pronouns: "He/Him", | ||
| position: "UX Engineer @ Illumina", | ||
| funFact: | ||
| "I want to create a public website that objectively scores the best pho in San Diego/OC area.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863615/frontiers24/judges/dexter_zavalza_pgx3sy.webp", | ||
| }, | ||
| { | ||
| name: "Dexter Zavalza", | ||
| pronouns: "He/Him", | ||
| position: "Conversational AI UX Design Lead (Manager) @ Deloitte", | ||
| funFact: "First job out of college was in a surfboard factory.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863615/frontiers24/judges/dexter_zavalza_pgx3sy.webp", | ||
| }, | ||
| ]; | ||
|
|
||
| const JudgeList2 = [ | ||
| { | ||
| name: "Andrew Nguyen", | ||
| pronouns: "He/Him", | ||
| position: "Consultant (UX / Experience Design) @ Arup", | ||
| funFact: | ||
| "I’ve appeared on the livestreams of 2 separate large esports broadcasts: the 2017 Overwatch World Cup in an audience interview and the 2023 Valorant Champions Finals on the Stare Cam.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863616/frontiers24/judges/andrew_nguyen_ur8x1m.webp", | ||
| }, | ||
| { | ||
| name: "Soon-Won Dy", | ||
| pronouns: "She/Her", | ||
| position: "UX Designer @ Axos Bank", | ||
| funFact: | ||
| "I love going to cafes & recreating their fancy coffees and baked goods at home.", | ||
| imgLink: | ||
| "https://res.cloudinary.com/design-co-ucsd/image/upload/v1711863613/frontiers24/judges/soon-won_dy_hwyj2p.webp", | ||
| }, | ||
| ]; | ||
| import { JudgeInfo } from "./JudgeInfo"; | ||
| import useIsDesktop from "../../util/useIsDesktop"; | ||
|
|
||
| export default function Judges() { | ||
| const judge1Ref = useRef(null); | ||
| const judge2Ref = useRef(null); | ||
| const judge1ContainerRef = useRef(null); | ||
| const judge2ContainerRef = useRef(null); | ||
|
|
||
| const isDesktop = useIsDesktop(); | ||
|
|
||
| console.log(JudgeInfo.slice(3, 5)); | ||
|
|
||
| return ( | ||
| <div className="judge-stuff"> | ||
| <section className="judges" ref={judge1ContainerRef}> | ||
| <div ref={judge1Ref} className="faq-container"> | ||
| <h2>Judges</h2> | ||
| {JudgeList1.map((item) => ( | ||
| <div className="block" key={item.name}> | ||
| <JudgeComponent | ||
| name={item.name} | ||
| pronouns={item.pronouns} | ||
| position={item.position} | ||
| funFact={item.funFact} | ||
| imgLink={item.imgLink} | ||
| /> | ||
| {isDesktop ? ( | ||
| <> | ||
| <section className="desktop judges" ref={judge1ContainerRef}> | ||
| <div ref={judge1Ref} className="judges-container"> | ||
| <h2>Judges</h2> | ||
| {JudgeInfo.slice(0, 3).map((item) => ( | ||
| <JudgeComponent | ||
| key={item.name} | ||
| name={item.name} | ||
| pronouns={item.pronouns} | ||
| position={item.position} | ||
| funFact={item.funFact} | ||
| imgLink={item.imgLink} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| <section className="desktop judges" ref={judge2ContainerRef}> | ||
| <div ref={judge2Ref} className="judges-container"> | ||
| <h2>Judges</h2> | ||
| {JudgeInfo.slice(3, 5).map((item) => ( | ||
| <JudgeComponent | ||
| key={item.name} | ||
| name={item.name} | ||
| pronouns={item.pronouns} | ||
| position={item.position} | ||
| funFact={item.funFact} | ||
| imgLink={item.imgLink} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| <section className="judges" ref={judge1ContainerRef}> | ||
| <div ref={judge2Ref} className="faq-container"> | ||
| <h2>Judges</h2> | ||
| {JudgeList2.map((item) => ( | ||
| <div className="block" key={item.name}> | ||
| </section> | ||
| </> | ||
| ) : ( | ||
| <section className="mobile judges"> | ||
| <div ref={judge2Ref} className="judges-container"> | ||
| <h2>Judges</h2> | ||
| {JudgeInfo.map((item) => ( | ||
| <JudgeComponent | ||
| key={item.name} | ||
| name={item.name} | ||
| pronouns={item.pronouns} | ||
| position={item.position} | ||
| funFact={item.funFact} | ||
| imgLink={item.imgLink} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.