From 83f6945d191bf1406ca1388f32dbee38560a0084 Mon Sep 17 00:00:00 2001
From: "Satur@it-depot.ru" <Saturn@it-depot.ru>
Date: Thu, 6 Mar 2025 12:58:46 +0300
Subject: [PATCH] fix2

---
 templates/index.html | 81 ++++++++++++++++----------------------------
 1 file changed, 30 insertions(+), 51 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index aace232..7b0f049 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,69 +9,64 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
     <style>
         body { display: flex; font-family: Arial, sans-serif; margin: 0; }
-        #tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; } /* Уменьшаем ширину до 15% */
-        #installs-container { width: 55%; padding: 10px; position: relative; } /* Увеличиваем ширину до 55% */
-        .install-item { padding: 5px; margin: 2px; border: 1px solid #ddd; cursor: move; position: relative; }
+        #tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; } /* Уменьшаем до 15% */
+        #installs-container { width: 60%; padding: 10px; position: relative; } /* Увеличиваем до 60% */
+        .install-item { display: table; width: 100%; border-collapse: collapse; margin: 2px 0; background: #fff; cursor: move; }
         .install-item.selected { background-color: #e6f7ff; } /* Подсветка выбранного пункта */
+        .install-item > div { display: table-cell; vertical-align: middle; padding: 5px; text-align: center; position: relative; }
+        .install-item .computer-name { width: 20%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .install-item .connection-id { width: 30%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .install-item .install-time { width: 25%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        .install-item .actions { width: 25%; }
         .form-container { margin-bottom: 20px; }
         .jstree-node { position: relative; }
         .folder-actions { display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); margin-left: 0; } /* Сдвигаем кнопки вправо и центрируем по вертикали */
         #search-container { position: absolute; top: 10px; right: 10px; text-align: right; }
         #search-input { width: 200px; margin-bottom: 5px; }
         #installs-list { margin-top: 0; } /* Убираем верхний отступ, чтобы таблица начиналась сразу после заголовка */
-        .header { display: flex; justify-content: space-between; font-weight: bold; padding: 5px; background: #f0f0f0; cursor: pointer; }
-        .header div { flex: 1; text-align: center; }
-        .header div:hover { background: #e0e0e0; }
+        .header { display: table; width: 100%; border-collapse: collapse; background: #f0f0f0; cursor: pointer; }
+        .header > div { display: table-cell; padding: 5px; text-align: center; font-weight: bold; }
+        .header > div:hover { background: #e0e0e0; }
         .sort-arrow { font-size: 12px; margin-left: 5px; }
         .protocol-icon { margin-right: 5px; height: 16px; width: 16px; vertical-align: middle; }
         .connection-link { color: blue; text-decoration: underline; cursor: pointer; }
         .edit-button {
-            display: none;
-            position: absolute;
-            right: 45px; /* Увеличиваем отступ для раздвижения */
-            top: 50%;
-            transform: translateY(-50%);
-            background: #fff; /* Белый фон */
+            background: #fff;
             color: #007bff;
             border: 1px solid #007bff;
             padding: 2px 5px;
             border-radius: 3px;
             cursor: pointer;
-            transition: background 0.2s ease; /* Плавный переход только фона */
+            margin-left: 5px;
+            transition: background 0.2s ease;
         }
         .edit-button:hover {
-            background: #e0e0e0; /* Легкий серый при наведении */
+            background: #e0e0e0;
             color: #0056b3;
         }
         .copy-button {
-            display: none;
-            position: absolute;
-            right: 5px; /* Устанавливаем ближе к правому краю */
-            top: 50%;
-            transform: translateY(-50%);
-            background: #fff; /* Белый фон */
+            background: #fff;
             color: #28a745;
             border: 1px solid #28a745;
             padding: 2px 5px;
             border-radius: 3px;
             cursor: pointer;
-            transition: background 0.2s ease; /* Плавный переход только фона */
+            margin-left: 5px;
+            transition: background 0.2s ease;
         }
         .copy-button:hover {
-            background: #e0e0e0; /* Легкий серый при наведении */
+            background: #e0e0e0;
             color: #218838;
         }
-        .install-item:hover .edit-button { display: inline-block; }
-        .install-item:hover .copy-button { display: inline-block; }
-        .action-buttons { display: none; }
-        .install-item:hover .action-buttons { display: inline; }
+        .action-buttons { margin-left: 5px; }
+        .action-buttons button { margin-left: 5px; }
         #import-form { margin-top: 5px; }
         #import-file { display: none; }
         #import-label { cursor: pointer; background: #007bff; color: white; padding: 5px 10px; border-radius: 3px; margin-left: 5px; }
         #import-label:hover { background: #0056b3; }
         .folder-select { margin-bottom: 5px; width: 150px; }
         .time-hint { font-size: 12px; color: #666; margin-top: 5px; }
-        #notes-panel { width: 30%; padding: 10px; border-left: 1px solid #ccc; background: #f9f9f9; min-height: 200px; margin-top: 240px; } /* Смещаем ниже, чтобы начиналось на уровне заголовка таблицы */
+        #notes-panel { width: 25%; padding: 10px; border-left: 1px solid #ccc; background: #f9f9f9; min-height: 200px; margin-top: 240px; } /* Уменьшаем до 25% */
         #notes-content { margin-top: 10px; }
         #note-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1000; width: 500px; }
         #note-modal .markdown-buttons { margin-bottom: 10px; }
@@ -123,9 +118,9 @@
             <div class="time-hint">Пример: 2025-03-05 14:30:00</div>
         </div>
         <div class="header">
-            <div onclick="sortInstalls('computer_name')">Имя компьютера<span class="sort-arrow"></span></div>
-            <div onclick="sortInstalls('rust_id')">ID подключения<span class="sort-arrow"></span></div>
-            <div onclick="sortInstalls('install_time')">Время установки<span class="sort-arrow"></span></div>
+            <div>Имя компьютера<span class="sort-arrow"></span></div>
+            <div>ID подключения<span class="sort-arrow"></span></div>
+            <div>Время установки<span class="sort-arrow"></span></div>
             <div>Действия</div>
         </div>
         <div id="installs-list"></div>
@@ -298,27 +293,11 @@
                 $('#installs-list').html('<p>Нет результатов</p>');
             } else {
                 $('#installs-list').html(installs.map(item => `
-                    <div class="install-item" data-id="${item.id}" draggable="true" style="display: flex; justify-content: space-between; position: relative;">
-                        <div style="flex: 1; text-align: center; position: relative; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                            ${item.computer_name}
-                            <button class="edit-button" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button>
-                        </div>
-                        <div style="flex: 1; text-align: center; position: relative; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                            <span class="protocol-icon">${protocolIcons[item.protocol]}</span>
-                            <a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link" target="_blank">${item.rust_id}</a>
-                            <button class="copy-button" onclick="copyToClipboard('${item.rust_id}')">📋</button>
-                            <button class="edit-button" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button>
-                        </div>
-                        <div style="flex: 1; text-align: center; position: relative; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
-                            ${item.install_time}
-                            <button class="edit-button" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button>
-                        </div>
-                        <div style="flex: 1; text-align: center; position: relative;">
-                            <span class="action-buttons">
-                                <button onclick="deleteInstall(${item.id})">Удалить</button>
-                                <button onclick="openNoteModal(${item.id}, '${item.note}')">Заметка</button>
-                            </span>
-                        </div>
+                    <div class="install-item" data-id="${item.id}" draggable="true">
+                        <div class="computer-name">${item.computer_name}<button class="edit-button" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div>
+                        <div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link" target="_blank">${item.rust_id}</a><button class="copy-button" onclick="copyToClipboard('${item.rust_id}')">📋</button><button class="edit-button" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div>
+                        <div class="install-time">${item.install_time}<button class="edit-button" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div>
+                        <div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button><button onclick="openNoteModal(${item.id}, '${item.note}')">Заметка</button></span></div>
                     </div>
                 `).join(''));
             }