Minor layout tweaks

OCNS · Oct 9, 2024 · ab8dace · ab8dace
1 parent 4b4d82d
commit ab8dace
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 48 deletions.
diff --git a/graph.js b/graph.js
@@ -84,6 +84,8 @@ function urlButton(type, url) {
         default:
             iconFile = "link.svg";
     }
+    button.type = "button"
+    button.classList.add('btn', 'btn-info', 'm-1');
     icon = `<img aria-hidden='true' focusable='false' class='icon' src='assets/${iconFile}'></img>`;
     button.innerHTML = icon + " " + type;
     button.onclick = function() {

diff --git a/index.html b/index.html
@@ -1,52 +1,59 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Simselect playground</title>
-        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
-        <link rel="stylesheet" type="text/css" href="assets/style.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
-        <script src="https://unpkg.com/[email protected]/WebCola/cola.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cola.min.js"></script>
-        <script src="graph.js"></script>
-        <script src="table.js"></script>
-        <script src="index.js"></script>
-    </head>
-    <body class="pt-5">
-        <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <div class="container">
-                <a class="navbar-brand" href="#">Simselect</a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
 
-                <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                    <ul class="navbar-nav mr-auto">
-                        <li class="nav-item">
-                            <a class="nav-link active" aria-current="page" href="https://incf.org">INCF</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link active" aria-current="page" href="https://www.cnsorg.org">OCNS</a>
-                        </li>
-                    </ul>
-                </div>
+<head>
+    <title>Simselect</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="assets/style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/WebCola/cola.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-cola.min.js"></script>
+    <script src="graph.js"></script>
+    <script src="table.js"></script>
+    <script src="index.js"></script>
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <a class="navbar-brand" href="#">Simselect</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav mr-auto">
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="https://incf.org">INCF</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" aria-current="page" href="https://www.cnsorg.org">OCNS</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <!-- main page content -->
+    <div class="container-fluid pt-3">
+        <div class="row">
+            <div class="col-4 align-items-left">
+                <div class="" id="simulators"></div>
             </div>
-        </nav>
-        <!-- main page content -->
-        <div class="container-fluid">
-            <div class="row">
-                <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 class="col-4 align-items-center">
+                <div class="h-100" id="cy"></div>
             </div>
-        </div>
+            <div class="col-4 align-items-center h-100" id="details">
 
-        <!-- footer -->
-        <div class="container">
-            <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-                <p class="col-md-4 mb-0 text-muted">&copy; 2024 Simselect contributors</p>
-                <p class="col-md-4 mb-0 text-muted">Built with <a href="https://js.cytoscape.org">cytoscape</a></p>
-                <p class="col-md-4 mb-0 text-muted"><a href="https://github.com/OCNS/Simselect">Sources</a></p>
-            </footer>
+            </div>
         </div>
-    </body>
+    </div>
+
+    <!-- footer -->
+    <div class="container-fluid">
+        <footer class="d-flex flex-wrap justify-content-evenly text-center py-3 my-4 border-top">
+            <p class="col-md-4 mb-0 text-muted">&copy; 2024 Simselect contributors</p>
+            <p class="col-md-4 mb-0 text-muted">Built with <a href="https://js.cytoscape.org">cytoscape</a></p>
+            <p class="col-md-4 mb-0 text-muted"><a href="https://github.com/OCNS/Simselect">Sources</a></p>
+        </footer>
+    </div>
+</body>
+
 </html>
diff --git a/index.js b/index.js
@@ -28,6 +28,9 @@ function showDetails(data, outgoers) {
         details.appendChild(list);
     }
     // URLs
+    link_heading = document.createElement("h3");
+    link_heading.innerHTML = "Links";
+    details.append(link_heading);
     if (data["urls"] !== undefined) {
         for (let [text, url] of Object.entries(data["urls"])) {
             details.appendChild(urlButton(text, url));

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" 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>`;
+        header += `<th scope="col"><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>`;
+    header += `<th scope="col"><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" 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 += `<th scope="col"><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 = [];
@@ -66,7 +66,7 @@ function update_table() {
             match_class = "bad_match"
         const is_checked = selected.includes(simulator) ? "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>";
+        const row = `<tr class="simulator_row ${match_class}"><td>${checkbox}</td><th scope="row" class='simulator_name text-start ps-2 pe-1'><a class="link-dark" onclick="showDetails(TOOL_DESCRIPTIONS['${simulator}'], []); return false;">${simulator}</a></td>` + cells.join(" ") + "</tr>";
         rows.push({row: row, matches: matches});
     }
     rows.sort((a, b) => b['matches']-a['matches'])