Skip to content

Card checkbox style updates #3780

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Card checkbox style updates #3780

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8b5ad29
changed card selection checkboxes style
MrRobotjs May 1, 2025
0658c8c
added a lighter muted color variable
MrRobotjs May 1, 2025
e533268
bulk operations style change
MrRobotjs May 1, 2025
5245a30
potential PWA search bar zoom in fix
MrRobotjs May 1, 2025
e37186a
converted px to rem values
MrRobotjs May 2, 2025
2b6a692
added pwa zoom in fix to login screen
MrRobotjs May 8, 2025
707fb2c
Merge remote-tracking branch 'upstream/develop' into feature/qol-bulk…
MrRobotjs May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 70 additions & 40 deletions UI/Web/src/_card-item-common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +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);
Expand All @@ -30,29 +29,29 @@ $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;
overflow: hidden;
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);
Expand All @@ -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;
Expand All @@ -73,9 +73,39 @@ $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: 0.125rem solid #f0f0f0;
background-color: var(--elevation-layer11-dark);
transform: scale(0.85);
transition: all ease-in-out 300ms;
left: 0.4375rem;
position: relative;
top: 0.3125rem;
box-shadow: 0 0 0.3125rem 0.125rem 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 0.3125rem 0.125rem hsl(0deg 0% 0% / 69%);
}
}

&:hover {
~ .card-overlay {
background-color: var(--card-overlay-hover-bg-color);
}
}
}

Expand Down Expand Up @@ -113,10 +143,10 @@ $image-width: 160px;
top: 0;
left: 0;
width: 100%;
height: 232.91px;
transition: all 0.2s;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 14.556875rem;
transition: 300ms ease-in-out all;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;

&:hover {
background-color: var(--card-overlay-hover-bg-color);
Expand All @@ -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: 0.9375rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Expand All @@ -141,8 +171,8 @@ $image-width: 160px;
}

.count {
top: 5px;
right: 10px;
top: 0.3125rem;
right: 0.625rem;
position: absolute;
}
}
Expand All @@ -152,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;
Expand All @@ -181,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 {
Expand All @@ -201,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;
Expand All @@ -212,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;
Expand All @@ -225,7 +255,7 @@ $image-width: 160px;
visibility: hidden;
display: none;
.card-title {
padding: 10px;
padding: 0.625rem;
}
}

Expand All @@ -235,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;
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions UI/Web/src/app/cards/bulk-operations/bulk-operations.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<ng-container *transloco="let t; read: 'bulk-operations'">
@if (bulkSelectionService.selections$ | async; as selectionCount) {
@if (selectionCount > 0) {
<div class="bulk-select-container" [ngStyle]="{'margin-left': marginLeft + 'px', 'margin-right': marginRight + 'px'}">
<div class="bulk-select-container">
<div class="bulk-select">
<div class="d-flex justify-content-around align-items-center">
<div class="d-flex align-items-center">

<span class="highlight">
<i class="fa fa-check me-1" aria-hidden="true"></i>
{{t('items-selected',{num: selectionCount | number})}}
</span>

<span>
<span class="selection-actions">
@if (hasMarkAsUnread) {
<button class="btn btn-icon" (click)="executeAction(Action.MarkAsUnread)" [ngbTooltip]="t('mark-as-unread')" placement="bottom">
<i class="fa-regular fa-circle-check" aria-hidden="true"></i>
Expand All @@ -23,12 +23,12 @@
<span class="visually-hidden">{{t('mark-as-read')}}</span>
</button>
}
<app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" />
<app-card-actionables (actionHandler)="performAction($event)" [inputActions]="actions" labelBy="bulk-actions-header" iconClass="fa-ellipsis-h" class="actionables"/>
</span>

<span id="bulk-actions-header" class="visually-hidden">Bulk Actions</span>

<button class="btn btn-icon" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
<button class="btn btn-icon deselect" (click)="bulkSelectionService.deselectAll()"><i class="fa fa-times me-1" aria-hidden="true"></i>{{t('deselect-all')}}</button>
</div>
</div>
</div>
Expand Down
Loading