Update homepage from default Gatsby homepage #17
Conversation
|
The query retrieves id, slug, title and image of all facts. The id is required to act as a unqiue key for each node. The slug will be used to link to the full fact on the fact page. I am not quite sure if the homepage will feature just a few bits of information or the entirety of a few facts. Since we only have 3 facts now, I grabbed just the title and image to give the sense that there was more to the fact and the user should click on a "Learn more" button to visit the fact page. |
We had a meeting where it was decided that rather than a carousel like this, we want to implement somethings that's more akin to a row of cards navigated via a slider.
This contains only title, category and a fixed image(unlike the large fact card which used a fluid image)
Note: I am displaying 2 small fact cards on index.js to better test and show functionality since we only have 3 facts. Another thing left to do is make sure the images all stay the same size inside each card. I think this may be solved if fluid images are used rather than fixed ones.
Paul and I met this week to explore several types of carousels. We decided to implement them all in for now as to showcase their similarities and differences.
The ways to fix last commit was either refer to the imported query from index.js inside a StaticQuery or just include the query on page 2. Since I was going to move and customize the styles to page2, I moved the query as well.
Added a slider for the homepage that has breakpoints at different amount of pixels proportionate to pictures on the page. Made arrows visible might decide to customize them later.
Center content inside a small fact card by adding styling to CardActionArea. Also reduce the minimum width of a card on homepage.js to match the width of images.
Without a margin, the link back to homepage cannot be clicked upon as it's occupying the same line as the slider indicators and their space is over the link's click area
Co-authored-by: Utkarsh Kumar <[email protected]>
Co-authored-by: Utkarsh Kumar <[email protected]>
Co-authored-by: Shawn Reuter <[email protected]>
Nic is making a grid like view on the third page, so we will be using the fourth page for this new prospective design of the homepage
Added a grid layout to page-4 using material UI's grid. Also added a page-4 css file to center cards for mobile screens. I am still using the small Fact Cards as the card design.
Added a media query that hides the scroll behavior on screens 600 pixels or greater. Co-authored-by: Utkarsh Kumar <[email protected]>
Implement Hero Image. Not tested yet.
Add assets from add-art-assets in assets repo
Add assets package to gatsby config file
Update branch to be in sync with master
Add Gatsby Background Image with text overlay and scaling text sizes
Successfully fix text on top of the image, and add blur and opacity filters to image
Commit package-lock.json
Make query retrieve facts with 'featured' tags, add 'featured' tag to six facts and adjust carousel to format properly Co-authored-by: Utkarsh Kumar <[email protected]>
Co-authored-by: reuterShawn <[email protected]>
Previously, the text was outside the <BackgroundImage> tag and used absolute positioning to staty on top of the image. Now the text is actually contained within the <BackgroundImage>
| title="The Hill" | ||
| aria-label="Hill drawing" |
There was a problem hiding this comment.
We should make this more descriptive if we're going to have it.
| <div className={classes.textWrapper}> | ||
| <Typography variant="h2">Welcome to Pollinator Facts</Typography> | ||
| </div> |
There was a problem hiding this comment.
Do we want more text here? Do we want it centered?
| query { | ||
| hill: file(relativePath: { eq: "other/hill.jpg"}){ | ||
| childImageSharp{ | ||
| fluid(quality: 70, maxWidth: 1400){ |
There was a problem hiding this comment.
The image in the page maxes out at 1232px wide so shouldn't that be the maxWidth here?
| hill: file(relativePath: { eq: "other/hill.jpg"}){ | ||
| childImageSharp{ | ||
| fluid(quality: 70, maxWidth: 1400){ | ||
| ...GatsbyImageSharpFluid |
There was a problem hiding this comment.
Can we use WebP here or does that cause issues with the background image component?
|
We may want to have the hero image get a bit shorter on mobile at some breakpoint, its not great to have to scroll to get to the featured facts. |
|
Let's keep an eye on the Lighthouse score for this page: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdeploy-preview-17--pollinator-facts.netlify.app%2F |
The first task will be creating a horizontal carousel which can show featured facts. If we plan on changing featured facts from time to time, it might be worth it to make so homepage can be edited through the CMS.