From 5b058096b43ee2393d6bf86e29c5232ff2e00257 Mon Sep 17 00:00:00 2001 From: Alexander Date: Sat, 1 Nov 2025 17:25:48 +0000 Subject: [PATCH 01/22] fix(ui): remove logo hover effects in header - Remove opacity hover effect from LIFT logo - Remove pointer cursor from logo button - Add testing issue tracking document (Issue #1) --- docs/TESTING_ISSUES.md | 148 +++++++++++++++++++++++ src/lib/components/layouts/Header.svelte | 2 +- 2 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 docs/TESTING_ISSUES.md diff --git a/docs/TESTING_ISSUES.md b/docs/TESTING_ISSUES.md new file mode 100644 index 0000000..74c523a --- /dev/null +++ b/docs/TESTING_ISSUES.md @@ -0,0 +1,148 @@ +# LIFT Workwise Testing Issue Log + +Track testing issues and their resolution status. Work through these one by one, committing after each fix. + +## Issues + +### Issue #1 - Logo hover effect +- [x] **Status**: ✅ Fixed +- **Description**: The LIFT logo in the header should not have a hover effect and should not appear translucent. +- **Location**: Header +- **Files affected**: `src/lib/components/layouts/Header.svelte` (line 116) +- **Solution**: Removed `hover:opacity-80`, `transition-opacity`, and `cursor-pointer` classes from logo button + +--- + +### Issue #2 - Icon hover effects +- [ ] **Status**: Not started +- **Description**: The icons in these three buttons should turn pink when hovered: generate an email summary, get help, font size settings. Otherwise, they will disappear with a white hover background. +- **Location**: All pages +- **Files affected**: TBD + +--- + +### Issue #3 - Dashboard breadcrumb styling +- [ ] **Status**: Not started +- **Description**: When on the dashboard page, 'Dashboard' in breadcrumb should be bold, not underlined, and not clickable, because it is the current page the user is on. +- **Location**: Dashboard +- **Files affected**: TBD + +--- + +### Issue #4 - Button hover effects +- [ ] **Status**: Not started +- **Description**: Each button should have a hover effect. It can be thicker border. +- **Location**: Dashboard +- **Files affected**: TBD + +--- + +### Issue #5 - Back button position +- [ ] **Status**: Not started +- **Description**: The 'back' button should be on the left side of the breadcrumb, on the same line. +- **Location**: All pages +- **Files affected**: TBD + +--- + +### Issue #6 - Action status terminology +- [ ] **Status**: Not started +- **Description**: It is not intuitive to use 'active' and 'inactive' to describe actions. Using 'to do' and 'done' should be clearer. So the toggle module can be: [Link button] To do [toggle] Done. At the same time, the 'Show Inactive' toggle at the top should change to 'Show done actions'. +- **Location**: Actions +- **Files affected**: TBD + +--- + +### Issue #8 - Page title +- [ ] **Status**: Not started +- **Description**: The website should have a proper page title as displayed in the browser tab. +- **Location**: All pages +- **Files affected**: TBD + +--- + +### Issue #9 - Save button text +- [ ] **Status**: Not started +- **Description**: The OK button should have text 'Save' instead. +- **Location**: All forms +- **Files affected**: TBD + +--- + +### Issue #10 - Save confirmation +- [ ] **Status**: Not started +- **Description**: After editing and saving a field, there should be a confirmation message to let users know the changes have been saved. +- **Location**: All forms +- **Files affected**: TBD + +--- + +### Issue #11 - Visibility text styling +- [ ] **Status**: Not started +- **Description**: This line of text should be black instead of grey and it misses a full stop: 'Visibility to employer. This answer and actions will be included on the email' +- **Location**: All forms +- **Files affected**: TBD + +--- + +### Issue #12 - Mobile saved message overlap +- [ ] **Status**: Not started +- **Description**: When switching the 'Visibility to employer' toggle on mobile, 'Saved' message overlaps with section heading. +- **Location**: All forms +- **Files affected**: TBD + +--- + +### Issue #13 - Email preview hover effects +- [ ] **Status**: Not started +- **Description**: When sending an email to the manager, in the email preview, actions fields should not have hover effect as they are not editable. +- **Location**: Email Preview +- **Files affected**: TBD + +--- + +### Issue #14 - Email button on email preview +- [ ] **Status**: Not started +- **Description**: On the email preview page, the email button at the top-right corner in the header should not be translucent. It should be removed on this page. +- **Location**: Email Preview +- **Files affected**: TBD + +--- + +### Issue #17 - Replace ampersands +- [ ] **Status**: Not started +- **Description**: Please replace all ampersands with 'and' in full +- **Location**: All pages +- **Files affected**: TBD + +--- + +### Issue #18 - Remove italics +- [ ] **Status**: Not started +- **Description**: Remove all use of italics across the site +- **Location**: All pages +- **Files affected**: TBD + +--- + +### Issue #20 - Manager actions field text +- [ ] **Status**: Not started +- **Description**: Change the field on manager actions to 'The actions you'd like your manager to take in response to this question.' +- **Location**: All forms +- **Files affected**: TBD + +--- + +### Issue #21 - "Islington" reference +- [ ] **Status**: Not started +- **Description**: In My workplace adjustments, it says 'What do you need to thrive in your role here at Islington?' Is this right, at Islington suggest the council when this is for wider use and I guess this will be available to the other LIFT boroughs? +- **Location**: My workplace adjustments +- **Files affected**: TBD + +--- + +## Progress Summary + +- **Total Issues**: 17 +- **Completed**: 1 +- **Remaining**: 16 diff --git a/src/lib/components/layouts/Header.svelte b/src/lib/components/layouts/Header.svelte index 7881f48..c678de1 100644 --- a/src/lib/components/layouts/Header.svelte +++ b/src/lib/components/layouts/Header.svelte @@ -113,7 +113,7 @@
diff --git a/src/lib/components/ui/ProfileButton.svelte b/src/lib/components/ui/ProfileButton.svelte index b86526c..a250f9c 100644 --- a/src/lib/components/ui/ProfileButton.svelte +++ b/src/lib/components/ui/ProfileButton.svelte @@ -25,11 +25,11 @@ From 250151698e879adf76cc5f26fd6f9981531ebddf Mon Sep 17 00:00:00 2001 From: Alexander Date: Sat, 1 Nov 2025 17:42:18 +0000 Subject: [PATCH 03/22] fix(ui): make dashboard breadcrumb non-clickable when on dashboard page - Dashboard breadcrumb now shows as bold without underline when on dashboard - Becomes clickable link when navigating to other pages - Fix breadcrumbList reactivity warning by using $state - Update testing issues tracker (Issue #3) --- docs/TESTING_ISSUES.md | 9 +++++---- src/lib/components/ui/Breadcrumb.svelte | 8 +++++--- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/TESTING_ISSUES.md b/docs/TESTING_ISSUES.md index 0b9330f..85a3b7b 100644 --- a/docs/TESTING_ISSUES.md +++ b/docs/TESTING_ISSUES.md @@ -27,10 +27,11 @@ Track testing issues and their resolution status. Work through these one by one, --- ### Issue #3 - Dashboard breadcrumb styling -- [ ] **Status**: Not started +- [x] **Status**: ✅ Fixed - **Description**: When on the dashboard page, 'Dashboard' in breadcrumb should be bold, not underlined, and not clickable, because it is the current page the user is on. - **Location**: Dashboard -- **Files affected**: TBD +- **Files affected**: `src/lib/components/ui/Breadcrumb.svelte` (line 105-109) +- **Solution**: Changed Dashboard breadcrumb item to be non-clickable (`clickable: false`) when current view is dashboard. The existing CSS already styles non-clickable items as bold without underline using `.breadcrumb-current` class. --- @@ -149,5 +150,5 @@ Track testing issues and their resolution status. Work through these one by one, ## Progress Summary - **Total Issues**: 17 -- **Completed**: 2 -- **Remaining**: 15 +- **Completed**: 3 +- **Remaining**: 14 diff --git a/src/lib/components/ui/Breadcrumb.svelte b/src/lib/components/ui/Breadcrumb.svelte index d1d9342..d03251d 100644 --- a/src/lib/components/ui/Breadcrumb.svelte +++ b/src/lib/components/ui/Breadcrumb.svelte @@ -16,7 +16,7 @@ // Track which breadcrumb items are on a wrapped line let wrappedItems = $state>(new Set()); - let breadcrumbList: HTMLElement | null = null; + let breadcrumbList = $state(null); // Detect wrapped breadcrumb items function checkWrapping() { @@ -101,10 +101,12 @@ const items: BreadcrumbItem[] = []; // Always start with Dashboard + // Dashboard is only clickable if we're NOT already on the dashboard + const isDashboard = viewName === 'dash'; items.push({ label: 'Dashboard', - clickable: true, - action: () => setViewName('dash') + clickable: !isDashboard, + action: !isDashboard ? () => setViewName('dash') : undefined }); // Add intermediate levels based on current view From 18d2adb79b41b17eb561546072badcc2cc6b253a Mon Sep 17 00:00:00 2001 From: Alexander Date: Sat, 1 Nov 2025 17:45:54 +0000 Subject: [PATCH 04/22] fix(ui): add thicker border hover effect to dashboard tiles and question lists - Add 2px inset box-shadow on hover for visual feedback - Inset shadow grows inward without affecting layout - Apply to dashboard tiles (rect and square variants) - Apply to question list items - Update testing issues tracker (Issue #4) --- docs/TESTING_ISSUES.md | 14 +++++++++----- src/app.css | 6 ++++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/docs/TESTING_ISSUES.md b/docs/TESTING_ISSUES.md index 85a3b7b..40b3c2b 100644 --- a/docs/TESTING_ISSUES.md +++ b/docs/TESTING_ISSUES.md @@ -36,10 +36,14 @@ Track testing issues and their resolution status. Work through these one by one, --- ### Issue #4 - Button hover effects -- [ ] **Status**: Not started +- [x] **Status**: ✅ Fixed - **Description**: Each button should have a hover effect. It can be thicker border. -- **Location**: Dashboard -- **Files affected**: TBD +- **Location**: Dashboard and question lists +- **Files affected**: `src/app.css` (lines 89-91, 106, 353) +- **Solution**: Added inset box-shadow on hover to create a thicker border effect that grows inward (doesn't affect layout). Applied to: + - `.dash-tile-rect` (2px inset) + - `.dash-tile-square` (2px inset combined with existing shadow) + - `.list-item-questions` (2px inset combined with existing shadow) --- @@ -150,5 +154,5 @@ Track testing issues and their resolution status. Work through these one by one, ## Progress Summary - **Total Issues**: 17 -- **Completed**: 3 -- **Remaining**: 14 +- **Completed**: 4 +- **Remaining**: 13 diff --git a/src/app.css b/src/app.css index b3aa431..a0fa312 100644 --- a/src/app.css +++ b/src/app.css @@ -86,6 +86,10 @@ h3 { @apply cursor-pointer; } +.dash-tile-rect:hover:not(:disabled) { + box-shadow: inset 0 0 0 2px var(--color-primary); +} + .dash-tile-rect:disabled { @apply cursor-not-allowed opacity-60; } @@ -99,6 +103,7 @@ h3 { .dash-tile-square:hover:not(:disabled) { @apply border-secondary shadow-md; transform: translateY(-1px); + box-shadow: inset 0 0 0 2px var(--color-primary), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .dash-tile-square:active:not(:disabled) { @@ -345,6 +350,7 @@ h3 { .list-item-questions:hover { @apply border-secondary shadow-md; + box-shadow: inset 0 0 0 2px var(--color-primary), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .list-item-actions { From 558c8188dbf3ea1384ce2fe510ad2e9722782c9b Mon Sep 17 00:00:00 2001 From: Alexander Date: Sat, 1 Nov 2025 17:52:01 +0000 Subject: [PATCH 05/22] fix(ui): improve action status terminology for clarity - Replace "Active"/"Inactive" with "To do"/"Done" labels - Add static labels on both sides of toggle switch - Change "Show Inactive" to "Show done actions" filter - Layout: [Link button] To do [toggle] Done - Document Issue #5 as rejected (breaks layout logic) - Update testing issues tracker (Issue #6) --- docs/TESTING_ISSUES.md | 18 +++++++++++------- .../components/ui/ActionStatusToggle.svelte | 5 +++-- .../components/ui/ShowArchivedToggle.svelte | 2 +- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/TESTING_ISSUES.md b/docs/TESTING_ISSUES.md index 40b3c2b..16f85b0 100644 --- a/docs/TESTING_ISSUES.md +++ b/docs/TESTING_ISSUES.md @@ -48,18 +48,22 @@ Track testing issues and their resolution status. Work through these one by one, --- ### Issue #5 - Back button position -- [ ] **Status**: Not started -- **Description**: The 'back' button should be on the left side of the breadcrumb, on the same line. +- [ ] **Status**: ❌ Not implemented - breaks layout +- **Description**: The 'back' button should be on the left side of the breadcrumb, on the same line. Remove the icon, only text "back" - **Location**: All pages -- **Files affected**: TBD +- **Files affected**: N/A +- **Reason not implemented**: Moving the back button to the left side of the breadcrumb breaks all the style logic. The current grid layout has the breadcrumb on the left and back button on the right, which is intentional for the overall design system. --- ### Issue #6 - Action status terminology -- [ ] **Status**: Not started +- [x] **Status**: ✅ Fixed - **Description**: It is not intuitive to use 'active' and 'inactive' to describe actions. Using 'to do' and 'done' should be clearer. So the toggle module can be: [Link button] To do [toggle] Done. At the same time, the 'Show Inactive' toggle at the top should change to 'Show done actions'. - **Location**: Actions -- **Files affected**: TBD +- **Files affected**: + - `src/lib/components/ui/ActionStatusToggle.svelte` (lines 17, 24) + - `src/lib/components/ui/ShowArchivedToggle.svelte` (line 14) +- **Solution**: Added static labels "To do" and "Done" on either side of the toggle switch. Changed "Show Inactive" to "Show done actions" in the filter toggle. Layout: [Link button] To do [toggle] Done --- @@ -154,5 +158,5 @@ Track testing issues and their resolution status. Work through these one by one, ## Progress Summary - **Total Issues**: 17 -- **Completed**: 4 -- **Remaining**: 13 +- **Completed**: 5 +- **Remaining**: 11 (1 rejected) diff --git a/src/lib/components/ui/ActionStatusToggle.svelte b/src/lib/components/ui/ActionStatusToggle.svelte index 620d401..791927f 100644 --- a/src/lib/components/ui/ActionStatusToggle.svelte +++ b/src/lib/components/ui/ActionStatusToggle.svelte @@ -13,12 +13,13 @@ }; -