drag

templates/index.html

@@ -19,15 +19,34 @@
             color: #e0e0e0;
         }
         #tree-container { 
-            width: 15%; 
+            width: 15%; /* Начальная ширина */
             padding: 10px; 
-            border-right: 1px solid #ccc; 
+            border-right: none; /* Убираем стандартную границу */
+            min-width: 150px; /* Минимальная ширина */
+            max-width: 50%; /* Максимальная ширина */
+            overflow: auto; /* Для длинных списков папок */
         }
         #tree-container.dark-theme { border-right-color: #444; }
+        #splitter {
+            width: 5px;
+            background: #ccc;
+            cursor: col-resize;
+            user-select: none;
+        }
+        #splitter.dark-theme {
+            background: #444;
+        }
+        #splitter:hover {
+            background: #aaa;
+        }
+        #splitter.dark-theme:hover {
+            background: #666;
+        }
         #installs-container { 
-            width: 60%; 
+            flex: 1; /* Занимает оставшееся пространство */
             padding: 10px; 
             position: relative; 
+            min-width: 300px; /* Минимальная ширина для центральной части */
         }
         .install-item { 
             display: table; 
@@ -330,6 +349,7 @@
         <div id="folder-tree"></div>
         <button onclick="addFolder()">Добавить папку</button>
     </div>
+    <div id="splitter"></div>
     <div id="installs-container">
         <h1 class="header-logo">
             <img src="/icons/it-depo-logo.png" alt="АйТи-Депо логотип">
@@ -429,6 +449,7 @@
                 document.getElementById('note-modal').classList.add('dark-theme');
                 document.getElementById('search-container').classList.add('dark-theme');
                 document.getElementById('import-label').classList.add('dark-theme');
+                document.getElementById('splitter').classList.add('dark-theme');
                 document.querySelector('.theme-toggle').classList.add('dark-theme');
                 document.querySelector('.theme-toggle').textContent = 'Светлая тема';
                 document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
@@ -442,6 +463,36 @@
                 const install = allInstalls.find(i => i.id === installId);
                 openNoteModal(installId, install?.note || '');
             });
+
+            // Логика изменения размера панели
+            const splitter = document.getElementById('splitter');
+            const treeContainer = document.getElementById('tree-container');
+            let isResizing = false;
+
+            splitter.addEventListener('mousedown', (e) => {
+                isResizing = true;
+                document.body.style.cursor = 'col-resize';
+                e.preventDefault();
+            });
+
+            document.addEventListener('mousemove', (e) => {
+                if (!isResizing) return;
+
+                const containerRect = document.body.getBoundingClientRect();
+                let newWidth = e.clientX - containerRect.left;
+                const minWidth = parseInt(getComputedStyle(treeContainer).minWidth, 10);
+                const maxWidth = containerRect.width * 0.5; // Максимум 50% ширины окна
+
+                if (newWidth < minWidth) newWidth = minWidth;
+                if (newWidth > maxWidth) newWidth = maxWidth;
+
+                treeContainer.style.width = `${newWidth}px`;
+            });
+
+            document.addEventListener('mouseup', () => {
+                isResizing = false;
+                document.body.style.cursor = 'default';
+            });
         });
 
         function toggleTheme() {
@@ -452,6 +503,7 @@
             const noteModal = document.getElementById('note-modal');
             const searchContainer = document.getElementById('search-container');
             const importLabel = document.getElementById('import-label');
+            const splitter = document.getElementById('splitter');
             const themeToggle = document.querySelector('.theme-toggle');
             const header = document.querySelector('.header');
             const installItems = document.querySelectorAll('.install-item');
@@ -465,6 +517,7 @@
                 noteModal.classList.remove('dark-theme');
                 searchContainer.classList.remove('dark-theme');
                 importLabel.classList.remove('dark-theme');
+                splitter.classList.remove('dark-theme');
                 themeToggle.classList.remove('dark-theme');
                 header.classList.remove('dark-theme');
                 installItems.forEach(item => item.classList.remove('dark-theme'));
@@ -479,6 +532,7 @@
                 noteModal.classList.add('dark-theme');
                 searchContainer.classList.add('dark-theme');
                 importLabel.classList.add('dark-theme');
+                splitter.classList.add('dark-theme');
                 themeToggle.classList.add('dark-theme');
                 header.classList.add('dark-theme');
                 installItems.forEach(item => item.classList.add('dark-theme'));