Home Page UI #88

Merged
a3thakra merged 19 commits from feat/home-page into main 2 years ago
Owner

Desktop and Mobile versions of the home page UI.

Closes #4 (we can create new issues for the remaining tasks)

Desktop and Mobile versions of the home page UI. Closes #4 (we can create new issues for the remaining tasks)
a258wang added 7 commits 2 years ago
n3parikh reviewed 2 years ago
pages/index.mdx Outdated
Visit the [playground](/playground)
Owner

Should we still have a playground link somewhere on the site during development?

Should we still have a playground link somewhere on the site during development?
Collaborator

nah, i think we'll end up removing the playground entirely

nah, i think we'll end up removing the playground entirely
a258wang added 1 commit 2 years ago
74fd895ae8 Add Futura font
a3thakra reviewed 2 years ago
pages/index.tsx Outdated
return (
<>
<main className={styles.intro}>
Collaborator

I think this should be a header tag instead https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

I think this should be a header tag instead https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
a258wang marked this conversation as resolved
a3thakra reviewed 2 years ago
pages/index.tsx Outdated
<div className={styles.cards}>
{/* TODO: add links to past events and past news */}
<section className={styles.events}>
<h2 className={styles.cardsHeading}>Upcoming Events</h2>
Collaborator

This should be an h1 because it's inside a section.

This should be an `h1` because it's inside a section.
a258wang marked this conversation as resolved
a3thakra reviewed 2 years ago
pages/index.tsx Outdated
}
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
return props.children;
Collaborator

I would say either return a div over here or make the page return a div instead of a react fragment. This will ensure that the page content does not depend on the display of its parent.

I would say either return a `div` over here or make the page return a `div` instead of a react fragment. This will ensure that the page content does not depend on the `display` of its parent.
a258wang marked this conversation as resolved
a3thakra reviewed 2 years ago
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(15rem / 16);
Collaborator

gap : 1rem?

gap : 1rem?
a258wang marked this conversation as resolved
a3thakra reviewed 2 years ago
padding-bottom: calc(20rem / 16);
}
/* On a smaller desktop screen, decrease the horizontal space between events/news */
Collaborator

Can we make the make the events/news flow vertically instead of horizontally on smaller screens?

Can we make the make the events/news flow vertically instead of horizontally on smaller screens?
Poster
Owner

I've made the events/news flow vertically on screens that are less than 960px wide!

I also bumped up the side padding on the container in order to make the spacing look more even, however I'm still not a huge fan of how squished the cards get. So I'm wondering whether we should
(a) change the threshold at which we switch to the vertical layout? or
(b) maybe measure the padding and/or gap using percentages instead of rems so they scale as the screen size changes? or
(c) just leave it as it is?

Link to screenshot: https://drive.google.com/file/d/1cUjzhFB0yQuQxyYcTuDfZuPVF_Ethqlv/view?usp=sharing
(for some reason I can't add it as a attachment to this message)

I've made the events/news flow vertically on screens that are less than 960px wide! I also bumped up the side padding on the container in order to make the spacing look more even, however I'm still not a huge fan of how squished the cards get. So I'm wondering whether we should (a) change the threshold at which we switch to the vertical layout? or (b) maybe measure the padding and/or gap using percentages instead of rems so they scale as the screen size changes? or (c) just leave it as it is? Link to screenshot: https://drive.google.com/file/d/1cUjzhFB0yQuQxyYcTuDfZuPVF_Ethqlv/view?usp=sharing (for some reason I can't add it as a attachment to this message)
Collaborator

Yeah, make them flow vertically at around 1100px wide. Paddings/margins/gap should not be %s. Instead you can use an auto margin or a padding, and put a max width on the container.

Yeah, make them flow vertically at around 1100px wide. Paddings/margins/gap should not be %s. Instead you can use an `auto` margin or a padding, and put a max width on the container.
Collaborator

Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.

Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.
Poster
Owner

Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why.

I feel like I may have encountered this issue at some point, but right now both dividing lines look the same to me?

Chrome:
image

Firefox:
image

> Even though the two divinding lines have the same styles, one looks thicker that the other. I'm not sure why. I feel like I may have encountered this issue at some point, but right now both dividing lines look the same to me? Chrome: ![image](/attachments/753b1eb8-9301-4907-9a82-78d901ec3c6f) Firefox: ![image](/attachments/c17d9f51-32a4-4f0b-af85-bec8d437d92a)
a258wang added 1 commit 2 years ago
e9ef2e1480 Fix small details
Collaborator

LGTM apart from the vertical layout on smaller things. Good job Amy!

LGTM apart from the vertical layout on smaller things. Good job Amy!
a258wang added 3 commits 2 years ago
a258wang added 1 commit 2 years ago
d66c3ba8ad Merge branch 'main' into feat/home-page
Collaborator

Hmm, it looks a bit weird on my laptop (smaller desktop screens in general)

Maybe try using max-height, min-height, or height with a relative unit (vh, vw) instead of an absolute unit (rem, px, etc)

Hmm, it looks a bit weird on my laptop (smaller desktop screens in general) Maybe try using max-height, min-height, or height with a relative unit (`vh`, `vw`) instead of an absolute unit (`rem`, `px`, etc)
a258wang added 5 commits 2 years ago
a3thakra approved these changes 2 years ago
a258wang added 1 commit 2 years ago
a3thakra merged commit 6a64013e5c into main 2 years ago
a3thakra referenced this issue from a commit 2 years ago
a3thakra deleted branch feat/home-page 2 years ago

Reviewers

a3thakra approved these changes 2 years ago
continuous-integration/drone/push Build is passing
The pull request has been merged as 6a64013e5c.
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#88
Loading…
There is no content yet.