Css fixes

JMcrafter26 · Nov 8, 2024 · b706f83 · b706f83
1 parent 6d8a905
commit b706f83
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 27 deletions.
diff --git a/builder/builder.html b/builder/builder.html
@@ -344,7 +344,7 @@ <h1>Oh no!</h1>
     <script>
         function init() {
             // set the first step to active
-            document.getElementById('step3').classList.add('active');
+            document.getElementById('step0').classList.add('active');
 
             // add event listeners to the buttons
             document.querySelectorAll('.next').forEach(button => {

diff --git a/builder/tinydocs-template.txt b/builder/tinydocs-template.txt
@@ -189,19 +189,26 @@
             z-index: 1000;
         }
 
+        .navPagesContainer {
+          position: relative;
+         min-height: 100%;
+        }
+
+        .navFooterContainer {
+          position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* height: 2.5rem; */
+        }
+
         .navFooter {
             text-align: center;
-            margin-top: 20px;
+            /* margin-top: 20px; */
             cursor: pointer;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
           padding: 10px;
           text-align: center;
           font-size: 12px;
           color: var(--text);
-
           /* no warp */
           white-space: nowrap;
 
@@ -997,14 +1004,20 @@ const openBtn = document.querySelector(".openBtn");
         });
       }
 
+
       function buildNav(currentPage) {
         const nav = document.querySelector("nav");
+        const innerNav = document.createElement("div");
+        const pagesContainer = document.createElement("div");
         const pages = document.querySelectorAll("page");
         const navTitle = document.createElement("a");
 
         // empty the nav
         nav.innerHTML = "";
 
+        innerNav.classList.add("innerNav");
+        pagesContainer.classList.add("navPagesContainer");
+
         navTitle.href = "?";
         // if document title is empty, use the first h1 element in the index page
         if (!document.title) {
@@ -1033,7 +1046,7 @@ const openBtn = document.querySelector(".openBtn");
           navTitle.textContent = document.title;
         }
         navTitle.id = "navTitle";
-        nav.insertBefore(navTitle, nav.firstChild);
+        pagesContainer.insertBefore(navTitle, innerNav.firstChild);
 
 
         pages.forEach((page) => {
@@ -1043,8 +1056,10 @@ const openBtn = document.querySelector(".openBtn");
           // if page div has data-title, use that as the title
           if (page.getAttribute("data-title")) {
             title = page.getAttribute("data-title");
+          } else if (page.querySelector("h1")) {
+            title = page.querySelector("h1").textContent;
           } else {
-            title = page.querySelector("h1")?.textContent;
+            title = pageId;
           }
 
         // page id is 404, do not add to the nav
@@ -1080,12 +1095,16 @@ const openBtn = document.querySelector(".openBtn");
 
           console.log(pageDiv);
 
-          nav.appendChild(pageDiv);
+          pagesContainer.appendChild(pageDiv);
         });
 
+
+
         const navFooter = document.createElement("div");
-        navFooter.classList.add("navFooter");
-        navFooter.innerHTML = `<hr><svg class="feather feather-zap" fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round
+        navFooter.classList.add("navFooterContainer");
+        navFooter.innerHTML = `
+    <div class="navFooter">
+        <hr><svg class="feather feather-zap" fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round
             stroke-width=2 viewBox="0 0 24 24" xmlns=http://www.w3.org/2000/svg>
             <defs>
                 <filter height=200% id=sharp-drop-shadow width=200% x=-50% y=-50%>
@@ -1101,12 +1120,17 @@ const openBtn = document.querySelector(".openBtn");
             </defs>
             <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
         </svg> Powered by <a alt="upLoadly" href=https://github.com/JMcrafter26/tiny-docs target=_blank>Tiny Docs</a>
-    </div>`;
-        nav.appendChild(navFooter);
+    </div></div>`;
+
+        innerNav.appendChild(pagesContainer);
+      innerNav.appendChild(navFooter);
+
+        nav.appendChild(innerNav);
 
 
       }
 
+
       function prepareCurrentPage(pageId) {
         console.log("Preparing " + pageId);
         let index = document.querySelector('page[data-pageId="' + pageId + '"]');

diff --git a/test/tinydocs-with-search.html b/test/tinydocs-with-search.html
@@ -189,19 +189,26 @@
             z-index: 1000;
         }
 
+        .navPagesContainer {
+          position: relative;
+         min-height: 100%;
+        }
+
+        .navFooterContainer {
+          position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* height: 2.5rem; */
+        }
+
         .navFooter {
             text-align: center;
-            margin-top: 20px;
+            /* margin-top: 20px; */
             cursor: pointer;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
           padding: 10px;
           text-align: center;
           font-size: 12px;
           color: var(--text);
-
           /* no warp */
           white-space: nowrap;
 
@@ -1124,12 +1131,17 @@ <h4 id="messageTitle"></h4>
 
       function buildNav(currentPage) {
         const nav = document.querySelector("nav");
+        const innerNav = document.createElement("div");
+        const pagesContainer = document.createElement("div");
         const pages = document.querySelectorAll("page");
         const navTitle = document.createElement("a");
 
         // empty the nav
         nav.innerHTML = "";
 
+        innerNav.classList.add("innerNav");
+        pagesContainer.classList.add("navPagesContainer");
+
         navTitle.href = "?";
         // if document title is empty, use the first h1 element in the index page
         if (!document.title) {
@@ -1158,7 +1170,7 @@ <h4 id="messageTitle"></h4>
           navTitle.textContent = document.title;
         }
         navTitle.id = "navTitle";
-        nav.insertBefore(navTitle, nav.firstChild);
+        pagesContainer.insertBefore(navTitle, innerNav.firstChild);
 
 
         pages.forEach((page) => {
@@ -1168,8 +1180,10 @@ <h4 id="messageTitle"></h4>
           // if page div has data-title, use that as the title
           if (page.getAttribute("data-title")) {
             title = page.getAttribute("data-title");
+          } else if (page.querySelector("h1")) {
+            title = page.querySelector("h1").textContent;
           } else {
-            title = page.querySelector("h1")?.textContent;
+            title = pageId;
           }
 
         // page id is 404, do not add to the nav
@@ -1205,12 +1219,16 @@ <h4 id="messageTitle"></h4>
 
           console.log(pageDiv);
 
-          nav.appendChild(pageDiv);
+          pagesContainer.appendChild(pageDiv);
         });
 
+
+
         const navFooter = document.createElement("div");
-        navFooter.classList.add("navFooter");
-        navFooter.innerHTML = `<hr><svg class="feather feather-zap" fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round
+        navFooter.classList.add("navFooterContainer");
+        navFooter.innerHTML = `
+    <div class="navFooter">
+        <hr><svg class="feather feather-zap" fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round
             stroke-width=2 viewBox="0 0 24 24" xmlns=http://www.w3.org/2000/svg>
             <defs>
                 <filter height=200% id=sharp-drop-shadow width=200% x=-50% y=-50%>
@@ -1226,8 +1244,12 @@ <h4 id="messageTitle"></h4>
             </defs>
             <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
         </svg> Powered by <a alt="upLoadly" href=https://github.com/JMcrafter26/tiny-docs target=_blank>Tiny Docs</a>
-    </div>`;
-        nav.appendChild(navFooter);
+    </div></div>`;
+
+        innerNav.appendChild(pagesContainer);
+      innerNav.appendChild(navFooter);
+
+        nav.appendChild(innerNav);
 
 
       }