paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 03:16:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

bs5: fix card checkboxes no longer custom controls

Browse Source
This commit is contained in:
Michael Shamoon
2022-02-19 22:57:04 -08:00
parent 4400915e0c
commit 99409f258f
4 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@@ -3,10 +3,10 @@
<div class="col-md-2 doc-img-background rounded-start" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)"> <div class="col-md-2 doc-img-background rounded-start" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
<img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()"> <img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
<div style="top: 0; left: 0" class="position-absolute border-end border-bottom bg-light py-1 px-2" [class.document-card-check]="!selected"> <div class="border-end border-bottom bg-light document-card-check">
<div class="custom-control custom-checkbox"> <div class="form-check">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)"> <input type="checkbox" class="form-check-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> <label class="form-check-label" for="smallCardCheck{{document.id}}"></label>
</div> </div>
</div> </div>

22
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
View File

@@ -27,7 +27,23 @@
} }
.document-card-check { .document-card-check {
display: none display: none;
position: absolute;
top: 0;
left: 0;
padding: 0.5rem;
border-top-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
.form-check {
padding: 0;
min-height: 0;
margin-bottom: 0;
.form-check-input {
margin-left: 0;
}
}
} }
.document-card:hover .document-card-check { .document-card:hover .document-card-check {
@@ -36,6 +52,10 @@
.card-selected { .card-selected {
border-color: $primary; border-color: $primary;
.document-card-check {
display: block;
}
} }
.doc-img-background-selected { .doc-img-background-selected {

6
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@@ -4,9 +4,9 @@
<img class="card-img doc-img rounded-top" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()"> <img class="card-img doc-img rounded-top" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()">
<div class="border-end border-bottom bg-light py-1 px-2 document-card-check"> <div class="border-end border-bottom bg-light py-1 px-2 document-card-check">
<div class="custom-control custom-checkbox"> <div class="form-check">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)"> <input type="checkbox" class="form-check-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> <label class="form-check-label" for="smallCardCheck{{document.id}}"></label>
</div> </div>
</div> </div>

13
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
View File

@@ -16,6 +16,19 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
padding: 0.5rem;
border-top-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
.form-check {
padding: 0;
min-height: 0;
margin-bottom: 0;
.form-check-input {
margin-left: 0;
}
}
} }
.document-card:hover .document-card-check { .document-card:hover .document-card-check {