Minor style tweaks

OCNS · Jun 5, 2024 · 4b4d82d · 4b4d82d
1 parent ca95abf
commit 4b4d82d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -28,6 +28,7 @@ td.match:after {
 .header_space {
     height: 150px;
     position: relative;
+    padding-right: 2em ;
 }
 .header {
     bottom: 5px ;

diff --git a/index.html b/index.html
@@ -34,8 +34,8 @@
         <!-- main page content -->
         <div class="container-fluid">
             <div class="row">
-                <div class="col-2" id="simulators"></div>
-                <div class="col-6 align-items-center" id="cy"></div>
+                <div class="col-4" id="simulators"></div>
+                <div class="col-4 align-items-center" id="cy"></div>
                 <div class="col-4 align-items-center h-100" id="details"></div>
             </div>
         </div>

diff --git a/table.js b/table.js
@@ -27,15 +27,15 @@ function update_table() {
     let header = "<thead class='simulator_table'>\n<th></th><th></th>"
     bio_levels.forEach(bio_level => {
         const is_selected = criteria.indexOf(bio_level) >= 0 ? "checked" : "";
-        header += `<th><div class="header_space"><div class="header"><input type="checkbox" id="select_${bio_level}" name="select_${bio_level}" onclick="toggle('${bio_level}');"/ ${is_selected}><label for="select_${bio_level}">${bio_level}</label></div></div></th>`;
+        header += `<th><div class="header_space"><div class="header"><input type="checkbox" class="form-check-input" id="select_${bio_level}" name="select_${bio_level}" onclick="toggle('${bio_level}');"/ ${is_selected}><label class="form-check-label" for="select_${bio_level}">${bio_level}</label></div></div></th>`;
     });
 
     // Add a separator line
     header += `<th><div class="header_space"><div class="header"><div class="separator"></div></div></div></th>`;
 
     comp_levels.forEach(comp_level => {
         const is_selected = criteria.indexOf(comp_level) >= 0 ? "checked" : "";
-        header += `<th><div class="header_space"><div class="header"><input type="checkbox" id="select_${comp_level}" name="select_${comp_level}" onclick="toggle('${comp_level}');" ${is_selected}/><label for="select_${comp_level}">${comp_level}</label></div></div></th>`;;
+        header += `<th><div class="header_space"><div class="header"><input type="checkbox" class="form-check-input" id="select_${comp_level}" name="select_${comp_level}" onclick="toggle('${comp_level}');" ${is_selected}/><label class="form-check-label" for="select_${comp_level}">${comp_level}</label></div></div></th>`;;
     });
     header += "\n</thead>";
     let rows = [];
@@ -65,7 +65,7 @@ function update_table() {
         else
             match_class = "bad_match"
         const is_checked = selected.includes(simulator) ? "checked" : "";
-        const checkbox = `<input type="checkbox" id="select_${simulator}" name="select_${simulator}" onclick="toggle_selection('${simulator}');" ${is_checked}/>`;
+        const checkbox = `<input type="checkbox" class="form-check-input" id="select_${simulator}" name="select_${simulator}" onclick="toggle_selection('${simulator}');" ${is_checked}/>`;
         const row = `<tr class="simulator_row ${match_class}"><td>${checkbox}</td><th scope="row" class='simulator_name'><span onclick="showDetails(TOOL_DESCRIPTIONS['${simulator}'], []);">${simulator}</span></td>` + cells.join(" ") + "</tr>";
         rows.push({row: row, matches: matches});
     }