Update some display elements

- Give page title in navbar class "navbar-text" and add padding
- Change classes of columns for left and right boxes to ensure correct sizing on mobile (closes #18)
- Change active indicator from "True" / "False" to check mark / cross mark
- Add row and column to datasets table (note that this does not solve #1)

index.html

@@ -22,9 +22,11 @@
     <!-- header -->
     <header class="navbar navbar-light">
         <div class="container-fluid">
-            <a class="navbar-brand" href="#">
-                <img src="favicon.png" alt="" width="30" height="30" class="d-inline-block align-text-top">
-                Canadian COVID-19 Data Archive: Data Explorer
+            <a class="navbar-brand px-2" href="#">
+                <p class="navbar-text">
+                    <img src="favicon.png" alt="" width="30" height="30" class="d-inline-block align-text-top">
+                    Canadian COVID-19 Data Archive: Data Explorer
+                </p>
             </a>
         </div>
     </header>
@@ -40,15 +42,15 @@
             </div>
         </div>
         <div class="row">
-            <div class="col">
+            <div class="col-sm-6">
                 <div class="card text-dark bg-light mb-3">
                     <div class="card-body">
                         <div id="tree"></div>
                         <p><span id="update-time"></span></p>
                     </div>
                 </div>
             </div>
-            <div class="col">
+            <div class="col-sm-6">
                 <div id="table-container" class="card text-dark bg-light mb-3 hidden">
                     <div class="card-body">
                         <div id="files-error" class="hidden">
@@ -65,12 +67,16 @@
     </div>
     <!-- datasets table -->
     <div class="container-fluid">
-        <div class="card text-dark bg-light mb-3">
-            <div class="card-body">
-                <h4 id="title-datasets" >Search list of datasets</h4>
-                <p>Click the green button to see more details about each dataset.</p>
-                <div id="container-datasets">
-                    <table id="table-datasets" class="display"></table>
+        <div class="row">
+            <div class="col">
+                <div class="card text-dark bg-light mb-3">
+                    <div class="card-body">
+                        <h4 id="title-datasets" >Search list of datasets</h4>
+                        <p>Click the green button to see more details about each dataset.</p>
+                        <div id="container-datasets">
+                            <table id="table-datasets" class="display"></table>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

main.js

@@ -280,6 +280,11 @@ async function buildTableDatasets(json_datasets, uuid_selected) {
     // extract data from JSON
     const datasets = Object.keys(json_datasets).map(key => json_datasets[key]);
 
+    // convert active True / False to check mark / cross mark
+    datasets.forEach(function(d) {
+        d['active'] = d['active'] == 'True' ? '\u2705' : '\u274c'
+    });
+
     // create single group variable from meta_group_1 and meta_group_2
     datasets.forEach(function(d) {
         if (typeof(d['metadata']['meta_group_2']) == "undefined") {
@@ -355,7 +360,7 @@ async function buildTableDatasets(json_datasets, uuid_selected) {
                 targets: 3,
             },
             {
-                title: "Active?",
+                title: "Active",
                 width: "10%",
                 targets: 4,
                 className: "dt-center",