Skip to content
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

Jump to bottom

Responsive main page #208

Merged
merged 4 commits into from
Nov 14, 2024
Merged

Responsive main page #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5f9df0
Fix responsive layout on main page
cweihan01 Oct 30, 2024
7553780
Responsive ProjectCard
cweihan01 Nov 1, 2024
f780f04
Restrict project image size
cweihan01 Nov 7, 2024
d277916
Remove code comments
cweihan01 Nov 14, 2024
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
65 changes: 40 additions & 25 deletions components/ProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Image from 'next/legacy/image';
import React from 'react';
import React, { useState, useEffect } from 'react';
import ELink from './ELink';
import { Project, GitHubColors } from '../util/';

Expand All @@ -18,28 +18,34 @@ interface ProjectCardImageProps {

function ProjectCardImage({ project, preload }: ProjectCardImageProps) {
const { image, alt, link } = project;
return link ? (
<ELink link={link}>
<Image
src={image ?? '/logo.png'}
alt={alt}
width="1000"
height="1000"
layout="responsive"
priority={preload}
/>
</ELink>
) : (
<>
<Image
src={image}
alt={alt}
width="1000"
height="1000"
layout="responsive"
priority={preload}
/>
</>
return (
<div className="card-image-container">
{link ? (
<ELink link={link}>
<Image
src={image ?? '/logo.png'}
alt={alt}
width="1000"
height="1000"
layout="fill"
objectFit="contain"
priority={preload}
/>
</ELink>
) : (
<>
<Image
src={image}
alt={alt}
width="1000"
height="1000"
layout="fill"
objectFit="contain"
priority={preload}
/>
</>
)}
</div>
);
}

Expand Down Expand Up @@ -123,7 +129,16 @@ function ProjectCard({
githubColors,
searchQuery = '',
}: ProjectCardProps): JSX.Element {
if (vertical) {
// For mobile devices, set project card to be always in `vertical` format
const [isVertical, setIsVertical] = useState(vertical);
useEffect(() => {
const handleResize = () => setIsVertical(vertical || window.innerWidth < 540);
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [vertical]);

if (isVertical) {
return (
<div className="card">
<ProjectCardImage project={project} preload={preload} />
Expand All @@ -138,7 +153,7 @@ function ProjectCard({
return (
<div className="card">
<div className="row">
<div className="col-6">
<div className="col-6 centered-content">
<ProjectCardImage project={project} preload={preload} />
</div>
<div className="col-6">
Expand Down
13 changes: 7 additions & 6 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,9 @@ export default function Home({
maintained by <ELink link="https://uclaacm.com">ACM at UCLA</ELink>,
the largest computer science community at UCLA
</p>

<div className="row">
<div className="col-6">
<div className="col-6 col-mb-12">
<div className="card">
<div className="card-body">
<Link href="/projects">
Expand All @@ -56,7 +57,7 @@ export default function Home({
</div>
</div>
</div>
<div className="col-6">
<div className="col-6 col-mb-12">
<div className="card">
<div className="card-body">
<ELink link="https://dev-pathways.netlify.app/">
Expand All @@ -68,8 +69,8 @@ export default function Home({
</div>
</div>

<div className="row mt-2">
<div className="col-6">
<div className="row">
<div className="col-6 col-mb-12">
<div className="card">
<div className="card-body">
<ELink link="https://uclaacm.com/events">
Expand All @@ -79,7 +80,7 @@ export default function Home({
</div>
</div>
</div>
<div className="col-6">
<div className="col-6 col-mb-12">
<div className="card">
<div className="card-body">
<Link href="/contribute">
Expand All @@ -90,7 +91,7 @@ export default function Home({
</div>
</div>
</div>
<hr className="mt-2" />
<hr />

<h2>featured project</h2>
<ProjectCard
Expand Down
15 changes: 15 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ body {
margin-top: 2rem;
}

.row {
margin-bottom: 1rem;
}

.col-mb-12 {
margin-bottom: 0.5rem;
}

.row.same-height-grid {
row-gap: 2rem;
overflow-wrap: break-word;
Expand All @@ -34,6 +42,13 @@ body {
height: 100%;
}

.card-image-container {
width: 100%;
height: 20rem;
max-height: 40vh;
position: relative;
}

.assignee-image {
border-radius: 50%;
overflow: hidden;
Expand Down
Loading