feat(file_tree): Display current vault name using vault-name element

khiemgluong · May 22, 2024 · e0d7251 · e0d7251
1 parent ecc03ee
commit e0d7251
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 20 deletions.
diff --git a/assets/includes/explorer.html b/assets/includes/explorer.html
diff --git a/assets/includes/file_read.html b/assets/includes/file_read.html
@@ -37,10 +37,19 @@
                 console.error('Error fetching file:', error);
             });
     });
+
+
 </script>
 
 <style>
-
+    #file-read {
+        flex: 1;
+        overflow-y: auto;
+        max-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
 
     #file-title {
         font-size: 1.5em;

diff --git a/assets/includes/file_tree.html b/assets/includes/file_tree.html
@@ -1,5 +1,8 @@
 <body>
-    <div id="file-tree"></div>
+    <div id="container">
+        <div id="vault-name">{{ site.obsidian_vault }}</div>
+        <div id="file-tree"></div>
+    </div>
 </body>
 
 <script lang="text/javascript">
@@ -17,8 +20,8 @@
 
             if (child.type === 'dir') {
                 li.classList.add('dir');
-                const svgCollapsed = '<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>';
-                const svgExpanded = '<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';
+                const svgCollapsed = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>';
+                const svgExpanded = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';
                 button.innerHTML = svgCollapsed + button.textContent;
 
                 var expanded = false;
@@ -81,9 +84,23 @@
 </script>
 
 <style>
+    #container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 20%;
+    }
+
+    #file-tree {
+        overflow-y: auto;
+        max-height: 100vh;
+        width: 100%;
+    }
+
     ul {
         list-style-type: none;
         padding-left: 5px;
+        margin-left: 5px;
     }
 
     ul ul {

diff --git a/assets/includes/sidebar.html b/assets/includes/sidebar.html
diff --git a/assets/layouts/obsidian.html b/assets/layouts/obsidian.html
@@ -27,7 +27,7 @@
         display: flex;
         height: 100%;
         padding: 15px 0;
-        max-height: 98vh;
+        max-height: 100vh;
     }
 
     #obsidian {
@@ -37,21 +37,6 @@
         max-height: 88vh;
     }
 
-    #file-tree {
-        width: 20%;
-        overflow-y: auto;
-        max-height: 100vh;
-    }
-
-    #file-read {
-        flex: 1;
-        overflow-y: auto;
-        max-height: 100vh;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
     #file-tree::-webkit-scrollbar,
     #file-read::-webkit-scrollbar {
         display: none;