React App Bug Fixes
Budget: $30 – $250 USD
NOTE:
1. Everything below should work and be testeed on Chrome, Edge, Firefox and Safari of windows, Mac desktops. Iphone and android mobile browsers.
We need too complete bugs first followed by enhancements. Some of the styling items may require revisions. Milestones will be created
2. Please change ONLY the lines needed and do not make any formatting changes, otherwise this will make it difficult for us to code review. So please disable any auto-formatting in your IDEs.
3. We will provide access to GitHub, you need to have an account and even if you worked on this project before, please create a new branch for this project alone.
4. Below requirements will be broken down into milestones. If a milestone is not completed satisfactorily, we may end the project without approving additional milestones.
Bugs:
a. Search results were supposed tos how retailer logo in all screen sizes, it is broken and does not work in row layout (when one computer per row in desktop/phone window)
b. When there are no results upon search, we need to display a nice message at the top that of the "no results" page that says "No results found". But this message should not show when a user first visits the website (no search performed)
(you can test it with price, RAM and CPU Speed set to highest values)
c. When you see results and click on Show details for a computer, it shows a border around it, we need to remove that.
c. When we launch Show details and close the page behind it shakes (moves to the left and right). I can send a video if you are not able to reproduce this issue.
d. Compare table is not centered.
f. Radio buttons are not getting selected sometimes when you click first time. Noticed on both dekstop and iphone, but on iphone, it is very consistent. Only the 2nd click selects the radio button. Same issue with Clear Filters, should be fixed.
g. On search results, when you click on some of the exclamaion icon next to "Show details" its showing two tool tips. and it only seems to happen for some results.
Enhancements:
1. Search filter improvements:
a. Scrollbar should not show but appear when mouse is in the left pane. Go to Bing shopping website and enter search for "laptops", scroll down past the Ads (top two rows) and observe what happens when you scroll the down on results and scroll on the left pane for search filters. This is exactly how should implement.
b. Scroll bar for search filters should be a bit thinner, maybe half the size pixes (when it appears) and with #404040 color - on all browsers - Chrome, Firefox, Safari and Edge.)
c. Provide a small toggle icon at the top (right aligned), same rows as Clear filters, to collapse all search filters on one click and expand all when clicked again. Mouse-over text should show: "Collapse all" "Expand all" depending on what the next click will do.
d. On mobile(NOT tablet): There should only be one option for results display layout. The two icons on top right should not be available, but it should always use layout of one laptop per row.
4. General styling
a. Entire screen background should have color e6e6e6 (should be in a css variable set in a common.scss or any one scss files and reused as a variable in all pages). Search filter cards, header and item cards of the results list should remain white(no change here).
b. all headings / links need to use font Jura - eg. Compare page --> "Compare Specs" "Clear All" , Results page --> Show details, compare, etc.
1. Everything below should work and be testeed on Chrome, Edge, Firefox and Safari of windows, Mac desktops. Iphone and android mobile browsers.
We need too complete bugs first followed by enhancements. Some of the styling items may require revisions. Milestones will be created
2. Please change ONLY the lines needed and do not make any formatting changes, otherwise this will make it difficult for us to code review. So please disable any auto-formatting in your IDEs.
3. We will provide access to GitHub, you need to have an account and even if you worked on this project before, please create a new branch for this project alone.
4. Below requirements will be broken down into milestones. If a milestone is not completed satisfactorily, we may end the project without approving additional milestones.
Bugs:
a. Search results were supposed tos how retailer logo in all screen sizes, it is broken and does not work in row layout (when one computer per row in desktop/phone window)
b. When there are no results upon search, we need to display a nice message at the top that of the "no results" page that says "No results found". But this message should not show when a user first visits the website (no search performed)
(you can test it with price, RAM and CPU Speed set to highest values)
c. When you see results and click on Show details for a computer, it shows a border around it, we need to remove that.
c. When we launch Show details and close the page behind it shakes (moves to the left and right). I can send a video if you are not able to reproduce this issue.
d. Compare table is not centered.
f. Radio buttons are not getting selected sometimes when you click first time. Noticed on both dekstop and iphone, but on iphone, it is very consistent. Only the 2nd click selects the radio button. Same issue with Clear Filters, should be fixed.
g. On search results, when you click on some of the exclamaion icon next to "Show details" its showing two tool tips. and it only seems to happen for some results.
Enhancements:
1. Search filter improvements:
a. Scrollbar should not show but appear when mouse is in the left pane. Go to Bing shopping website and enter search for "laptops", scroll down past the Ads (top two rows) and observe what happens when you scroll the down on results and scroll on the left pane for search filters. This is exactly how should implement.
b. Scroll bar for search filters should be a bit thinner, maybe half the size pixes (when it appears) and with #404040 color - on all browsers - Chrome, Firefox, Safari and Edge.)
c. Provide a small toggle icon at the top (right aligned), same rows as Clear filters, to collapse all search filters on one click and expand all when clicked again. Mouse-over text should show: "Collapse all" "Expand all" depending on what the next click will do.
d. On mobile(NOT tablet): There should only be one option for results display layout. The two icons on top right should not be available, but it should always use layout of one laptop per row.
4. General styling
a. Entire screen background should have color e6e6e6 (should be in a css variable set in a common.scss or any one scss files and reused as a variable in all pages). Search filter cards, header and item cards of the results list should remain white(no change here).
b. all headings / links need to use font Jura - eg. Compare page --> "Compare Specs" "Clear All" , Results page --> Show details, compare, etc.