ui: add a button for collapsing the header, to make more space on the…

… screen
jeffkaufman · Jan 12, 2021 · fe31acd · fe31acd
1 parent f8ec84d
commit fe31acd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/html/demo.js b/html/demo.js
@@ -1752,6 +1752,13 @@ window.noCamera.addEventListener("click", () => {
   selected_camera(false);
 });
 
+let headerCollapsed = false;
+window.headerExpandCollapse.addEventListener("click", () => {
+  headerCollapsed = !headerCollapsed;
+  window.topbar.style.display = headerCollapsed ? "none" : "block";
+  window.headerExpandCollapse.innerHTML = headerCollapsed ? "&darr;" : "&uarr;";
+});
+
 document.querySelectorAll("#tutorial_questions button").forEach(
   (button) => button.addEventListener("click", () => tutorial_answer(button)));
 

diff --git a/html/index.html b/html/index.html
@@ -299,9 +299,15 @@
   flex-grow: 1;
 }
 
-#tabbar {
+#tabrow {
   display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   background-color: rgb(186, 226, 227);
+}
+
+#tabbar {
+  display: flex;
   align-items: baseline;
 }
 
@@ -450,6 +456,7 @@ <h1>Bucket Brigade</h1>
   <div id=currentEvent>loading...</div>
 </div>
 
+<div id=tabrow>
 <div id=tabbar>
   <span class=activeTab id=mainViewTab>Home</span>
   <span id=debugInfoTab>Debug Info</span>
@@ -459,6 +466,9 @@ <h1>Bucket Brigade</h1>
   <span id=aboutTab>About</span>
 </div>
 
+<button id="headerExpandCollapse">&uarr;</button>
+</div>
+
 <div id=advancedSettings class=middlePane>
 <div>
 <h4>Best to leave these alone, since they do affect everyone</h4>