Page resizing for tab and sidebar is handled by flexbox

Changes not staged for commit:
Rayquaza01 · Jun 28, 2018 · 7b637c3 · 7b637c3
1 parent 5eb48a8
commit 7b637c3
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 44 deletions.
diff --git a/extension/notes.css b/extension/notes.css
@@ -1,13 +1,14 @@
 html, body {
     margin: 0;
-    min-width: 100vw;
+    height: 100%;
 }
 
 textarea {
     background-color: inherit;
     border: none;
     color: inherit;
     resize: none;
+    height: 100%;
 }
 
 table {
@@ -171,5 +172,24 @@ table {
 
 select {
     border: none;
-    background-color: #EEEEEE;
+    /* background-color: #EEEEEE; */
+}
+
+/* https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space */
+.box {
+    display: flex;
+    flex-flow: column;
+    height: 100vh;
+}
+
+.box .row.header {
+    flex: 0 1 auto;
+}
+
+.box .row.content {
+    flex: 1 1 auto;
+}
+
+.box .row.footer {
+    flex: 0 1 20px;
 }
diff --git a/extension/notes.html b/extension/notes.html
@@ -8,31 +8,34 @@
         <title>Note Taker</title>
     </head>
     <body>
-        <div id="overlay">
-            <div id="note-list">
-                <input type="text" id="search" autocomplete="off" placeholder="Search">
-                <span class="container">
-                    <span class="name">General Notes</span>
-                </span>
+        <div class="box">
+            <div id="overlay" class="row content">
+                <div id="note-list">
+                    <input type="text" id="search" autocomplete="off" placeholder="Search">
+                    <span class="container">
+                        <span class="name">General Notes</span>
+                    </span>
+                </div>
             </div>
-        </div>
-        <div id="confirmDelete">
-            <div>
-                <span>
-                    Are you sure you want to delete the note:<br>
-                    <span id="siteName"></span>
-                </span>
-                <div id="ynbox">
-                    <div id="yes">Yes</div>
-                    <div id="no">No</div>
+            <div id="confirmDelete" class="row content">
+                <div>
+                    <span>
+                        Are you sure you want to delete the note:<br>
+                        <span id="siteName"></span>
+                    </span>
+                    <div id="ynbox">
+                        <div id="yes">Yes</div>
+                        <div id="no">No</div>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div id="tabstrip" data-active-tab="0">
-            <span class="tab active" data-tab="0">Tab 1</span>
-        </div>
-        <textarea autofocus tabindex="1"></textarea>
-        <div id="buttons">
+            <div id="tabstrip" class="row header" data-active-tab="0">
+                <span class="tab active" data-tab="0">Tab 1</span>
+            </div>
+            <div class="row content">
+                <textarea autofocus tabindex="1"></textarea>
+            </div>
+            <div id="buttons" class="row footer">
                 <span class="mdi mdi-keyboard-backspace" id="back"></span>
                 <span class="mdi mdi-close" id="close">Close</span>
                 <select id="toggle">
@@ -44,6 +47,7 @@
                 <span class="mdi mdi-open-in-new" title="Open in New Tab"></span>
                 <span class="mdi mdi-theme-light-dark" id="theme"></span>
                 <span class="mdi mdi-settings" title="Settings"></span>
+            </div>
         </div>
         <script src="third-party/psl.min.js"></script>
         <script src="site-parser.js"></script>

diff --git a/extension/notes.js b/extension/notes.js
@@ -13,6 +13,7 @@ const siteName = document.getElementById("siteName");
 const openInTab = document.getElementsByClassName("mdi-open-in-new")[0];
 const search = document.getElementById("search");
 const tabstrip = document.getElementById("tabstrip");
+const buttons = document.getElementById("buttons");
 
 function getContext() {
     return browser.extension.getViews({type: "popup"}).indexOf(window) > -1 ? "popup" :
@@ -31,13 +32,15 @@ function openList() {
     search.focus();
     overlay.style.width = "100%";
     back.style.display = "none";
+    buttons.style.zIndex = "1";
     overlayClose.style.display = "block";
 }
 
 function closeList() {
     overlay.style.width = "0";
     back.style.display = "block";
     overlayClose.style.display = "none";
+    buttons.style.zIndex = "0";
     textarea.focus();
 }
 
@@ -177,10 +180,15 @@ async function setTheme(mode) {
         var theme = "_dark";
         break;
     }
-    document.body.style.backgroundColor = "#" + res.options["background_color" + theme];
-    document.body.style.color = "#" + res.options["font_color" + theme];
-    search.style.color = "#" + res.options["font_color" + theme];
-    search.style.backgroundColor = "#" + res.options["background_color" + theme];
+    bg_color = "#" + res.options["background_color" + theme];
+    font_color = "#" + res.options["font_color" + theme];
+    toggle.style.backgroundColor = bg_color;
+    document.body.style.backgroundColor = bg_color;
+    search.style.backgroundColor = bg_color;
+    overlay.style.backgroundColor = bg_color;
+    confirmDelete.style.backgroundColor = bg_color;
+    document.body.style.color = font_color;
+    search.style.color = font_color;
 }
 
 async function changeTheme() {
@@ -224,17 +232,6 @@ async function loadNoteList() {
     }
 }
 
-async function resizePage() {
-    var res = await browser.storage.local.get("options");
-    if (res.options.tabnos > 1) {
-        textarea.style.height = window.innerHeight - 45 + "px";
-    } else {
-        textarea.style.height = window.innerHeight - 25 + "px";
-    }
-    textarea.style.width = window.innerWidth - 2 + "px";
-    overlay.style.height = window.innerHeight - 25 + "px";
-}
-
 async function pageSetup() {
     var res = await browser.storage.local.get("options");
     switch (res.options.theme) {
@@ -265,15 +262,12 @@ async function pageSetup() {
         break;
     case "popup":
         document.body.style.width = res.options.width + "px";
+        document.body.style.height = res.options.height + 40 + "px";
         textarea.style.width = res.options.width + "px";
         textarea.style.height = res.options.height + "px";
         overlay.style.height = res.options.height + "px";
         break;
     }
-    if (context !== "popup") {
-        window.addEventListener("resize", resizePage);
-        resizePage();
-    }
     if (res.options.default_display === "general_notes") {
         loadGeneralNotes();
     } else if (res.options.default_display === "url" || res.options.default_display === "domain") {
@@ -285,7 +279,6 @@ async function pageSetup() {
         for (var tab = 1; tab < res.options.tabnos; tab++) {
             var newTab = document.createElement("span");
             newTab.className = "tab";
-            newTab.dataset.tab = tab;
             newTab.innerText = "Tab " + parseInt(tab + 1);
             tabstrip.append(newTab);
         }