Style Popup on Top of Page

Fix button to the left.
kiwix · Sep 9, 2024 · f7844f0 · f7844f0
1 parent 81cd156
commit f7844f0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/resources/js/toc.js b/resources/js/toc.js
@@ -91,8 +91,12 @@ function setupTOC()
     tocTitle.id = "kiwix-toc-title";
     tocTitle.textContent = "Contents";
     toc.prepend(tocTitle);
-    document.body.prepend(toc);
-    document.body.prepend(tocPopupButtonElem());
+
+    var tocDiv = document.createElement('div');
+    tocDiv.id = "kiwix-toc-div";
+    tocDiv.prepend(toc);
+    tocDiv.prepend(tocPopupButtonElem());
+    document.body.prepend(tocDiv);
 }
 
 setupTOC();
diff --git a/resources/js/tocStyle.js b/resources/js/tocStyle.js
@@ -28,9 +28,10 @@ style.innerHTML = `
     all: initial;
     display: block;
     visibility: hidden;
+    position: relative;
 
-    max-height: 50%;
-    max-width: 50%;
+    max-height: 50vh;
+    max-width: 50vh;
     width: max-content;
     overflow-y: auto;
 
@@ -54,5 +55,32 @@ style.innerHTML = `
     margin-left: auto;
     margin-right: auto;
 }
+
+#kiwix-toc-button {
+    all: initial;
+    position: relative;
+    display: block;
+    background: white;
+    margin: 0px;
+    padding 0px;
+    outline: none;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+#kiwix-toc-button:hover {
+    border: 1px solid #3366CC;
+    background-color: #D9E9FF;
+}
+
+#kiwix-toc-div {
+    all: initial;
+    display: block;
+    font-size: 0px;
+    margin: 8px;
+    position: fixed;
+    top: 0px;
+    z-index: 1000;
+}
 `
 document.head.appendChild(style);