selection for small cards

This commit is contained in:
jonaswinkler
2020-12-13 14:10:55 +01:00
parent 2374506a20
commit 7906d8fef1
5 changed files with 32 additions and 7 deletions

View File

@@ -1,12 +1,12 @@
<div class="col p-2 h-100 document-card" style="width: 16rem;">
<div class="card h-100 shadow-sm">
<div class="border-bottom">
<img class="card-img doc-img" [src]="getThumbUrl()">
<div class="card h-100 shadow-sm" [class.card-selected]="selected">
<div class="border-bottom" [class.doc-img-background-selected]="selected">
<img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected">
<div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [(ngModel)]="selected">
<label class="custom-control-label" for="smallCardCheck{{document.id}}">L</label>
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
</div>
</div>