Fixed site adaptation

JeffersonLab · May 30, 2024 · 145e153 · 145e153
1 parent 65ba221
commit 145e153
Showing 1 changed file with 32 additions and 26 deletions.
diff --git a/python/ccdb/webgui/templates/dash_base.html b/python/ccdb/webgui/templates/dash_base.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="">
@@ -9,29 +9,40 @@
 
     <title>CCDB Dashboard</title>
 
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
-    <!-- Bootstrap core CSS -->
     <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-
-    <!-- Custom styles for this template -->
     <link href="{{ url_for('static', filename='css/dashboard.css') }}" rel="stylesheet">
-  </head>
+    <style>
+        .navbar {
+            z-index: 1060;
+            width: 100%;
+
+        }
+        .navbar-brand {
+            padding-left: 2rem;
+            width: 19rem;
+
+        }
+        .sidebar {
+            z-index: 1040;
+            width: 19rem;
+        }
 
-  <body class="d-flex flex-column min-vh-100">
-    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
-      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="{{ url_for('directory_tree') }}">CCDB v 2.0</a>
-      <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
-      <ul class="navbar-nav px-3">
-        <li class="nav-item text-nowrap">
-          <a class="nav-link" href="#">test_ccdb</a>
-        </li>
-      </ul>
+    </style>
+</head>
+<body class="d-flex flex-column min-vh-100">
+    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 align-items-center">
+        <a class="navbar-brand ms-0" href="{{ url_for('directory_tree') }}">CCDB v 2.0</a>
+        <button id="toggleSidebarButton" class="btn btn-primary d-md-none ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="position: relative;">
+            <i class="bi bi-list"></i>
+        </button>
     </nav>
 
+
     <div class="container-fluid flex-grow-1">
       <div class="row">
-        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+        <nav class="col-md-2 d-md-block bg-light sidebar collapse" id="sidebarMenu">
           <div class="sidebar-sticky">
             <ul class="nav flex-column">
               <li class="nav-item">
@@ -68,7 +79,7 @@
           </div>
         </nav>
 
-        <section class="container mt-4">
+        <section class="col-md-10 mt-4 content-section" style="margin-left:auto;">
             <header>
                 {% block header %}{% endblock %}
             </header>
@@ -81,21 +92,16 @@
       </div>
     </div>
 
-     <footer class="footer mt-auto py-3 bg-light">
+    <footer class="footer mt-auto py-3 bg-light">
         <div class="container">
             <span class="text-muted">CCDB Calibration and Conditions database. <a href="https://halldweb1.jlab.org/mantisbt/bug_report_page.php">Report a bug</a></span>
         </div>
     </footer>
 
-
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <!-- Icons -->
     <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-      feather.replace()
+      feather.replace();
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
-  </body>
+</body>
 </html>