Skip to content

Fix Mobile View Responsiveness for Prize Tab on Live Page #217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adriandarian merged 13 commits into from
Mar 4, 2022
Merged

Fix Mobile View Responsiveness for Prize Tab on Live Page #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
471278f
Merge pull request #211 from HackMerced/develop
maryharebear Feb 10, 2022
634ac96
fix: faq links for mlh requirements
maryharebear Feb 15, 2022
2e65458
fix: location to virtual
maryharebear Feb 15, 2022
0da37cb
add: stickermule and acm logo as sponsors
maryharebear Feb 24, 2022
2a12e88
Merge pull request #216 from HackMerced/develop
maryharebear Mar 3, 2022
8cff13d
fix: deleted prize on event page
maryharebear Mar 3, 2022
6a9063b
add: MLH prizes
maryharebear Mar 3, 2022
d7d2dcf
fix: schedule timeline
maryharebear Mar 3, 2022
8ada13e
fix: schedule timeline
maryharebear Mar 3, 2022
01c71da
fix: schedule timeline
maryharebear Mar 3, 2022
81c115f
fix: add acm prize
maryharebear Mar 3, 2022
9b36b3a
fix: mobile responsive prizes view
adriandarian Mar 4, 2022
0309d6d
fix: grid gap on all responsive views
adriandarian Mar 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/assets/faq.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,26 @@ export const FAQData = [
},
{
title: "Can I start my project before?",
content: "No, you cannot work the project before or copy past projects. All work on a project should be done at the hackathon.",
content:
"No, you cannot work the project before or copy past projects. All work on a project should be done at the hackathon.",
},
{
title: "Is HackMerced free?",
content: "Admission to HackMerced is completely free. Workshops and mentorship are free for the entire event!",
},
{
title: "How do I get meal reimbursement?",
content: "Details coming soon.",
content: "You have to demo your project and submit it through Devpost to receive a food delivery gift card.",
},
{
title: "What are the rules for this event?",
content:
"We follow the MLH Code of Conduct.",
`We follow <strong> <u><a href='https://static.mlh.io/docs/mlh-code-of-conduct.pdf' rel='noopener noreferrer' target='_blank'>MLH's Code of Conduct.</a></u></strong>`,
},

{
title: "404: Question Not Found",
content:
"Feel free to message us [email protected], contact us on our form https://hackmerced.com/#/contact-us, or hop on our discord during the event and talk to one of our organizers!",
"Feel free to message us at <strong><u><a href='mailto:[email protected]'>[email protected]</a></u></strong>, contact us on our <a href='https://hackmerced.com/#/contact-us' rel='noopener noreferrer' target='_blank'>contact page</a>, or hop on our discord during the event and talk to one of our organizers!",
},
];
Binary file added src/assets/images/sponsor-hackmercedvii.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/sticker-mule-logo-dark.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions src/pages/Dashboard/prizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,60 @@ const Prizes: FC = (): JSX.Element => {
<b>1st Place </b> - Bose speaker for each member
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best in Sustainability</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - 1x Raspberry pi for each team member
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best Domain Name from Domain.com</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - PowerSquare Qi Wireless Phone Charger
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best Use of Auth0</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - Exclusive Auth0 Swag made for MLH Winners (Branded Tumbler, Rubik's Cube and Sticker)
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Most Creative Use of GitHub </h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - GitHub Octocat Statue, Plushy and Sticker bundle
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best Hardware Hack Sponsored by Digi-Key</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - Grove Beginner Kit
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Most Creative Use of Twilio</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - Twilio Swag Box GameGo Console
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best Use of MATLAB</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - MathWorks Swag Bag
</h4>
</li>
<li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">Best Use of DeSo</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - $100 worth of $DESO coin and an exclusive DeSo Tumbler
</h4>
</li>
{/* <li className="dashboard__content__prizes__ul__li">
<h3 className="dashboard__content__prizes__ul__li__title">CapitalOne</h3>
<h4 className="dashboard__content__prizes__ul__li__body">
<b>1st Place </b> - Soon to be announced.
</h4>
</li> */}
</ul>
</div>
);
Expand Down
29 changes: 22 additions & 7 deletions src/pages/Dashboard/schedule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import "./styles.scss";
import useWindowDimensions from "../../components/WindowDimensions";

const data: Array<{ day: number; title: string; body: string }> = [
{
day: 5,
title: "6:00 PM - 8:00 PM PST",
body: "Check In via Discord",
},
{
day: 5,
title: "8:00 PM - 9:00 PM PST",
Expand All @@ -26,7 +31,12 @@ const data: Array<{ day: number; title: string; body: string }> = [
},
{
day: 5,
title: "11:00 PM - 12:00 PM PST",
title: "11:00 PM - 12:00 AM PST",
body: "Deep Learning Workshop with LLNL",
},
{
day: 5,
title: "12:00 AM - 1:00 AM PST",
body: "Networking and Coffee Chat - Discord",
},
{
Expand All @@ -52,7 +62,7 @@ const data: Array<{ day: number; title: string; body: string }> = [
{
day: 6,
title: "8:00 AM - 9:00 AM PST",
body: "Beginners' Guide to Hackathons",
body: "Beginner's Guide to Hackathons",
},
{
day: 6,
Expand All @@ -66,7 +76,7 @@ const data: Array<{ day: number; title: string; body: string }> = [
},
{
day: 6,
title: "12:00 AM - 1:00 PM PST",
title: "12:00 PM - 1:00 PM PST",
body: "Next.js Workshop",
},
{
Expand Down Expand Up @@ -105,17 +115,22 @@ const data: Array<{ day: number; title: string; body: string }> = [
body: "Roblox",
},
{
day: 6,
title: "2:00 AM - 3:00 PM PST",
day: 7,
title: "12:00 AM - 2:00 AM PST",
body: "Marble Game",
},
{
day: 7,
title: "2:00 AM - 3:00 AM PST",
body: "Skribbl.io",
},
{
day: 6,
day: 7,
title: "3:00 AM - 4:00 AM PST",
body: "Gartic Phone",
},
{
day: 6,
day: 7,
title: "6:00 AM - 7:00 AM PST",
body: "How to Pitch and Download your Projects?",
},
Expand Down
15 changes: 2 additions & 13 deletions src/pages/Dashboard/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -484,10 +484,11 @@ $borderColor: #eeebf5;
width: 95%;
padding: 0;
grid-template-columns: 1fr 1fr;
grid-gap: 6%;
grid-gap: 0 4%;

@media (max-width: 700px) {
grid-template-columns: 1fr;
grid-gap: 0;
}

&__li {
Expand All @@ -503,18 +504,6 @@ $borderColor: #eeebf5;
margin: 20px 30px;
}

@media (max-width: 500px) {
width: 100%;
}

@media (max-width: 500px) {
width: 70%;
}

@media (max-width: 280px) {
width: 50%;
}

&__title {
color: $offOrange;
font-size: 28px;
Expand Down
16 changes: 10 additions & 6 deletions src/pages/HackMercedVII/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import React, { FC, useEffect, useState } from "react";
import ReactHtmlParser from "react-html-parser";

import Navbar from "../../components/NavBar";
import Footer from "../../components/Footer";
import useWindowDimensions from "../../components/WindowDimensions";

import SPONSORS from "../../assets/images/sponsors-hackmercedvii.png";
import SPONSORS from "../../assets/images/sponsor-hackmercedvii.png";
import STICKER_MULE from "../../assets/images/sticker-mule-logo-dark.png";

import { FAQData } from "../../assets/faq";
import Prizes from "../Dashboard/prizes";

import "./styles.scss";

Expand Down Expand Up @@ -57,7 +58,7 @@ const HackMercedVII: FC = (): JSX.Element => {
{faq.title}
</button>
<div className={faq.open ? "question__answer display-question" : "question__answer"}>
<p>{faq.content}</p>
<p>{ReactHtmlParser(faq.content)}</p>
</div>
</div>
));
Expand All @@ -76,7 +77,7 @@ const HackMercedVII: FC = (): JSX.Element => {
<div className="hackmerced-vii__landing__container">
<div className="hackmerced-vii__landing__container__title">HackMerced VII</div>
<div className="hackmerced-vii__landing__container__date">March 4-6, 2022</div>
<div className="hackmerced-vii__landing__container__location">University of California, Merced</div>
<div className="hackmerced-vii__landing__container__location">Virtual Event</div>
<button
className="hackmerced-vii__landing__container__button"
onClick={() => {
Expand Down Expand Up @@ -121,17 +122,20 @@ const HackMercedVII: FC = (): JSX.Element => {
</section>
{/* Testing Component */}
{/* Prizes Section */}
<section className="hackmerced-vii__prizes">
{/* <section className="hackmerced-vii__prizes">
<h2 className="hackmerced-vii__prizes__title">Prizes</h2>
<div className="hackmerced-vii__prizes__content">
<Prizes />
</div>
</section>
</section> */}
{/* Sponsors Section */}
<section className="hackmerced-vii__sponsors">
<div>
<h2 className="hackmerced-vii__sponsors__title">Sponsors</h2>
<img src={SPONSORS} width="100%" alt="Our Sponsors for HackMerced VI" />
<a className="sticker_mule" href="http://hackp.ac/mlh-stickermule-hackathons">
<img className="sticker_mule__img" src={STICKER_MULE} alt="sticker mule logo" />
</a>
</div>
</section>
<Footer backgroundColor="#383030" textColor="#FFFFF" fontColor="#EEEBF5" />
Expand Down