ruicesar/rx.scoreodonto.com
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: header sizes, transform image crop, sidebar accordion dropdown

Browse Source
This commit is contained in:
VPS 4 Builder
2026-05-25 04:06:00 +02:00
parent fa351efae7
commit 6153ac0ed0
4 changed files with 136 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dental-server/public/app.js
+19 -6
View File
@@ -264,14 +264,14 @@ function updateClientsDropdown() {
// Adiciona o item "Todos os Clientes"
const allItem = document.createElement('div');
allItem.className = `submenu-item${selectedClient === '' ? ' active' : ''}`;
allItem.innerHTML = '📋 Todos os Clientes';
allItem.className = `nav-item${selectedClient === '' ? ' active' : ''}`;
allItem.innerHTML = `<span class="icon">📋</span> <span style="flex:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="Todos os Clientes">Todos os Clientes</span>`;
allItem.onclick = () => selectClientFilter('');
submenu.appendChild(allItem);
sorted.forEach(c => {
const item = document.createElement('div');
item.className = `submenu-item${selectedClient === c.name ? ' active' : ''}`;
item.className = `nav-item${selectedClient === c.name ? ' active' : ''}`;
let lbl = c.name;
if (c.name === 'Upload Web') {
lbl = 'Upload Web 💻';
@@ -279,12 +279,25 @@ function updateClientsDropdown() {
if (c.status === 'identified') lbl += ' ✅';
else if (c.status === 'historic') lbl += ' 📚';
}
item.textContent = lbl;
item.innerHTML = `<span class="icon">🔹</span> <span style="flex:1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${escapeHtml(lbl)}">${escapeHtml(lbl)}</span>`;
item.onclick = () => selectClientFilter(c.name);
submenu.appendChild(item);
});
}
window.toggleClientsSubmenu = function() {
const submenu = document.getElementById('clientsSubmenu');
const chevron = document.getElementById('clientsChevron');
if (!submenu) return;
if (submenu.style.display === 'none') {
submenu.style.display = 'flex';
if (chevron) chevron.style.transform = 'rotate(180deg)';
} else {
submenu.style.display = 'none';
if (chevron) chevron.style.transform = 'rotate(0deg)';
}
}
function selectClientFilter(clientName) {
selectedClient = clientName;
if (view === 'patients') {
@@ -627,8 +640,8 @@ async function showTransformModal(imageId) {
{ name: 'Original', rotation: 0, flipH: false, flipV: false, css: 'transform: none;' },
{ name: 'Flip Horizontal', rotation: 0, flipH: true, flipV: false, css: 'transform: scaleX(-1);' },
{ name: 'Flip Vertical', rotation: 0, flipH: false, flipV: true, css: 'transform: scaleY(-1);' },
{ name: 'Rotação +90°', rotation: 90, flipH: false, flipV: false, css: 'transform: rotate(90deg);' },
{ name: 'Rotação -90°', rotation: -90, flipH: false, flipV: false, css: 'transform: rotate(-90deg);' }
{ name: 'Rotação +90°', rotation: 90, flipH: false, flipV: false, css: 'transform: rotate(90deg) scale(0.65);' },
{ name: 'Rotação -90°', rotation: -90, flipH: false, flipV: false, css: 'transform: rotate(-90deg) scale(0.65);' }
];
currentTransformations = transformations;
dental-server/public/index.html
+15 -4
View File
@@ -6,7 +6,7 @@
<title>Gerenciador de Imagens Dentais</title>
<meta name="description" content="Sistema de gerenciamento de imagens de raio-X dental">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/style.css?v=2.9">
<link rel="stylesheet" href="/style.css?v=2.7">
</head>
<body>
<div class="app-container">
@@ -19,12 +19,23 @@
<a href="/" class="nav-item active">
<span class="icon">🖼️</span> Pacientes
</a>
<div id="clientsSubmenu" class="sidebar-submenu"></div>
<!-- Menu Accordion para Sistemas Clientes -->
<div class="nav-item" id="clientsAccordionToggle" onclick="toggleClientsSubmenu()" style="cursor:pointer; display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 10px; overflow: hidden;">
<span class="icon">🏢</span> <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Todos os Clientes</span>
</div>
<span id="clientsChevron" style="font-size: 0.8rem; transition: transform 0.3s;">▼</span>
</div>
<!-- Submenu dos Clientes -->
<div id="clientsSubmenu" class="sidebar-submenu" style="display: none; padding-left: 10px; background: rgba(0,0,0,0.02);"></div>
<a href="#" class="nav-item" onclick="openCreatePatientModal(); return false;">
<span class="icon">➕</span> Novo Paciente
</a>
<a href="/clients" class="nav-item">
<span class="icon">🖥️</span> Dispositivos
<span class="icon">🖥️</span> Dados do Cliente
</a>
<a href="#" class="nav-item" onclick="openSettingsModal(); return false;">
<span class="icon">⚙️</span> Configurações
@@ -455,6 +466,6 @@
<!-- Application Script -->
<script src="/socket.io/socket.io.js"></script>
<script src="/app.js?v=2.9"></script>
<script src="/app.js?v=2.7"></script>
</body>
</html>
dental-server/public/style.css
+21 -4
View File
@@ -828,9 +828,10 @@ body {
/* Evita cortes nas rotações de 90° e -90° causados pelo comportamento de rotação 2D do CSS */
.transform-option:nth-child(4) .transform-image-wrapper img,
.transform-option:nth-child(5) .transform-image-wrapper img {
width: auto !important;
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: contain !important;
}
@@ -1056,7 +1057,11 @@ body {
}
.sidebar-header {
padding: 20px;
height: 70px !important;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.15);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
@@ -1124,6 +1129,11 @@ body {
}
.main-content .header {
height: 70px !important;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 20px !important;
border-radius: 0;
margin: 0;
border-bottom: 1px solid rgba(255,255,255,0.2);
@@ -1143,7 +1153,14 @@ body {
.app-container .container { display: none; }
/* Header padding */
.header-content { padding: 14px 20px; }
.main-content .header .header-content {
padding: 0 !important;
width: 100%;
margin: 0;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
/* ---------------------------------------------------------------
IMAGES GRID — grid puro sem flex tricks