From 99409f258f1dfa7bdb285ce37b1d38db3c601c62 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 19 Feb 2022 22:57:04 -0800
Subject: [PATCH] bs5: fix card checkboxes no longer custom controls

---
 .../document-card-large.component.html        |  8 +++----
 .../document-card-large.component.scss        | 22 ++++++++++++++++++-
 .../document-card-small.component.html        |  6 ++---
 .../document-card-small.component.scss        | 13 +++++++++++
 4 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index ea84f8d40..668ad094d 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -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)">
       <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="custom-control custom-checkbox">
-          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
-          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
+      <div class="border-end border-bottom bg-light document-card-check">
+        <div class="form-check">
+          <input type="checkbox" class="form-check-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
+          <label class="form-check-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>
 
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index ef155632e..ef1109c6d 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -27,7 +27,23 @@
 }
 
 .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 {
@@ -36,6 +52,10 @@
 
 .card-selected {
   border-color: $primary;
+  
+  .document-card-check {
+    display: block;
+  }
 }
 
 .doc-img-background-selected {
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 7ffa1499d..850f7714d 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -4,9 +4,9 @@
       <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="custom-control custom-checkbox">
-          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
-          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
+        <div class="form-check">
+          <input type="checkbox" class="form-check-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
+          <label class="form-check-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>
 
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 21230c7e3..c4d54a807 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -16,6 +16,19 @@
   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 {