Prizes component. #97
Conversation
src/stylesheets/_typography.scss
Outdated
| margin: 0; | ||
| color: var(--white); | ||
| font-family: $font-family-italic; | ||
| font-style: italic; | ||
| font-weight: normal; |
There was a problem hiding this comment.
Instead of duplicating code here, can we extend from the mixin already defined? We might also be able to use our -- notation, but I'm also not sure if that's correct again.
There was a problem hiding this comment.
@tim-nguyen-cs the two dashes -- is a CSS naming convention for variables. propose any changes you find to be worthwhile!
|
Nice job so far, @w-gao! My recommendation to overlap fields would to probably use some negative margin if you haven't already to move this section up. Would it also be possible to adjust the padding/dimensions of each prize box to hold a square (instead of vertically rectangular) shape? Right now, it looks like this on my screen, so I'm hoping it'll be more proportioned when the rest of the sections are in: |
src/stylesheets/_typography.scss
Outdated
| margin: 0; | ||
| color: var(--white); | ||
| font-family: $font-family-italic; | ||
| font-style: italic; | ||
| font-weight: normal; |
There was a problem hiding this comment.
@tim-nguyen-cs the two dashes -- is a CSS naming convention for variables. propose any changes you find to be worthwhile!
| /* Delete these lines when you begin development */ | ||
| .Prizes { | ||
| margin: 0; | ||
| background: url("~images/components/prizes/background.svg") repeat-y; |
There was a problem hiding this comment.
Again, I'd advise against confining the background to a single CSS prop; it looks like the image is being cropped. A CSS class would lend enough granularity to scale the entire image! The background layers have a bit more complexity than a single image; I think a separate background container will really help here.
implementation:
design:
There was a problem hiding this comment.
Also we can include the glowing shadow effect using CSS! https://www.w3schools.com/css/css3_shadows.asp
ah I see you've already got the prop set, we can nail it to the design with a bit of tweaking
There was a problem hiding this comment.
@mocklee A separate background container would make sense so I will update #91 and this PR. However, I'm still unsure how to repeat the SVG without using the background-repeat prop. This was needed so the background can cover the entire section on small screens.
There was a problem hiding this comment.
instead of repeating the grid SVG, its height & width can be set proportional to a container. if it doesn't size properly on smaller screens, consider jumping into the SVG & defining preserveAspectRatio="none" to lend a bit more flexibility with resizing: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
# Conflicts: # src/stylesheets/_typography.scss # src/stylesheets/_variables.scss # src/views/Home/index.view.tsx
There was a problem hiding this comment.
Great work tying this in with the milestones component.
Just a small aesthetic issue on mobile we may not have time to address, but worth noting: I suggest using the mobile breakpoints to keep the grid somewhat present & framed with the grid in milestones instead of having it disappear.
| @@ -1,8 +1,72 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
#71 allows us to remove this statement completely if we do not use react within a file; however, since we use it here we can simply do: import * as React from "react";. With newer versions of react and typescript coming out, if react is not used within a file, you don't have to import react. It's pretty neat stuff!
# Conflicts: # src/views/Home/index.view.tsx
also add new pinnacle logo
* Prizes component. * Update background to its own layer. * Fix merge issue. * Adjust background. * Fix merge conflict. * Fix colors. * integrate components; responsive to tab-land * serialize prize topics using typescript * serialize FAQ using typescript * responsive patch for FAQ header text * adjust sponsor section margin * adjust sponsor section margin * faq header margin on smallest * proofread copywriting * raise max nesting depth for pseudoelements also add new pinnacle logo * new pinnacle logo responsive * lint scss Co-authored-by: Eric Mockler <emockler@ucsc.edu> Co-authored-by: mocklee <mock7ee@gmail.com>
* Prizes component. * Update background to its own layer. * Fix merge issue. * Adjust background. * Fix merge conflict. * Fix colors. * integrate components; responsive to tab-land * serialize prize topics using typescript * serialize FAQ using typescript * responsive patch for FAQ header text * adjust sponsor section margin * adjust sponsor section margin * faq header margin on smallest * proofread copywriting * raise max nesting depth for pseudoelements also add new pinnacle logo * new pinnacle logo responsive * lint scss Co-authored-by: Eric Mockler <emockler@ucsc.edu> Co-authored-by: mocklee <mock7ee@gmail.com>
Problem
As a hacker,
I want to see the available prices
So I can get excited about them!
Link to Asana Ticket
Solution
The layout is similar to the Milestones component, expect this one doesn't have any images/graphics associated with it.
I had to copy over some of the mixins/variables from #91, but they will be removed after that PR is pulled in.In the figma design, the first half of the Prizes section belongs to the Milestones section. I had to use separate backgrounds for the two sections to not deal with negative margins. The integrated design looks like this:
I don't see a clear way to share a background with another component without messing up the spacing somehow, but feedback / suggestions would be greatly appreciated.
Change summary:
Steps to Verify:
yarn run startto start a local web server.