style: compactacao de layout e espacos verticais no dashboard, conexoes e clinicas
continuous-integration/webhook Deploy concluido (rx.scoreodonto.com)

This commit is contained in:
VPS 4 Builder
2026-05-26 21:20:40 +02:00
parent a41fbb7e16
commit 327911c81b
5 changed files with 54 additions and 80 deletions
+3 -3
View File
@@ -177,7 +177,7 @@ body {
/* Main Content */
.main-content {
flex: 1;
padding: 32px 40px;
padding: 20px 24px;
overflow-y: auto;
}
@@ -185,7 +185,7 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
margin-bottom: 20px;
animation: fadeIn 0.5s ease-out;
}
@@ -335,7 +335,7 @@ body {
}
.modern-table td {
padding: 16px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.02);
}
+13 -34
View File
@@ -38,7 +38,7 @@
<div class="logo-icon">
<i class="fa-solid fa-tooth"></i>
</div>
<h2>RF Dental</h2>
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
</div>
<nav class="sidebar-nav">
@@ -83,7 +83,6 @@
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
</button>
<div class="system-version">v2.1.0</div>
</div>
</aside>
@@ -92,8 +91,18 @@
<header class="top-header">
<div class="header-title">
<h1>Dispositivos e Clínicas</h1>
<p>Gerencie o acesso do Aplicativo Desktop aos computadores das clínicas.</p>
<h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0;">
Dispositivos e Clínicas
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary); font-weight: 600;">
Total: <span id="totalDevices">0</span>
</span>
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
Ativos: <span id="activeDevices">0</span>
</span>
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(239, 68, 68, 0.15); color: var(--danger); font-weight: 600;">
Bloqueados: <span id="blockedDevices">0</span>
</span>
</h1>
</div>
<div class="header-actions">
<button id="addClinicBtn" class="primary-btn pulse-animation">
@@ -102,36 +111,6 @@
</div>
</header>
<div class="dashboard-stats">
<div class="stat-card glass-card">
<div class="stat-icon bg-blue">
<i class="fa-solid fa-desktop"></i>
</div>
<div class="stat-info">
<h3>Total de Dispositivos</h3>
<p id="totalDevices">0</p>
</div>
</div>
<div class="stat-card glass-card">
<div class="stat-icon bg-green">
<i class="fa-solid fa-check-circle"></i>
</div>
<div class="stat-info">
<h3>Ativos</h3>
<p id="activeDevices">0</p>
</div>
</div>
<div class="stat-card glass-card">
<div class="stat-icon bg-red">
<i class="fa-solid fa-ban"></i>
</div>
<div class="stat-info">
<h3>Bloqueados</h3>
<p id="blockedDevices">0</p>
</div>
</div>
</div>
<section class="data-section glass-card">
<div class="table-container">
<table class="modern-table">
+25 -24
View File
@@ -191,7 +191,6 @@
});
}
</script>
</head>
<body class="app-container">
<!-- Sidebar -->
<aside class="sidebar">
@@ -199,7 +198,7 @@
<div class="logo-icon">
<i class="fa-solid fa-tooth"></i>
</div>
<h2>RF Dental</h2>
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
</div>
<nav class="sidebar-nav">
@@ -244,7 +243,6 @@
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
</button>
<div class="system-version">v2.1.0</div>
</div>
</aside>
@@ -252,30 +250,33 @@
<div class="clients-container">
<div class="clients-header">
<div>
<h1>🖥️ Clientes Conectados</h1>
<p style="color: var(--text-secondary); margin-top: 5px; font-size: 1rem; font-weight: 500;">Monitoramento em tempo real dos clientes Socket.IO</p>
</div>
<div class="header-actions">
<a href="/" class="btn btn-secondary">← Voltar</a>
<button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
<button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
</div>
</div>
<div class="stats" id="stats">
<!-- Stats serão carregados aqui -->
</div>
<div class="clients-list-card">
<div id="clientsList">
<div class="empty-state">
<div class="spinner" style="margin: 0 auto 16px auto;"></div>
Carregando...
<h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
🖥️ Clientes Conectados
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary-color); font-weight: 600;">
Conexões: <span id="stat-total">0</span>
</span>
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success-color); font-weight: 600;">
Identificados: <span id="stat-identified">0</span>
</span>
</h1>
</div>
<div class="header-actions">
<a href="/" class="btn btn-secondary">← Voltar</a>
<button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
<button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
</div>
</div>
<div class="timestamp" id="timestamp"></div>
<div class="clients-list-card" style="margin-top: 24px;">
<div id="clientsList">
<div class="empty-state">
<div class="spinner" style="margin: 0 auto 16px auto;"></div>
Carregando...
</div>
</div>
<div class="timestamp" id="timestamp"></div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
+11 -17
View File
@@ -17,7 +17,7 @@
<div class="logo-icon">
<i class="fa-solid fa-tooth"></i>
</div>
<h2>RF Dental</h2>
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
</div>
<nav class="sidebar-nav">
@@ -62,7 +62,6 @@
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
</button>
<div class="system-version">v2.1.0</div>
</div>
</aside>
@@ -78,13 +77,22 @@
<h1 id="mainTitle">Galeria de Imagens</h1>
</div>
<div class="header-actions">
<!-- Filtro de Clientes -->
<select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 180px; cursor: pointer; height: 42px;">
<option value="">📋 Todos os Clientes</option>
</select>
<!-- Mostrar Ocultas -->
<button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); height: 42px;">
👁️ <span id="toggleText">Ocultas</span>
</button>
<input
type="search"
id="searchInput"
class="search-input"
placeholder="🔍 Pesquisar paciente..."
style="height: 42px; min-width: 200px;"
>
<button class="btn btn-secondary" onclick="loadClientsList()">
<button class="btn btn-secondary" onclick="loadClientsList()" style="height: 42px; display: flex; align-items: center; justify-content: center; padding: 10px 16px;">
<span class="icon">🔄</span>
</button>
</div>
@@ -101,20 +109,6 @@
<!-- Scrollable content area -->
<div class="content-scroll">
<!-- Toolbar de Filtros e Ações Rápidas -->
<div class="toolbar glass-card" style="margin-bottom: 24px; padding: 16px; display: flex; gap: 16px; align-items: center; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: var(--shadow-sm);">
<div class="toolbar-left" style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
<!-- Filtro de Clientes -->
<select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 200px; cursor: pointer;">
<option value="">📋 Todos os Clientes</option>
</select>
<!-- Mostrar Ocultas -->
<button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);">
👁️ <span id="toggleText">Ocultas</span>
</button>
</div>
</div>
<!-- Loading State -->
<div id="loadingState" class="loading">
+2 -2
View File
@@ -244,7 +244,7 @@ body {
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border);
padding: 16px 32px;
padding: 10px 24px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -297,7 +297,7 @@ body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 32px;
padding: 20px;
}
/* ================================================================