Is your feature request related to a problem? Please describe.Given the current implementation of the "Shift Details" page, which displays all columns on mobile and uses "Send Emergency Alert" as a column name,
When users view the page on a mobile device or interact with the page,
Then they should experience improved usability, with only essential columns visible by default, clear labeling, and color-coded grouping of dates.
Describe the solution you'd like
Implement the following updates on the "Shift Details" page for the current sprint:
1) Mobile View Column Display:
On mobile, display only the Date, Shift, and Coverage columns by default. When users click on a specific shift row, expand the row to reveal the additional details such as View Volunteers, Open/Close Sign Up, Edit Shift, and Contact Volunteers columns.
2) Rename the "Send Emergency Alert" column:
Change the label of the "Send Emergency Alert" column to "Contact Volunteers" to better reflect its purpose.
3) Add Color Labels to Date Column:
Add small color labels to the left side of the Date column to visually group the shifts by date. Each date group should have a distinct color for better visual identification.
4) Styling Adjustments:
Make any necessary styling adjustments for consistency with the overall design and ensure that all changes remain responsive across devices and screen sizes.
Acceptance Criteria
[ ] In mobile view, only the Date, Shift, and Coverage columns are displayed by default.
[ ] Clicking on a specific shift row in mobile view expands the row to show additional details (i.e., View Volunteers, Open/Close Sign Up, Edit Shift, and Contact Volunteers).
[ ] The "Send Emergency Alert" column is renamed to "Contact Volunteers" across the UI.
[ ] Color labels are added to the left side of the Date column to group the shifts by date.
[ ] All updates are responsive and display correctly across different screen sizes.
[ ] Styling changes are consistent and match the overall design.
Is your feature request related to a problem? Please describe. Given the current implementation of the "Shift Details" page, which displays all columns on mobile and uses "Send Emergency Alert" as a column name, When users view the page on a mobile device or interact with the page, Then they should experience improved usability, with only essential columns visible by default, clear labeling, and color-coded grouping of dates.
Describe the solution you'd like Implement the following updates on the "Shift Details" page for the current sprint:
1) Mobile View Column Display: On mobile, display only the Date, Shift, and Coverage columns by default. When users click on a specific shift row, expand the row to reveal the additional details such as View Volunteers, Open/Close Sign Up, Edit Shift, and Contact Volunteers columns. 2) Rename the "Send Emergency Alert" column: Change the label of the "Send Emergency Alert" column to "Contact Volunteers" to better reflect its purpose. 3) Add Color Labels to Date Column: Add small color labels to the left side of the Date column to visually group the shifts by date. Each date group should have a distinct color for better visual identification. 4) Styling Adjustments: Make any necessary styling adjustments for consistency with the overall design and ensure that all changes remain responsive across devices and screen sizes.
Acceptance Criteria