From d80459a02ce6718dd3badb66083112e51beb4645 Mon Sep 17 00:00:00 2001
From: akochari <arnold.kochari@scilifelab.uu.se>
Date: Wed, 15 Jun 2022 17:17:44 +0200
Subject: [PATCH 1/2] replace fa with bootstrap icons

---
 layouts/collections/list.html   |  4 ++--
 layouts/collections/single.html | 10 +++++-----
 layouts/index.html              | 15 ++++++++-------
 layouts/partials/footer.html    |  4 ++--
 layouts/partials/header.html    |  2 +-
 static/css/style.css            | 14 ++++++++++----
 6 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/layouts/collections/list.html b/layouts/collections/list.html
index c223388..240572f 100644
--- a/layouts/collections/list.html
+++ b/layouts/collections/list.html
@@ -98,11 +98,11 @@ <h5><a href="{{ .RelPermalink }}" class="">{{ .Params.name }}</a></h5>
                 <h5>Contact information</h5>
                 {{ if .Params.email }}
                 <div class="row">
-                  <div class="col"><span aria-hidden="true" class="fa fa-fw fa-envelope mr-1"></span>{{ .Params.email }}</div>
+                  <div class="col"><i class="bi bi-envelope-fill mr-1"></i>{{ .Params.email }}</div>
                 </div>{{ end }}
                 {{ if .Params.website_url }}
                 <div class="row">
-                  <div class="col"><span aria-hidden="true" class="fa fa-fw fa-globe mr-1"></span><a href="{{ .Params.website_url }}" target="_blank">Biobank homepage</a></div>
+                  <div class="col"><i class="bi bi-globe mr-1"></i><a href="{{ .Params.website_url }}" target="_blank">Biobank homepage</a></div>
                 </div>{{ end }}
                 {{ if .Params.biobank_sverige }}<div class="mt-2"><b>Part of:</b><br><a href="https://biobanksverige.se/"><img src="https://covid19dataportal.se/img/logos/biobanksverige_logo.jpg" rel="Part of Biobank Sverige" style="height: 60px;"></a></div>{{ end }}
               </div>
diff --git a/layouts/collections/single.html b/layouts/collections/single.html
index 56ec6ef..e7d41ca 100644
--- a/layouts/collections/single.html
+++ b/layouts/collections/single.html
@@ -190,15 +190,15 @@ <h4>Sample information</h4>
                 <h5>Collection contact information</h5>
                 {{ if .Params.head_firstname }}<div class="row"><div class="col">Collection head: {{ .Params.head_firstname }} {{ .Params.head_lastname }} {{ if .Params.head_role }}({{ .Params.head_role }}){{ end }}</div></div>{{ end }}
                 <div class="row"><div class="col">Contact person: {{ .Params.collection_contact.first_name }} {{ .Params.collection_contact.last_name }}</div></div>
-                <div class="row"><div class="col"><span aria-hidden="true" class="fa fa-fw fa-envelope mr-2"></span><span>{{ .Params.collection_contact.email }} </span></div></div>
-                {{ if .Params.website_url }}<div class="row"><div class="col"><span aria-hidden="true" class="fa fa-fw fa-globe mr-2"></span><a href="{{ .Params.website_url }}" target="_blank"><span>Collection homepage</span></a></div></div>{{ end }}
+                <div class="row"><div class="col"><i class="bi bi-envelope-fill mr-2"></i><span>{{ .Params.collection_contact.email }} </span></div></div>
+                {{ if .Params.website_url }}<div class="row"><div class="col"><i class="bi bi-globe mr-2"></i><a href="{{ .Params.website_url }}" target="_blank"><span>Collection homepage</span></a></div></div>{{ end }}
                 {{ end }}
                 <h5>Biobank contact information</h5>
                 <div class="row"><div class="col">{{ .Parent.Params.name }}</div></div>
                 {{ if .Parent.Params.ivo_regnum }}<div class="row"><div class="col">Registration number at IVO: {{ .Parent.Params.ivo_regnum }}</div></div>{{ end }}
-                {{ if .Parent.Params.email }}<div class="row"><div class="col"><span aria-hidden="true" class="fa fa-fw fa-envelope mr-2"></span><span>{{ .Parent.Params.email }}</span></div></div>{{ end }}
-                {{ if .Parent.Params.website_url }}<div class="row"><div class="col"><span aria-hidden="true" class="fa fa-fw fa-globe mr-2"></span><a href="{{ .Parent.Params.website_url }}" target="_blank"><span>Biobank homepage</span></a></div></div>{{ end }}
-                <div class="row mt-2"><div class="col"><a href="{{ .Parent.RelPermalink }}" class=""><span>All collections of {{ .Parent.Params.name }}</span> <span aria-hidden="true" class="fa fa-fw fa-arrow-circle-right"></span></a></div></div>
+                {{ if .Parent.Params.email }}<div class="row"><div class="col"><i class="bi bi-envelope-fill mr-2"></i>{{ .Parent.Params.email }}</div></div>{{ end }}
+                {{ if .Parent.Params.website_url }}<div class="row"><div class="col"><i class="bi bi-globe mr-2"></i><a href="{{ .Parent.Params.website_url }}" target="_blank"><span>Biobank homepage</span></a></div></div>{{ end }}
+                <div class="row mt-2"><div class="col"><a href="{{ .Parent.RelPermalink }}" class=""><span>All collections of {{ .Parent.Params.name }}</span> <i class="bi bi-arrow-right-circle-fill"></i></a></div></div>
                 </div>
               </div>
             </div>
diff --git a/layouts/index.html b/layouts/index.html
index 101cf84..d747e4e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,10 +3,11 @@
 <div class="row">
   <div class="col-md-3 form-check">
 
+    <div class="filters">
     <div><h6>Filtering tools</h6></div>
 
     <div class="card">
-        <div data-toggle="collapse" data-target="#collapseName" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseName" id="headingName"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> Name </div>
+        <div data-toggle="collapse" data-target="#collapseName" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseName" id="headingName"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2"></span> Name </div>
         <div id="collapseName" class="collapse" aria-labelledby="headingName">
         <div class="card-body">
           <fieldset><input type="text" class="form-control form-control-sm" placeholder="" aria-controls="" id="nameField"></fieldset>
@@ -16,7 +17,7 @@
     </div>
 
     <div class="card">
-        <div data-toggle="collapse" data-target="#collapseDiagnoses" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseDiagnoses" id="headingDiagnoses"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> Diagnoses </div>
+        <div data-toggle="collapse" data-target="#collapseDiagnoses" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseDiagnoses" id="headingDiagnoses"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2"></span> Diagnoses </div>
         <div id="collapseDiagnoses" class="collapse" aria-labelledby="headingDiagnoses">
         <div class="card-body">
             <div class="custom-control"><input type="checkbox" name="diagnoses" class="form-check-input" value="Laboratory-confirmed COVID-19 diagnosis; U07.1">Laboratory-confirmed COVID-19 diagnosis; U07.1</div>
@@ -26,7 +27,7 @@
     </div>
 
       <div class="card">
-          <div data-toggle="collapse" data-target="#collapseMaterials" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseMaterials" id="headingMaterials"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> Materials </div>
+          <div data-toggle="collapse" data-target="#collapseMaterials" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseMaterials" id="headingMaterials"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2"></span> Materials </div>
           <div id="collapseMaterials" class="collapse" aria-labelledby="headingMaterials">
           <div class="card-body">
               <div class="custom-control"><input type="checkbox" name="materials" class="form-check-input" value="Buffy Coat">Buffy Coat</div>
@@ -56,7 +57,7 @@
       </div>
 
       <div class="card">
-          <div data-toggle="collapse" data-target="#collapseCollectionTypes" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseCollectionTypes" id="headingCollectionTypes"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> Collection types </div>
+          <div data-toggle="collapse" data-target="#collapseCollectionTypes" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseCollectionTypes" id="headingCollectionTypes"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2"></span> Collection types </div>
           <div id="collapseCollectionTypes" class="collapse" aria-labelledby="headingCollectionTypes">
           <div class="card-body">
               <div class="custom-control"><input type="checkbox" name="collectiontypes" class="form-check-input" value="Healthcare sample collection">Healthcare sample collection</div>
@@ -66,7 +67,7 @@
       </div>
 
       <!-- <div class="card">
-          <div data-toggle="collapse" data-target="#collapseDataTypes" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseDataTypes" id="headingDataTypes"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> Data types </div>
+          <div data-toggle="collapse" data-target="#collapseDataTypes" class="card-header collapsed" role="button" tabindex="0" aria-expanded="false" aria-controls="collapseDataTypes" id="headingDataTypes"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2"></span> Data types </div>
           <div id="collapseDataTypes" class="collapse" aria-labelledby="headingDataTypes">
           <div class="card-body">
               <div class="custom-control"><input type="checkbox" name="datatypes" class="form-check-input" value="Biological samples">Biological samples</div>
@@ -85,7 +86,7 @@
         <div class="row"><div class="col">Biobanks: {{ $len_biobanks }}</div></div>
         <div class="row"><div class="col">Collections: {{ $len_collections }}</div></div>
         </div>
-
+        </div>
   </div>
 
   <div class="col-md-9 mt-4 mt-md-0">
@@ -197,7 +198,7 @@
 
               // Add category name to the <tr>. NOTE: Hardcoded colspan
               return $('<tr/>')
-                  .append('<td colspan="6"><span aria-hidden="true" class="fa fa-caret-right mr-2"></span><span aria-hidden="true" class="fa fa-caret-down mr-2"></span> ' + group + ' (' + rows.count() + '):</td>')
+                  .append('<td colspan="6"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2 bname"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2 bname"></span> ' + group + ' (' + rows.count() + '):</td>')
                   .attr('data-name', all)
                   .toggleClass('collapsed', collapsed);
           }
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 16c1e59..05d9ede 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -28,8 +28,8 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-<!-- FontAwesome -->
-<script src="https://kit.fontawesome.com/471b59d3f8.js" crossorigin="anonymous"></script>
+<!-- Bootstrap icons -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
 
 <!-- Analytics -->
 <script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 57de428..f27d92c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -12,7 +12,7 @@
           <a class="nav-link" href="/">Sample Collection Database</a>
         </div>
         <ul class="navbar-nav">
-          <li class="nav-item"><a class="nav-link" href="https://covid19dataportal.se/"><i class="fas fa-arrow-circle-left"></i> back to the COVID-19 Data Portal Sweden</a></li>
+          <li class="nav-item"><a class="nav-link" href="https://covid19dataportal.se/"><i class="bi bi-arrow-left-circle-fill"></i> back to the COVID-19 Data Portal Sweden</a></li>
         </ul>
       </div>
     </div>
diff --git a/static/css/style.css b/static/css/style.css
index d5b8955..e42251a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -15,8 +15,14 @@
   background-color: rgba(233, 235, 238, 0.6);
 }
 
-.group .fa-caret-right { display: none; }
-.group .fa-caret-down { display: inline; }
+.group .bi-caret-right-fill { display: none; }
+.group .bi-caret-down-fill { display: inline; }
 
-.group.collapsed .fa-caret-right { display: inline; }
-.group.collapsed .fa-caret-down { display: none; }
+.group.collapsed .bi-caret-right-fill { display: inline; }
+.group.collapsed .bi-caret-down-fill { display: none; }
+
+.filters .bi-caret-right-fill { display: none; }
+.filters .bi-caret-down-fill { display: inline; }
+
+.filters .collapsed .bi-caret-right-fill { display: inline; }
+.filters .collapsed .bi-caret-down-fill { display: none; }

From 02c00ce7bd607aa4f1b2f95dced3f55f5b0ef0d3 Mon Sep 17 00:00:00 2001
From: akochari <arnold.kochari@scilifelab.uu.se>
Date: Thu, 16 Jun 2022 10:47:03 +0200
Subject: [PATCH 2/2] remove count of collections because it is wrong

---
 layouts/index.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index d747e4e..58886e6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -158,7 +158,7 @@
 
     var table = $('#collections').DataTable({
       "sDom": '<"top row"<"col-md"i>>rt<"bottom row"<"col-md"l><"col-md"p>><"clear">',
-      "columnDefs": [{ "orderable": false, "targets": [2, 3] },
+      "columnDefs": [{ "orderable": false, "targets": [2, 3, 4] },
         {"targets": [0,5],  "visible": false}],
       "language": {
       "lengthMenu": "Show _MENU_ collections per page",
@@ -198,7 +198,8 @@
 
               // Add category name to the <tr>. NOTE: Hardcoded colspan
               return $('<tr/>')
-                  .append('<td colspan="6"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2 bname"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2 bname"></span> ' + group + ' (' + rows.count() + '):</td>')
+                  // .append('<td colspan="6"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2 bname"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2 bname"></span> ' + group + ' (' + rows.count() + '):</td>') // with the count but it's wrong because of pagination
+                  .append('<td colspan="6"><span aria-hidden="true" class="bi bi-caret-right-fill mr-2 bname"></span><span aria-hidden="true" class="bi bi-caret-down-fill mr-2 bname"></span> ' + group + ':</td>')
                   .attr('data-name', all)
                   .toggleClass('collapsed', collapsed);
           }