Result card display(Card Filtering / Background styling)

[crisdevs]

Overview

Result card display(Card Filtering / Results styling)

• [x] Bug
• [ ] Feature
• [ ] Tech Debt

Description After answering the questions in the application the results will sometimes consist of duplicates or plant cards without images due to that card not having an image provided or because we would need to upgrade our API plan.

The background image was only displayed on the upper top portion of the page instead of displaying consistently even when scrolling down the page.

On the results page, white space was noticeable on the left-hand side.

On the result page in smaller viewports some cards had different height due to the title of the plants being on two lines.

Ticket Item NA

Steps to Reproduce Bug - Duplicates/plants with no images

1. Open the project
2. Navigate to Questions.tsx
3. Comment out lines 129 and 130
4. Then just insert data.plantsBasicInfo into the dispatch(setQueryRes()); method
5. When you run the application and navigate to the get started page you should now see cards with no images and cards that are duplicates.

Steps to Reproduce Bug - White space around the results page

1. Open the project and navigate to UnstyledNavbar.tsx
2. Comment out

   const GlobalStyle = createGlobalStyle`
   body{
   margin:0;
   }
   `;

3. When you navigate to the results page you will now see white space along the edges of the page.

Steps to Reproduce Bug - Background not fixed when scrolling down the page

1. Open the project navigate to the GetStarted component and comment out

   return `
     background-attachment: fixed;
     height:100%;
     `;

2. Then move line 18 to line 27 before the justify-content:center
3. Now go through the questions in the application and you will see that the background is not fixed when scrolling down

Steps to Reproduce Bug - Card height being different height in smaller viewports

1. Open the project
2. Navigate to Results.tsx
3. On line 23 replace height: 50px; with min-height: 50px
4. When you run the application and see the results in a smaller viewport you should now see some cards being taller than others

Previous behavior -Duplicated plants and plants with no images would appear in the results

• Background image was not fixed when scrolling down the page when results were rendered
• White space was appearing around the results page
• Smaller viewport some cards are taller than others

Expected behavior A clear and concise description of what you expected to happen.

• No duplicated plants should appear when results are rendered
• Plant cards should always have an image
• The background image on the results page should now be fixed when scrolling down
• No whitespace around the background image should be present on the results page
• Results cards now are the same height in smaller viewports