From 8b5ad29d904232df0b345900eb8009f3cc1079cb Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 1 May 2025 01:11:34 -0600 Subject: [PATCH 1/6] changed card selection checkboxes style - changed border-radius to 50% for a circle - transparent bg to dark opaque --- UI/Web/src/_card-item-common.scss | 40 +++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/UI/Web/src/_card-item-common.scss b/UI/Web/src/_card-item-common.scss index 1c6f916f3..777a71338 100644 --- a/UI/Web/src/_card-item-common.scss +++ b/UI/Web/src/_card-item-common.scss @@ -9,7 +9,6 @@ $image-width: 160px; color: white; text-transform: uppercase; text-align: center; - position: absolute; top: 0px; right: 0px; @@ -62,9 +61,10 @@ $image-width: 160px; .bulk-mode { position: absolute; - top: 5px; - left: 5px; + top: 0; + left: 0; visibility: hidden; + transition: all ease-in-out 300ms; &.always-show { visibility: visible !important; @@ -76,6 +76,36 @@ $image-width: 160px; width: 20px; height: 20px; color: var(--checkbox-bg-color); + border-radius: 50%; + border: 2px solid #f0f0f0; + background-color: var(--elevation-layer11-dark); + transform: scale(0.85); + transition: all ease-in-out 300ms; + left: 7px; + position: relative; + top: 5px; + box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); + + &:hover { + cursor: pointer; + } + + &:checked { + border: unset; + transform: scale(1); + background-color: var(--primary-color); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); + } + + &:focus { + box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); + } + } + + &:hover { + ~ .card-overlay { + background-color: var(--card-overlay-hover-bg-color); + } } } @@ -114,7 +144,7 @@ $image-width: 160px; left: 0; width: 100%; height: 232.91px; - transition: all 0.2s; + transition: 300ms ease-in-out all; border-top-left-radius: 4px; border-top-right-radius: 4px; @@ -126,7 +156,7 @@ $image-width: 160px; .overlay-information--centered { position: absolute; background-color: rgba(0, 0, 0, 0.7); - border-radius: 50px; + border-radius: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); From 0658c8ca12538b97412f60bd4fb07a03f50ce48c Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 1 May 2025 01:12:52 -0600 Subject: [PATCH 2/6] added a lighter muted color variable --- UI/Web/src/theme/themes/dark.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/UI/Web/src/theme/themes/dark.scss b/UI/Web/src/theme/themes/dark.scss index d06e4e4d0..0abecf3da 100644 --- a/UI/Web/src/theme/themes/dark.scss +++ b/UI/Web/src/theme/themes/dark.scss @@ -51,6 +51,7 @@ --primary-color-scrollbar: rgba(255,255,255,0.3); --default-state-scrollbar: transparent; --text-muted-color: hsla(0,0%,100%,.45); + --text-light-muted-color: hsla(0,0%,100%,.7); /* Override bootstrap css variables */ --bs-body-bg: #1f2020; From e533268a23fb504764a2c54db3ed1e1893dbd5c8 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 1 May 2025 01:22:32 -0600 Subject: [PATCH 3/6] bulk operations style change - added bg color to read/unread/action buttons - "items selected" text color now uses the primary color variable and reduced font size - "deselect all" text uses light muted color variable, goes to white on hover and reduced font size - added border all around to bulk operations box - added 2px padding to bulk operations box --- .../bulk-operations.component.html | 10 +- .../bulk-operations.component.scss | 106 +++++++++++++++++- 2 files changed, 105 insertions(+), 11 deletions(-) diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html index e76d352d8..bdade16ea 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html @@ -1,16 +1,16 @@ @if (bulkSelectionService.selections$ | async; as selectionCount) { @if (selectionCount > 0) { -
+
-
+
{{t('items-selected',{num: selectionCount | number})}} - + @if (hasMarkAsUnread) { } - + - +
diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss index 608b891e9..cde994ed4 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss @@ -2,18 +2,112 @@ z-index: 1; top: 0; position: sticky; + margin-right: 29px; .bulk-select { background-color: var(--bulk-selection-bg-color); - border-bottom: 2px solid var(--primary-color); - color: var(--bulk-selection-text-color) !important; + border: 2px solid var(--primary-color); + box-shadow: 0 4px 30px rgba(0,0,0,0.1); + backdrop-filter: blur(20px); + padding: 2px; + + div { + justify-content: space-between; + margin: 0 12px; + + .highlight { + color: var(--primary-color); + font-size: 0.8125rem; + } + + .selection-actions { + display: flex; + align-items: center; - .btn-icon { - color: var(--bulk-selection-text-color); + .btn-icon { + color: var(--bulk-selection-text-color); + padding: 0 1rem; + margin-right: 6px; + font-size: 21px; + display: flex; + min-height: 40px; + align-items: center; + + &:hover { + background-color: #ffffff2e; + } + } + } + + .btn.deselect { + font-size: 12px; + color: var(--text-light-muted-color); + transition: 300ms ease-in-out all; + i { + color: var(--text-light-muted-color); + transition: 300ms ease-in-out all; + } + &:hover { + color: var(--bulk-selection-text-color); + i { + color: var(--bulk-selection-text-color); + } + } + } + } + + > button.btn { + font-size: 0.75rem; } } } -.highlight { - color: var(--bulk-selection-highlight-text-color) !important; +:host ::ng-deep .bulk-select-container { + .bulk-select { + div { + .selection-actions { + .actionables { + .btn { + padding: 0 1rem; + font-size: 21px; + display: flex; + min-height: 40px; + align-items: center; + border-radius: 6px; + + &:hover { + background-color: #ffffff2e; + } + } + } + } + } + } } + +@media (max-width: 687px) { + .bulk-select-container { + margin: unset; + } +} + +@media (max-width: 428px) { + .bulk-select-container { + .bulk-select { + div { + .highlight { + font-size: 0.6875rem; + } + .selection-actions { + .btn { + font-size: 1.0625rem; + padding: 0.625rem; + } + } + .btn.deselect { + font-size: 0.6875rem; + } + } + } + } +} \ No newline at end of file From 5245a3088c1d2ba49d5c11a4389257dc0f208ef1 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 1 May 2025 01:25:11 -0600 Subject: [PATCH 4/6] potential PWA search bar zoom in fix - input font size changed to 1rem PWA's zoom in on input fields that are less than 16px. --- .../_components/nav-header/nav-header.component.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss index 296e9de45..849925da0 100644 --- a/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss +++ b/UI/Web/src/app/nav/_components/nav-header/nav-header.component.scss @@ -126,6 +126,17 @@ /* small devices (phones, 650px and down) */ @media only screen and (max-width:650px) { + :host ::ng-deep { + .navbar-nav { + .nav-item.search { + .ng-autocomplete { + input { + font-size: 1rem !important; + } + } + } + } + } .navbar-nav { width: 0; } From e37186a7562cddace2f669db4b56c7f9ba9a51ae Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Fri, 2 May 2025 05:56:58 -0600 Subject: [PATCH 5/6] converted px to rem values --- UI/Web/src/_card-item-common.scss | 82 +++++++++---------- .../bulk-operations.component.scss | 25 +++--- 2 files changed, 53 insertions(+), 54 deletions(-) diff --git a/UI/Web/src/_card-item-common.scss b/UI/Web/src/_card-item-common.scss index 777a71338..8bc010398 100644 --- a/UI/Web/src/_card-item-common.scss +++ b/UI/Web/src/_card-item-common.scss @@ -1,26 +1,26 @@ -$image-height: 232.91px; -$image-width: 160px; +$image-height: 14.556875rem; +$image-width: 10rem; .error-banner { width: $image-width; - height: 18px; + height: 1.125rem; background-color: var(--toast-error-bg-color); - font-size: 12px; + font-size: 0.75rem; color: white; text-transform: uppercase; text-align: center; position: absolute; - top: 0px; - right: 0px; + top: 0.0rem; + right: 0.0rem; } .selected-highlight { - outline: 2px solid var(--primary-color); + outline: 0.125rem solid var(--primary-color); } .progress-banner { width: $image-width; - height: 5px; + height: 0.3125rem; .progress { color: var(--card-progress-bar-color); @@ -29,15 +29,15 @@ $image-width: 160px; } .download { - width: 80px; - height: 80px; + width: 5rem; + height: 5rem; position: absolute; top: 25%; right: 30%; } .badge-container { - border-radius: 4px; + border-radius: 0.25rem; display: block; height: $image-height; left: 0; @@ -45,13 +45,13 @@ $image-width: 160px; pointer-events: none; position: absolute; top: 0; - width: 160px; + width: 10rem; } .not-read-badge { position: absolute; top: calc(-1 * (var(--card-progress-triangle-size) / 2)); - right: -14px; + right: -0.875rem; z-index: 1000; height: var(--card-progress-triangle-size); width: var(--card-progress-triangle-size); @@ -73,18 +73,18 @@ $image-width: 160px; } input[type="checkbox"] { - width: 20px; - height: 20px; + width: 1.25rem; + height: 1.25rem; color: var(--checkbox-bg-color); border-radius: 50%; - border: 2px solid #f0f0f0; + border: 0.125rem solid #f0f0f0; background-color: var(--elevation-layer11-dark); transform: scale(0.85); transition: all ease-in-out 300ms; - left: 7px; + left: 0.4375rem; position: relative; - top: 5px; - box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); + top: 0.3125rem; + box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%); &:hover { cursor: pointer; @@ -98,7 +98,7 @@ $image-width: 160px; } &:focus { - box-shadow: 0 0 5px 2px hsl(0deg 0% 0% / 69%); + box-shadow: 0 0 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%); } } @@ -143,10 +143,10 @@ $image-width: 160px; top: 0; left: 0; width: 100%; - height: 232.91px; + height: 14.556875rem; transition: 300ms ease-in-out all; - border-top-left-radius: 4px; - border-top-right-radius: 4px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; &:hover { background-color: var(--card-overlay-hover-bg-color); @@ -156,7 +156,7 @@ $image-width: 160px; .overlay-information--centered { position: absolute; background-color: rgba(0, 0, 0, 0.7); - border-radius: 15px; + border-radius: 0.9375rem; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -171,8 +171,8 @@ $image-width: 160px; } .count { - top: 5px; - right: 10px; + top: 0.3125rem; + right: 0.625rem; position: absolute; } } @@ -182,26 +182,26 @@ $image-width: 160px; } .library { - font-size: 13px; + font-size: 0.8125rem; text-decoration: none; - margin-top: 0px; + margin-top: 0.0rem; } .card-title-container { display: flex; justify-content: space-between; align-items: center; - padding: 0 5px; + padding: 0 0.3125rem; :first-child { - min-width: 22px; + min-width: 1.375rem; } .card-title { font-size: 0.8rem; margin: 0; text-align: center; - max-width: 90px; + max-width: 5.625rem; a { overflow: hidden; @@ -211,15 +211,15 @@ $image-width: 160px; } .card-actions { - min-width: 15.82px; + min-width: 0.98875rem; } .card-format { - min-width: 22px; + min-width: 1.375rem; } ::ng-deep app-card-actionables .dropdown .dropdown-toggle { - padding: 0 5px; + padding: 0 0.3125rem; } .meta-title { @@ -231,9 +231,9 @@ $image-width: 160px; .card-title { font-size: 0.8rem; margin: 0; - padding: 10px 0; + padding: 0.625rem 0; text-align: center; - max-width: 120px; + max-width: 7.5rem; a { overflow: hidden; @@ -242,7 +242,7 @@ $image-width: 160px; } .card-body > div:nth-child(2) { - height: 40px; + height: 2.5rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; @@ -255,7 +255,7 @@ $image-width: 160px; visibility: hidden; display: none; .card-title { - padding: 10px; + padding: 0.625rem; } } @@ -265,11 +265,11 @@ $image-width: 160px; .expected { .overlay-information--centered { div { - height: 32px; - width: 32px; + height: 2rem; + width: 2rem; i { font-size: 1.4rem; - line-height: 32px; + line-height: 2rem; } } } diff --git a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss index cde994ed4..7e39f1bc4 100644 --- a/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss +++ b/UI/Web/src/app/cards/bulk-operations/bulk-operations.component.scss @@ -2,18 +2,17 @@ z-index: 1; top: 0; position: sticky; - margin-right: 29px; + margin-right: 1.8125rem; .bulk-select { background-color: var(--bulk-selection-bg-color); - border: 2px solid var(--primary-color); - box-shadow: 0 4px 30px rgba(0,0,0,0.1); - backdrop-filter: blur(20px); - padding: 2px; + border: 0.125rem solid var(--primary-color); + box-shadow: 0 0.25rem 1.875rem rgba(0,0,0,0.1); + padding: 0.125rem; div { justify-content: space-between; - margin: 0 12px; + margin: 0 0.75rem; .highlight { color: var(--primary-color); @@ -27,10 +26,10 @@ .btn-icon { color: var(--bulk-selection-text-color); padding: 0 1rem; - margin-right: 6px; - font-size: 21px; + margin-right: 0.375rem; + font-size: 1.125rem; display: flex; - min-height: 40px; + min-height: 2.5rem; align-items: center; &:hover { @@ -40,7 +39,7 @@ } .btn.deselect { - font-size: 12px; + font-size: 0.75rem; color: var(--text-light-muted-color); transition: 300ms ease-in-out all; i { @@ -69,11 +68,11 @@ .actionables { .btn { padding: 0 1rem; - font-size: 21px; + font-size: 1.3125rem; display: flex; - min-height: 40px; + min-height: 2.5rem; align-items: center; - border-radius: 6px; + border-radius: 0.375rem; &:hover { background-color: #ffffff2e; From 2b6a692b6fba78a175c0212569edd7e1a786b1c1 Mon Sep 17 00:00:00 2001 From: Christopher <39032787+MrRobotjs@users.noreply.github.com> Date: Thu, 8 May 2025 03:45:03 -0600 Subject: [PATCH 6/6] added pwa zoom in fix to login screen --- UI/Web/src/app/registration/user-login/user-login.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/UI/Web/src/app/registration/user-login/user-login.component.scss b/UI/Web/src/app/registration/user-login/user-login.component.scss index d1d755d33..d7085d9a0 100644 --- a/UI/Web/src/app/registration/user-login/user-login.component.scss +++ b/UI/Web/src/app/registration/user-login/user-login.component.scss @@ -15,6 +15,7 @@ a { color: #fff !important; border-color: var(--login-input-border-color); font-family: var(--login-input-font-family); + font-size: 1rem; &:focus { border-color: var(--login-input-border-color-focus);