main
Satur@it-depot.ru 2025-03-06 13:04:00 +03:00
parent 83f6945d19
commit b3050ec4a7
1 changed files with 119 additions and 20 deletions

View File

@ -9,27 +9,91 @@
<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: 60%; padding: 10px; position: relative; } /* Увеличиваем до 60% */
#tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; }
#installs-container { width: 60%; padding: 10px; position: relative; }
.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%; }
.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;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.install-item .connection-id {
width: 30%;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.install-item .install-time {
width: 25%;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.install-item .actions {
width: 25%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.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; } /* Сдвигаем кнопки вправо и центрируем по вертикали */
.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; } /* Убираем верхний отступ, чтобы таблица начиналась сразу после заголовка */
#installs-list { margin-top: 0; }
.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 {
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; }
.protocol-icon {
margin-right: 5px;
height: 16px;
width: 16px;
vertical-align: middle;
}
.connection-link {
color: blue;
text-decoration: underline;
cursor: pointer;
margin-right: 3px; /* Отступ для баланса */
}
.edit-button {
background: #fff;
color: #007bff;
@ -37,7 +101,7 @@
padding: 2px 5px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
margin: 0 2px; /* Уменьшенный отступ для центрирования */
transition: background 0.2s ease;
}
.edit-button:hover {
@ -51,7 +115,7 @@
padding: 2px 5px;
border-radius: 3px;
cursor: pointer;
margin-left: 5px;
margin: 0 2px; /* Уменьшенный отступ для центрирования */
transition: background 0.2s ease;
}
.copy-button:hover {
@ -59,23 +123,58 @@
color: #218838;
}
.action-buttons { margin-left: 5px; }
.action-buttons button { margin-left: 5px; }
.action-buttons button { margin: 0 2px; } /* Уменьшенный отступ для центрирования */
#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 {
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: 25%; padding: 10px; border-left: 1px solid #ccc; background: #f9f9f9; min-height: 200px; margin-top: 240px; } /* Уменьшаем до 25% */
#notes-panel {
width: 25%;
padding: 10px;
border-left: 1px solid #ccc;
background: #f9f9f9;
min-height: 200px;
margin-top: 240px;
}
#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 {
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; }
#note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
#note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
#note-modal button { margin-right: 10px; }
#modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
#modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 50px; margin-right: 10px; } /* Логотип 50x50 пикселей */
.header-logo img { height: 50px; margin-right: 10px; }
</style>
</head>
<body>