vinson-han / expense-tracker

0 stars 1 forks source link

Implement responsive styling #38

Closed santi-jose closed 3 months ago

santi-jose commented 3 months ago

Task Owner (Responsible): [Jose, Santiago]

Task Assignee (Accountable): [Jose, Santiago]

Task Deadline: [5/27/2024]

Task Description: Style expense-tracker component to be responsive with window size. Implement small, medium, and large window styling layouts using Tailwind.

Acceptance Criteria: The website layout for the expense-tracker changes when the viewport changes sizes.

Estimation: I would estimate this task to take no more than a few days. I hope to have it done by the end of the day Friday. 5/24/24 .

Dependencies: Need to ensure the file structure for the expense-component is valid. Then I can go forward with changes to the styling since the tailwind css is inline with the div elements.

Priority: Moderate

Task Type: Design

Subtasks:

  1. Define the small (sm), medium (md), and large (lg) sizes that dictate the change in layout using Tailwind config file.
  2. Wireframe the layout of the webpage dependent on the size of the viewport (sm, md, lg)
  3. Implement styling for large viewports
  4. Implement styling for medium viewports
  5. Implement styling for small viewports
  6. Test & submit for pull request … Testing Requirements: Testing will be through the developer window in Chrome. I will be testing the different viewport sizes to see the styling changes accordingly.

Documentation: I will provide Figma documents that describe the layout of the webpage dependent on the 3 viewport sizes described above.

Definition of Done: This task is done when the website is responsive to the changes in window size and displays the 3 different styling of the webpage appropriately. …