${data.error ? `
${escapeHtml(data.error)}
` : ''}
@@ -342,6 +344,7 @@ function renderExplorer(body, win) {
body.querySelector('[data-action="upload-folder"]').addEventListener('click', () => body.querySelector('[data-upload="folder"]').click());
body.querySelector('[data-action="delete-selected"]').addEventListener('click', () => deleteEntries(win));
bindFolderTree(body, win);
+ body.querySelector('[data-action="resize-tree"]')?.addEventListener('pointerdown', (event) => startTreeResize(event, win, body));
for (const inputEl of body.querySelectorAll('.upload-input')) {
inputEl.addEventListener('change', async () => {
try {
@@ -491,6 +494,39 @@ function bindFolderTree(body, win) {
}
}
+function startTreeResize(event, win, body) {
+ if (event.button !== 0) return;
+ event.preventDefault();
+ event.stopPropagation();
+ const handle = event.currentTarget;
+ const layout = body.querySelector('.explorer-layout');
+ const startX = event.clientX;
+ const startWidth = Number(win.data.treeWidth) || body.querySelector('.folder-tree')?.getBoundingClientRect().width || 220;
+ const pointerId = event.pointerId;
+ handle.classList.add('active');
+ try {
+ handle.setPointerCapture(pointerId);
+ } catch {}
+
+ const move = (moveEvent) => {
+ const maxWidth = Math.max(180, Math.min(480, body.clientWidth - 240));
+ win.data.treeWidth = Math.round(clamp(startWidth + moveEvent.clientX - startX, 150, maxWidth));
+ layout?.style.setProperty('--tree-width', `${win.data.treeWidth}px`);
+ };
+ const up = () => {
+ handle.classList.remove('active');
+ handle.removeEventListener('pointermove', move);
+ handle.removeEventListener('pointerup', up);
+ handle.removeEventListener('pointercancel', up);
+ try {
+ handle.releasePointerCapture(pointerId);
+ } catch {}
+ };
+ handle.addEventListener('pointermove', move);
+ handle.addEventListener('pointerup', up);
+ handle.addEventListener('pointercancel', up);
+}
+
function renderFileEntries(entries, view, selectedPaths = new Set()) {
if (!entries.length) {
return '
Dieser Ordner ist leer. Dateien können hier abgelegt werden.
';
diff --git a/server/public/styles.css b/server/public/styles.css
index 7e72627..1d67a41 100644
--- a/server/public/styles.css
+++ b/server/public/styles.css
@@ -313,7 +313,7 @@
}
.u-nav .explorer-layout.with-tree {
- grid-template-columns: clamp(180px, 25%, 250px) minmax(0, 1fr);
+ grid-template-columns: clamp(150px, var(--tree-width, 220px), 55%) 6px minmax(0, 1fr);
}
.u-nav .explorer-content {
@@ -331,6 +331,32 @@
min-width: 0;
}
+.u-nav .tree-resizer {
+ background: var(--surface);
+ border-left: 1px solid transparent;
+ border-right: 1px solid var(--line);
+ cursor: ew-resize;
+ min-height: 0;
+ position: relative;
+ touch-action: none;
+ width: 6px;
+ z-index: 3;
+}
+
+.u-nav .tree-resizer::after {
+ background: transparent;
+ border-radius: 999px;
+ content: "";
+ inset: 8px 1px;
+ position: absolute;
+ transition: background-color 140ms ease;
+}
+
+.u-nav .tree-resizer:hover::after,
+.u-nav .tree-resizer.active::after {
+ background: var(--accent);
+}
+
.u-nav .tree-heading {
align-items: center;
border-bottom: 1px solid var(--line);
@@ -398,12 +424,17 @@
color: inherit;
display: flex;
flex: 1;
- gap: 7px;
- justify-content: flex-start;
+ gap: 5px !important;
+ justify-content: flex-start !important;
min-width: 0;
overflow: hidden;
padding: 0 5px 0 2px;
- text-align: left;
+ text-align: left !important;
+}
+
+.u-nav .tree-label > * {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
.u-nav .tree-label:hover,
diff --git a/u-navigator.plg b/u-navigator.plg
index 6feaf57..1862a86 100644
--- a/u-navigator.plg
+++ b/u-navigator.plg
@@ -1,7 +1,7 @@
-
+
@@ -24,7 +24,7 @@
https://git.casaderoll.de/michael/Unraid-Navigator/raw/branch/main/packages/&package;
-eb8a765a5e07ff3a65b04b40b6f76fb5
+b4fd1637ca533afc55dbff96903fc53a