Spaces:
Sleeping
Sleeping
Update static/index.html
Browse files- static/index.html +36 -0
static/index.html
CHANGED
|
@@ -100,6 +100,17 @@
|
|
| 100 |
.item .name{font-size:.9rem}
|
| 101 |
.item .tiny{font-size:.75rem; color:#9fb0cf}
|
| 102 |
.item .actions{display:flex; gap:6px}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
</style>
|
| 104 |
</head>
|
| 105 |
<body>
|
|
@@ -176,6 +187,7 @@
|
|
| 176 |
<div id="help" class="hint" style="margin-top:8px">
|
| 177 |
Minimize the panel with the chevron. Click a translucent dot to open its popup.
|
| 178 |
</div>
|
|
|
|
| 179 |
</aside>
|
| 180 |
|
| 181 |
<button id="toggle" title="Hide/Show panel">◀</button>
|
|
@@ -642,6 +654,30 @@
|
|
| 642 |
// intentionally no-op so outside clicks don't close anything
|
| 643 |
});
|
| 644 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 645 |
loadFromServer();
|
| 646 |
})();
|
| 647 |
</script>
|
|
|
|
| 100 |
.item .name{font-size:.9rem}
|
| 101 |
.item .tiny{font-size:.75rem; color:#9fb0cf}
|
| 102 |
.item .actions{display:flex; gap:6px}
|
| 103 |
+
|
| 104 |
+
#resizer {
|
| 105 |
+
position: absolute;
|
| 106 |
+
top: 0;
|
| 107 |
+
right: 0;
|
| 108 |
+
width: 6px; /* thickness of the draggable bar */
|
| 109 |
+
height: 100%;
|
| 110 |
+
cursor: ew-resize;
|
| 111 |
+
background: transparent; /* invisible but still clickable */
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
</style>
|
| 115 |
</head>
|
| 116 |
<body>
|
|
|
|
| 187 |
<div id="help" class="hint" style="margin-top:8px">
|
| 188 |
Minimize the panel with the chevron. Click a translucent dot to open its popup.
|
| 189 |
</div>
|
| 190 |
+
<div id="resizer"></div>
|
| 191 |
</aside>
|
| 192 |
|
| 193 |
<button id="toggle" title="Hide/Show panel">◀</button>
|
|
|
|
| 654 |
// intentionally no-op so outside clicks don't close anything
|
| 655 |
});
|
| 656 |
|
| 657 |
+
// --- Sidebar resizing ---
|
| 658 |
+
const resizer = document.getElementById('resizer');
|
| 659 |
+
let isResizing = false;
|
| 660 |
+
|
| 661 |
+
resizer.addEventListener('mousedown', (e) => {
|
| 662 |
+
isResizing = true;
|
| 663 |
+
document.body.style.cursor = 'ew-resize';
|
| 664 |
+
e.preventDefault();
|
| 665 |
+
});
|
| 666 |
+
|
| 667 |
+
document.addEventListener('mousemove', (e) => {
|
| 668 |
+
if (!isResizing) return;
|
| 669 |
+
const newWidth = Math.max(200, Math.min(e.clientX, 1000)); // min 200px, max 1000px
|
| 670 |
+
panel.style.width = newWidth + 'px';
|
| 671 |
+
document.documentElement.style.setProperty('--panelW', newWidth + 'px');
|
| 672 |
+
});
|
| 673 |
+
|
| 674 |
+
document.addEventListener('mouseup', () => {
|
| 675 |
+
if (isResizing) {
|
| 676 |
+
isResizing = false;
|
| 677 |
+
document.body.style.cursor = '';
|
| 678 |
+
}
|
| 679 |
+
});
|
| 680 |
+
|
| 681 |
loadFromServer();
|
| 682 |
})();
|
| 683 |
</script>
|