Feature/background component #93
Conversation
… ratio, refractored code to work by just dropping in the children props
There was a problem hiding this comment.
This looks really good to me! I just have a super quick question: is this the intended view right now? I see that when I resize I can see the rest of the background. My guess is that as we keep adding components, the background will slowly appear where it's supposed to be
| <div className="Background"> | ||
| <div className="Background__gradient"></div> | ||
| <div className="Background__children">{children}</div> | ||
| <Wire className="Background__wire"></Wire> | ||
| <Rainbow className="Background__wire--variant"></Rainbow> | ||
| </div> |
There was a problem hiding this comment.
Yup! It's meant to work with 7 sections.
There was a problem hiding this comment.
This looks amazing with more sections added in!
| @@ -0,0 +1,40 @@ | |||
| @use "~stylesheets/typography"; | |||
|
|
|||
| .Background { | |||
There was a problem hiding this comment.
I suggest adding something along the lines of height: 3000px to create some negative space to work with while everyone stages each section. we'll drop the fixed height as new sections are developed to occupy the space
There was a problem hiding this comment.
Could we even do 7000px for each of the supposed 7 sections?
| } | ||
|
|
||
| &__gradient { | ||
| z-index: -500; |
There was a problem hiding this comment.
let's have less variance in z-indexing to keep everyone sane. I recommend keeping things linear (-1, -2, -3, etc) so the layering is always obvious
| &__wire { | ||
| z-index: -1; | ||
| position: absolute; | ||
| width: 100%; | ||
| bottom: calc(100% / 7 * 3); | ||
|
|
||
| &--variant { | ||
| position: absolute; | ||
| width: 100%; | ||
| bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| &__children { | ||
| z-index: 999; | ||
| position: relative; | ||
| } | ||
|
|
||
| &__gradient { | ||
| z-index: -2; | ||
| position: absolute; | ||
| background: linear-gradient( | ||
| 180deg, | ||
| var(--blue) 0%, | ||
| var(--blue__gradient) 100% | ||
| ); | ||
| width: 100%; | ||
| height: calc(100% / 7 * 3); | ||
| bottom: 0; |
There was a problem hiding this comment.
Do you think we could rearrange the SCSS to replicate the structure of the HTML? It'll just make things easier to understand.
| } | ||
|
|
||
| &__children { | ||
| z-index: 999; |
There was a problem hiding this comment.
Can we also change to to something more realistic? Like 0 or 1? My components have z-indices too, but I'm not sure how that might clash.
There was a problem hiding this comment.
Everything looks good to me! I love the absolute/relative positioning magic - great job @PriyaRajarathinam !
* Merging main to branch * Updated scaling on images and made rendering children more dynamic * Fixed formatting for linter * removed unused css class * fixed linting error * Upgraded react import statement * Updated variable names, added new line to svg, removed presrve aspect ratio, refractored code to work by just dropping in the children props * fixed lint issue * removed comments from hero.scss * updated rainbow path svg * added 3000px background and changed z-indices Co-authored-by: Priya Rajarathinam <cat@jjjjjjj.attlocal.net>
* Merging main to branch * Updated scaling on images and made rendering children more dynamic * Fixed formatting for linter * removed unused css class * fixed linting error * Upgraded react import statement * Updated variable names, added new line to svg, removed presrve aspect ratio, refractored code to work by just dropping in the children props * fixed lint issue * removed comments from hero.scss * updated rainbow path svg * added 3000px background and changed z-indices Co-authored-by: Priya Rajarathinam <cat@jjjjjjj.attlocal.net>
Problem
As an engineer, I want a baseline background for cross-sectional components.
Link to Asana Ticket
Solution
I implemented a Background component that creates an overarching background for the sections. There is a separate background for Sections 1-4 and a separate background for Sections 5-7. Sections 1-4 have the basic background with a blue wire frame and Sections 5-7 have a gradient background with a rainbow wire frame.
Change summary:
Steps to Verify:
Screenshots (optional):
Show-n-tell images/animations here