Issue # 56. Designing responsive list component for the list page #67
Conversation
|
Visit the preview URL for this PR (updated for commit e56ab5c): https://tcl-77-smart-shopping-list--pr67-ma-designing-respons-m0j3x2rv.web.app (expires Sat, 26 Oct 2024 00:42:42 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72 |
eternalmaha
requested review from
alex-andria,
RossaMania,
bbland1,
zahrafalak,
tannaurus and
adidalal
and removed request for
alex-andria and
RossaMania
| @@ -16,6 +16,7 @@ | |||
| "react-bootstrap": "^2.10.5", | |||
| "react-dom": "^18.3.1", | |||
| "react-hot-toast": "^2.4.1", | |||
| "react-icons": "^5.3.0", | |||
There was a problem hiding this comment.
YASSSSS! I love the use of icons while keeping the button colors the same for smaller screen sizes!
| ) : ( | ||
| <Button onClick={toggleEdit}> | ||
| <span className="d-none d-md-inline">Edit</span> | ||
| <FaEdit className="d-block d-md-none" /> |
There was a problem hiding this comment.
Nice use of span elements to keep everything clean!
src/views/authenticated/List.tsx
Outdated
| <p> | ||
| Hello from the <code>/list</code> page! | ||
| <p className="Header"> | ||
| For your ease, items are sorted by next purchase date. View and edit |
There was a problem hiding this comment.
Nice removal of that p element letting us know what page it is! Great use of "Header" class name here, rather than get caught up in elements!
| @@ -3,6 +3,9 @@ import { ListItem } from "../../api"; | |||
| import { toast } from "react-hot-toast"; | |||
| import Button from "react-bootstrap/Button"; | |||
| import Form from "react-bootstrap/Form"; | |||
| import { FaEdit } from "react-icons/fa"; | |||
There was a problem hiding this comment.
Awesome use of these icons! These are the icons i was thinking when using the about page with this meger will have to update! Thanks for the reminder!
| <> | ||
| <Button onClick={updateItemQuantity}> | ||
| <span className="d-none d-md-inline"> Save </span> | ||
| <IoMdCheckmark className="d-block d-md-none" /> |
There was a problem hiding this comment.
love how you handled the switch between icons and words!
src/components/FilterListInput.tsx
Outdated
| @@ -36,7 +39,7 @@ export function FilterListInput({ | |||
| aria-label="Filter items in the list" | |||
| placeholder="Search items..." | |||
| /> | |||
| <Button onClick={handleClear}>x</Button> | |||
| <Button onClick={handleClear}>Clear</Button> | |||
There was a problem hiding this comment.
I like the change to clear, with bootstrap the x that was in the input didn't show any more and the button to clear was the best workaround but the x was awkard so it is much clearer (lol) with clear.
…m to appear in form of modal to reduce extra space
…dit buttons for styling, list item classes for responsiveness (#68)
… small screen sizes
Description
Using a combination of React bootstrap, classic Bootstrap, and custom CSS styling to create a responsive layout & design for our lists view page. This PR highlights a history of developers seeking technical decisions that balance requirements, novelty, complexity, and time constraints. The initial decision was to use React Bootstrap's Container, Rol, and Col components to create a responsive layout. The layout was responsive up until small screen sizes, which debugging revealed to be discrepancies between the column's width and contents. The bug caused the columns to collapse. The responsiveness issues were solved using flexbox in 30 minutes. Flexbox avoided unnecessary complexity tfor the purposes of this issue.
Our team also agreed that including the add item form and share list form into our list page view improved our user experience so to reduce the necessary number of user clicks to access those features.
Figma design
https://www.figma.com/design/v0vHRdn5Gq8kNJSepE5xM8/TCL--GrocerEase?node-id=0-1&node-type=canvas&t=Xf7D0PzYQFTNu6Ga-0
Related Issue
closes #56
Acceptance Criteria
Type of Changes
enhancementUpdates
Before
listitem.container.1.mov
After
responsivelistpage.mov
Screen.Recording.2024-10-18.at.10.40.45.AM.mov
Testing Steps / QA Criteria