www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Home Page UI #88

Merged
a3thakra merged 19 commits from feat/home-page into main 2021-07-27 02:13:35 -04:00
Conversation 4 Commits 19 Files Changed 11 +340 -4
a258wang commented 2021-07-13 12:08:18 -04:00
Owner
Copy Link

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 2021-07-13 12:08:19 -04:00
continuous-integration/drone/push Build is passing Details
253cccc157 Add home page mobile styling
n3parikh reviewed 2021-07-19 19:32:58 -04:00
pages/index.mdx Outdated
@ -1 +0,0 @@
Visit the [playground](/playground)
n3parikh commented 2021-07-19 19:32:58 -04:00
Owner
Copy Link

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?
a3thakra commented 2021-07-19 19:44:49 -04:00
Owner
Copy Link

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 2021-07-19 20:01:09 -04:00
continuous-integration/drone/push Build is passing Details
74fd895ae8 Add Futura font
a3thakra reviewed 2021-07-22 14:10:15 -04:00
pages/index.tsx Outdated
@ -0,0 +24,4 @@
return (
<>
<main className={styles.intro}>
a3thakra commented 2021-07-22 14:10:15 -04:00
Owner
Copy Link

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 2021-07-22 14:11:36 -04:00
pages/index.tsx Outdated
@ -0,0 +46,4 @@
<div className={styles.cards}>
{/* TODO: add links to past events and past news */}
<section className={styles.events}>
<h2 className={styles.cardsHeading}>Upcoming Events</h2>
a3thakra commented 2021-07-22 14:11:35 -04:00
Owner
Copy Link

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 2021-07-22 14:16:03 -04:00
pages/index.tsx Outdated
@ -0,0 +79,4 @@
}
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
return props.children;
a3thakra commented 2021-07-22 14:16:02 -04:00
Owner
Copy Link

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 2021-07-22 14:19:06 -04:00
pages/index.module.css Outdated
@ -0,0 +19,4 @@
flex-direction: row;
justify-content: center;
align-items: center;
gap: calc(15rem / 16);
a3thakra commented 2021-07-22 14:19:06 -04:00
Owner
Copy Link

gap : 1rem?

gap : 1rem?
a258wang marked this conversation as resolved
a3thakra reviewed 2021-07-22 14:23:04 -04:00
pages/index.module.css Outdated
@ -0,0 +101,4 @@
padding-bottom: calc(20rem / 16);
}
/* On a smaller desktop screen, decrease the horizontal space between events/news */
a3thakra commented 2021-07-22 14:23:04 -04:00
Owner
Copy Link

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?
a258wang commented 2021-07-23 01:47:57 -04:00
Author
Owner
Copy Link

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)
a3thakra commented 2021-07-23 17:21:29 -04:00
Owner
Copy Link

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.
a3thakra commented 2021-07-22 14:31:47 -04:00
Owner
Copy Link

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.
gscreenshot_2021-07-22-143103.png
103 KiB
gscreenshot_2021-07-22-143103.png
a258wang commented 2021-07-23 01:27:15 -04:00
Author
Owner
Copy Link

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)
image.png
55 KiB
image.png
75 KiB
👍 1
a258wang added 1 commit 2021-07-23 01:34:19 -04:00
continuous-integration/drone/push Build is passing Details
e9ef2e1480 Fix small details
a3thakra commented 2021-07-23 17:23:32 -04:00
Owner
Copy Link

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 2021-07-26 12:47:22 -04:00
a258wang added 1 commit 2021-07-26 12:50:02 -04:00
continuous-integration/drone/push Build is passing Details
d66c3ba8ad Merge branch 'main' into feat/home-page
a3thakra commented 2021-07-26 15:09:04 -04:00
Owner
Copy Link

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)
gscreenshot_2021-07-26-150846.png
121 KiB
gscreenshot_2021-07-26-150846.png
a258wang added 5 commits 2021-07-27 01:50:23 -04:00
continuous-integration/drone/push Build is passing Details
9bb460871f Change mobile card max width
a3thakra approved these changes 2021-07-27 02:04:13 -04:00
a258wang added 1 commit 2021-07-27 02:09:26 -04:00
a3thakra merged commit 6a64013e5c into main 2021-07-27 02:13:35 -04:00
a3thakra referenced this issue from a commit 2021-07-27 02:13:35 -04:00
Home Page UI (#88)
a3thakra deleted branch feat/home-page 2021-07-27 02:13:43 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
a3thakra
Labels
Clear labels   
a11y

   
Backlog

   
Blocked

   
Bug

   
Content

   
Dependencies

   
Design

   
Feature Request

   
Good First Issue

   
In Progress

   
Performance

   
Priority - High

   
Priority - Low

   
Priority - Medium

   
Untriaged
No Label
a11y
Backlog
Blocked
Bug
Content
Dependencies
Design
Feature Request
Good First Issue
In Progress
Performance
Priority - High
Priority - Low
Priority - Medium
Untriaged
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: www/www-new#88
No description provided.
Delete Branch "feat/home-page"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?