Skip to content

Added mobile responsiveness #35

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

Open
anikaahmed114 wants to merge 1 commit into
base: stage
Choose a base branch
from
Open

Added mobile responsiveness #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file modified app/assets/image1.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.
33 changes: 28 additions & 5 deletions app/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,32 @@
import { useEffect, useState } from "react";
import { Link } from "react-router";
import location from "../assets/icons/location.svg";
import mail from "../assets/icons/mail.svg";

export default function Footer() {
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
setIsMobile(window.innerWidth < 870);
const handleResize = () => {
const newIsMobile = window.innerWidth < 870;
setIsMobile(newIsMobile);
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

const footerStyle = {
width: "100%",
backgroundColor: "#05326C",
padding: "60px 80px",
padding: isMobile ? "32px 20px" : "60px 80px",
display: "flex",
justifyContent: "space-between",
flexDirection: isMobile ? "column" : "row",
justifyContent: isMobile ? "center" : "space-between",
alignItems: "center",
boxSizing: "border-box",
flexWrap: "wrap",
gap: "32px",
} as const;

const leftSection = {
Expand All @@ -33,8 +49,9 @@ export default function Footer() {
const rightSection = {
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
alignItems: isMobile ? "center" : "flex-end",
gap: "32px",
width: isMobile ? "100%" : "auto",
} as const;

const logoStyle = {
Expand All @@ -48,6 +65,8 @@ export default function Footer() {
flexDirection: "row",
gap: "20px",
alignItems: "center",
flexWrap: "wrap",
justifyContent: "center",
} as const;

const circleStyle = {
Expand All @@ -69,8 +88,12 @@ export default function Footer() {

const navStyle = {
display: "flex",
gap: "40px",
flexDirection: isMobile ? "column" : "row",
flexWrap: isMobile ? "nowrap" : "wrap",
gap: isMobile ? "12px" : "40px",
color: "white",
justifyContent: isMobile ? "center" : "flex-end",
alignItems: isMobile ? "center" : "flex-end",
fontSize: "1rem",
textTransform: "none",
} as const;
Expand Down Expand Up @@ -182,7 +205,7 @@ export default function Footer() {
Who We Are
</Link>
<Link to="/research" style={linkStyle}>
Research
Resources
</Link>
<Link to="/data" style={linkStyle}>
Data
Expand Down
26 changes: 9 additions & 17 deletions app/components/planCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,16 @@ export default function PlanCard({
}: PlanCardProps) {
return (
<div className="mx-auto max-w-6xl rounded-4xl pt-10 pb-10 px-10">
<div>
<div>
<h2
className={`text-5xl font-bold mb-6 ${BLUE_COLOR} flex`}
>
{title}
<img
src={StrategicPlan}
alt="Strategic Plan Icon"
className="w-15 h-15 ml-5 -translate-y-2.5"
/>
</h2>
<h2 className={`text-5xl font-bold mb-6 ${BLUE_COLOR} flex`}>
{title}
<img
src={StrategicPlan}
alt="Strategic Plan Icon"
className="w-15 h-15 ml-5 -translate-y-2.5"
/>
</h2>

<p className="text-[20px] font-medium leading-11">
{summary}
</p>
</div>
</div>
<p className="text-[20px] font-medium leading-11">{summary}</p>
</div>
);
}
2 changes: 0 additions & 2 deletions app/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {

import type { Route } from "./+types/root";
import "./app.css";
import Footer from "./components/footer";

export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
Expand Down Expand Up @@ -40,7 +39,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
{children}
<ScrollRestoration />
<Scripts />
<Footer />
</body>
</html>
);
Expand Down
9 changes: 4 additions & 5 deletions app/routes/data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import React from "react";
import Header from "~/components/header";
import Footer from "~/components/footer";
import {
Area,
CartesianGrid,
Expand Down Expand Up @@ -345,16 +346,13 @@ export default function Data() {
<div className="flex justify-center">
<Button
asChild
className="w-1/3 rounded-full py-7 text-white text-xl font-medium inline-flex items-center justify-center"
style={{
backgroundColor: "#499ED7",
borderColor: "#499ED7",
}}
className="mx-auto w-[90vw] max-w-[300px] sm:max-w-[380px] h-[56px] px-12 rounded-[64px] bg-[#499ED7] hover:bg-blue-700 text-white text-xl font-medium inline-flex items-center justify-center transition"
>
<a
href="https://embed.clearimpact.com/Scorecard/Embed/82237"
target="_blank"
rel="noreferrer"
className="inline-flex items-center justify-center"
>
<span>Scorecard</span>
<svg
Expand Down Expand Up @@ -402,6 +400,7 @@ export default function Data() {
</div>
</section>
</section>
<Footer />
</main>
);
}
6 changes: 4 additions & 2 deletions app/routes/newsletter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Header from "~/components/header";
import Footer from "~/components/footer";
import ArchivedNewsletterCard from "~/components/archivedNewsletterCard";
import leftImage from "~/assets/newsletter-left.jpg";
import rightImage from "~/assets/newsletter-right.png";
Expand Down Expand Up @@ -144,7 +145,7 @@ export default function Newsletter() {
</div>

<div className="mt-12 grid gap-12 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.4fr)_minmax(0,0.8fr)] lg:items-center">
<div className="flex justify-center lg:h-full lg:items-center">
<div className="hidden md:flex justify-center lg:h-full lg:items-center">
<div
className="w-full max-w-md overflow-hidden rounded-2xl border border-[#e4e4e4]"
style={{ aspectRatio: "1 / 1" }}
Expand Down Expand Up @@ -256,7 +257,7 @@ export default function Newsletter() {
</button>
</form>

<div className="flex justify-end lg:h-full lg:items-center">
<div className="hidden md:flex justify-center lg:h-full lg:items-center">
<div
className="w-full max-w-md overflow-hidden rounded-2xl border border-[#e4e4e4]"
style={{ aspectRatio: "1 / 1" }}
Expand Down Expand Up @@ -287,6 +288,7 @@ export default function Newsletter() {
</section>
</div>
</section>
<Footer />
</main>
);
}
17 changes: 13 additions & 4 deletions app/routes/people.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
height: 196px;
background-color: gray;
border-radius: 50%;
margin-right: 50px;
min-width: 196px;
min-height: 196px;
object-fit: cover;
Expand All @@ -26,12 +25,15 @@
flex-direction: row;
align-items: center;
justify-content: center;
max-width: 100%;
flex-wrap: wrap;
}

.directorInfoText {
margin-left: 20px;
width: 641px;
min-width: 641px;
width: 90%;
min-width: 0;
max-width: 641px;
height: auto;
}

Expand Down Expand Up @@ -72,9 +74,15 @@
margin-bottom: 30px;
}

.itemSize,
.studentAffairsList li {
overflow-wrap: anywhere;
word-break: break-word;
}

.boardOfDirectorsContainer {
background-color: #e6e6e6;
width: 1093px;
width: 100%;
padding: 32px;
border-radius: 16px;
margin-top: 48px;
Expand All @@ -96,6 +104,7 @@

.formerContributors {
width: 1093px;
max-width: 100%;
padding-top: 32px;
padding-right: 48px;
padding-bottom: 32px;
Expand Down
Loading