bootstrapification

fergiemcdowall · Nov 9, 2023 · 8f0db37 · 8f0db37
1 parent 008b2c8
commit 8f0db37
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/demo2/index.html b/demo2/index.html
@@ -85,28 +85,42 @@
     </style>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
           rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 
     <script src="./src/app.js" type="module"></script>
     <title>Search-index demo</title>
   </head>
   <body>
-    <header>
-      <h1>Search index demo!</h1>
-    </header>
-    <div style="flex-direction: row;display: flex;">
-      <div style="flex-basis: 300px;">
-        <div id="year-refiner" class="refiner"></div>
-        <div id="month-refiner" class="refiner"></div>
+
+    <nav class="navbar navbar-light bg-light">
+      <div class="container">
+        <h1>Search index demo</h1>
+        <button class="navbar-toggler d-block d-sm-none"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target=".refiner">
+          <span class="navbar-toggler-icon"></span>
+        </button>
       </div>
-      <div style="flex-basis: 80%; flex-wrap:wrap;">
-        <div style="flex-direction: column;display: flex;">
-          <input id="searchbox" autofocus></input>
-          <div id="suggestions" />
+    </nav>
+
+
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-3">
+          <div id="year-refiner" class="refiner collapse d-sm-block"></div>
+          <div id="month-refiner" class="refiner collapse d-sm-block"></div>
+        </div>
+        <div class="col-sm-9">
+          <div>
+            <input id="searchbox" class="w-100" autofocus></input>
+            <div id="suggestions" />
+          </div>
+          <div id="count"></div>
+          <div id="hits"></div>
+          <div id="paging" class="d-flex justify-content-center">paging</div>
         </div>
-        <div id="count"></div>
-        <div id="hits"></div>
-        <div id="paging" style="display: flex; justify-content: center; margin-top:30px">paging</div>
       </div>
     </div>
   </body>

diff --git a/src/ui/UI.js b/src/ui/UI.js
@@ -5,7 +5,7 @@ import { Facet } from './Facet.js'
 import { SearchInput } from './SearchInput.js'
 
 export class UI {
-  constructor ({
+  constructor({
     index = null,
     count = {},
     hits = {},