diff options
| author | elioat <elioat@tilde.institute> | 2024-12-22 21:42:06 -0500 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2024-12-22 21:42:06 -0500 |
| commit | 9ff6a1e683a0876342ec21cc64443247b2789421 (patch) | |
| tree | 41d453dafa704aeda03d9ba3a00e06dd7c8f20b2 | |
| parent | 8846eb4d7a16bd905547fa7567f539aa901dd92a (diff) | |
| download | tour-9ff6a1e683a0876342ec21cc64443247b2789421.tar.gz | |
*
| -rw-r--r-- | html/file-system/index.html | 73 |
1 files changed, 49 insertions, 24 deletions
diff --git a/html/file-system/index.html b/html/file-system/index.html index 45bfaaf..03ee17b 100644 --- a/html/file-system/index.html +++ b/html/file-system/index.html @@ -448,10 +448,16 @@ } #breadcrumbs { - padding: 0.5em; - margin-bottom: 1em; + padding: 0.5em 1em; + margin: 0; border-bottom: 1px solid #e0e0e0; - display: none; /* Hidden in tree view */ + display: none; + text-align: left; + background-color: #f8f8f8; + border-radius: 4px 4px 0 0; + white-space: normal; + word-break: keep-all; + line-height: 1.8; } .breadcrumb-item { @@ -459,15 +465,20 @@ cursor: pointer; padding: 0.2em 0.5em; border-radius: 3px; + color: #666; + white-space: nowrap; } .breadcrumb-item:hover { background-color: rgba(0, 0, 0, 0.05); + color: #000; } .breadcrumb-separator { - margin: 0 0.5em; - color: #666; + margin: 0 0.2em; + color: #999; + user-select: none; + display: inline-block; } /* Grid view styles */ @@ -502,6 +513,16 @@ word-break: break-word; max-width: 100%; } + + /* Update container to accommodate breadcrumbs */ + #fileSystemContainer { + display: flex; + flex-direction: column; + } + + .grid-view { + padding-top: 0; /* Remove top padding since breadcrumbs provide spacing */ + } </style> </head> <body> @@ -516,6 +537,7 @@ </div> <div id="fileSystemContainer" oncontextmenu="showContextMenu(event, 'root')"> + <div id="breadcrumbs"></div> <div class="root-folder" onclick="selectFolder('root')">~</div> <ul id="fileSystemTree"></ul> <div class="grid-view"></div> @@ -554,8 +576,6 @@ </button> </div> -<div id="breadcrumbs"></div> - <script> const initialState = () => ({ root: { type: 'folder', children: {}, content: '' } @@ -836,9 +856,11 @@ const render = () => { return; } - // Show/hide breadcrumbs based on view mode + // Show/hide breadcrumbs and root folder based on view mode document.getElementById('breadcrumbs').style.display = state.viewMode === 'grid' ? 'block' : 'none'; + document.querySelector('.root-folder').style.display = + state.viewMode === 'grid' ? 'none' : 'block'; // Update current folder content based on view mode if (state.viewMode === 'tree') { @@ -1019,34 +1041,34 @@ const setEditorSize = (mode, editorElement = editor) => { editorElement.style.position = 'fixed'; editorElement.style.margin = '0'; editorElement.style.maxWidth = 'none'; - editorElement.style.bottom = padding; // Always set bottom padding + editorElement.style.bottom = padding; switch (mode) { case 'normal': editorElement.style.width = '37.5em'; editorElement.style.height = '300px'; - editorElement.style.right = '20px'; + editorElement.style.left = '20px'; editorElement.style.top = '20px'; - editorElement.style.left = 'auto'; - editorElement.style.bottom = 'auto'; // Override for normal mode + editorElement.style.right = 'auto'; + editorElement.style.bottom = 'auto'; break; case 'vertical': - // Take up the right half of the viewport + // Take up the left half of the viewport editorElement.style.width = `${(vw - paddingPx * 3) / 2}px`; editorElement.style.height = `${vh - paddingPx * 2}px`; - editorElement.style.right = padding; + editorElement.style.left = padding; editorElement.style.top = padding; - editorElement.style.left = 'auto'; + editorElement.style.right = 'auto'; break; case 'horizontal': // Take up the top half of the viewport editorElement.style.width = `${vw - paddingPx * 2}px`; editorElement.style.height = `${(vh - paddingPx * 3) / 2}px`; - editorElement.style.right = padding; - editorElement.style.top = padding; editorElement.style.left = padding; + editorElement.style.top = padding; + editorElement.style.right = padding; break; case 'full': @@ -1054,9 +1076,9 @@ const setEditorSize = (mode, editorElement = editor) => { editorElement.style.width = `${vw - fullModePaddingPx * 2}px`; editorElement.style.height = `${vh - fullModePaddingPx * 2}px`; editorElement.style.top = fullModePadding; + editorElement.style.left = fullModePadding; editorElement.style.right = fullModePadding; editorElement.style.bottom = fullModePadding; - editorElement.style.left = fullModePadding; break; } @@ -1144,16 +1166,19 @@ const navigateTo = (path, openDetails = false) => { }; const renderBreadcrumbs = () => { - const parts = state.currentFolderPath.split('/'); - const breadcrumbs = parts.map((part, index) => { - const path = parts.slice(0, index + 1).join('/'); - const isLastItem = index === parts.length - 1; + // Start with root, but ensure we don't duplicate it + const parts = state.currentFolderPath.split('/').filter(part => part !== 'root'); + const fullPath = ['root', ...parts]; + + // Generate breadcrumbs from the full path + const breadcrumbs = fullPath.map((part, index) => { + const path = fullPath.slice(0, index + 1).join('/'); + const isLastItem = index === fullPath.length - 1; - // Only pass openDetails=true for the last item in the breadcrumb return ` <span class="breadcrumb-item" onclick="navigateTo('${path}', ${isLastItem})">${part === 'root' ? '~' : part}</span> - ${index < parts.length - 1 ? '<span class="breadcrumb-separator">/</span>' : ''} + ${index < fullPath.length - 1 ? '<span class="breadcrumb-separator">/</span>' : ''} `; }).join(''); |