Merge pull request #15 from ScilifelabDataCentre/develop

bootstrap icons and bug removal
ScilifelabDataCentre · Jun 16, 2022 · f7bb86c · f7bb86c
2 parents 6fb8967 + 02c00ce
commit f7bb86c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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">
@@ -157,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",
@@ -197,7 +198,8 @@
 
               // 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>') // 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);
           }

diff --git 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/[email protected]/font/bootstrap-icons.css">
 
 <!-- Analytics -->
 <script>

diff --git 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
@@ -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; }