AyronSantos/chatc2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correções layout dispositivos moveis

Browse Source
This commit is contained in:
Ayron Salatiel Dos Santos
2026-06-25 12:50:33 +00:00
parent 1ddf9b7def
commit a2892cb241
10 changed files with 116 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/public/admin-conversations.html
+4 -1
View File
@@ -44,7 +44,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
</aside>
<main class="main" id="main-content">
<div class="topbar">
<span class="topbar-title">💬 Todas as Conversas</span>
<span class="topbar-title">💬 Todas as Conversas</span>
<span id="totalInfo" style="font-size:13px;color:#6b7280"></span>
</div>
<div class="container">
@@ -182,5 +182,8 @@ setInterval(carregar, 10000);
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
src/public/chat.html
+4
View File
@@ -899,6 +899,7 @@ body.dark-mode .msg.enviando { opacity: 0.4; }
<div class="chat-center">
<div class="chat-header" id="chatHeader" style="display:none">
<button class="mobile-only" onclick="voltarLista()" title="Voltar" style="background:none;border:none;font-size:20px;cursor:pointer;padding:4px 6px;color:#374151" aria-label="Voltar para lista de conversas">←</button>
<button class="menu-hamburger" onclick="toggleSidebar()" aria-label="Menu" style="display:none;margin-right:4px">☰</button>
<div class="info">
<h3 id="chatNome"></h3>
<span id="chatStatus"></span>
@@ -2310,5 +2311,8 @@ body.dark-mode #btnCancelarConversa {
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
src/public/client-detail.html
+4 -1
View File
@@ -119,7 +119,7 @@ table { font-size:13px; }
<main class="main" id="main-content">
<div class="topbar">
<a href="#" class="back-btn" id="backBtn">← Voltar</a>
<span class="topbar-title">Detalhes do Cliente</span>
<span class="topbar-title">Detalhes do Cliente</span>
<a href="#" class="btn-acao-topbar" id="btnIniciarConv" style="margin-left:auto">💬 Iniciar Conversa</a>
</div>
<div class="container" id="container">
@@ -883,5 +883,8 @@ table { font-size:13px; }
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
src/public/client-list.html
+3
View File
@@ -359,6 +359,9 @@ modalConvEl.addEventListener('click', function(e) { if (e.target === this) this.
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
</script>
src/public/css/dark-mode.css
+6
View File
@@ -1035,6 +1035,12 @@ body.dark-mode .tabs { background: #16213e; border-color: #0f3460; }
body.dark-mode .tabs button { background: #16213e; color: #9ca3af; }
body.dark-mode .tabs button:hover { background: #1a1a2e; color: #c0c0c0; }
body.dark-mode .tabs button.active { background: #1a2744; color: #818cf8; border-bottom-color: #818cf8; }
/* Bottom tab bar no dark mode */
body.dark-mode .tabbar {
background: #16213e;
border-color: #0f3460;
box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
}
/* Botoes do painel direito no dark mode */
body.dark-mode [style*="background:#eef2ff"] {
background: #1e1b4b !important;
src/public/css/main.css
+42
View File
@@ -741,3 +741,45 @@ tr:last-child td { border-bottom: none; }
.btn { padding: 9px 14px; font-size: 13px; }
.info-grid { grid-template-columns: 1fr; }
}
/* ===== BOTTOM TAB BAR (MOBILE ≤768px) ===== */
@media (max-width: 768px) {
.sidebar { display: none !important; }
.main { width: 100%; padding-bottom: 64px; }
/* Barra inferior fixa */
.tabbar {
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
height: 62px;
background: var(--surface);
border-top: 1px solid var(--border);
z-index: 1000;
box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: var(--text-faint);
font-size: 10px;
font-weight: 500;
transition: color .15s;
-webkit-tap-highlight-color: transparent;
}
.tabbar a .tab-icon { font-size: 22px; line-height: 1; }
.tabbar a.active { color: var(--primary); font-weight: 600; }
.topbar { padding: 10px 14px; }
.topbar-title { font-size: 15px; }
/* Chat: espaço para tabbar no mobile */
.chat-center { padding-bottom: 70px; }
.sidebar-left { padding-bottom: 70px; }
}
src/public/dashboard.html
+3
View File
@@ -268,5 +268,8 @@
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
src/public/js/tabbar.js
+42
View File
@@ -0,0 +1,42 @@
/**
* Bottom Tab Bar — Chatc2 (Mobile)
*
* Em dispositivos móveis (≤768px), renderiza uma barra de navegação
* inferior fixa com ícones. A sidebar desktop é ocultada.
*
* Incluir antes do </body>:
* <script src="/js/tabbar.js"></script>
*/
(function() {
var alias = (window.location.pathname.split('/')[2]) || localStorage.getItem('chatc2_alias') || 'novo_local';
var user = JSON.parse(localStorage.getItem('chatc2_user') || '{}');
var empresaId = user.empresas ? user.empresas[0] : 1;
var isGerente = (user.tipoChat || '') === 'G';
// Determina qual aba está ativa baseado na URL
var path = window.location.pathname;
var activeTab = 'chat';
if (path.includes('/dashboard')) activeTab = 'dash';
else if (path.includes('/clients')) activeTab = 'clients';
else if (path.includes('/settings')) activeTab = 'config';
else if (path.includes('/routes')) activeTab = 'config';
var tabs = [
{ id: 'dash', icon: '📊', label: 'Dash', href: '/app/' + alias + '/dashboard', admin: true },
{ id: 'clients', icon: '👥', label: 'Clientes', href: '/app/' + alias + '/clients', admin: false },
{ id: 'chat', icon: '💬', label: 'Chat', href: '/app/' + alias + '/company/' + empresaId + '/conversation/0', admin: false },
{ id: 'config', icon: '⚙️', label: 'Config', href: '/app/' + alias + '/settings', admin: true },
];
var html = '<nav class="tabbar" style="display:none">';
for (var i = 0; i < tabs.length; i++) {
var t = tabs[i];
if (t.admin && !isGerente) continue;
var cls = t.id === activeTab ? ' class="active"' : '';
html += '<a href="' + t.href + '"' + cls + '><span class="tab-icon">' + t.icon + '</span>' + t.label + '</a>';
}
html += '</nav>';
// Insere no body
document.body.insertAdjacentHTML('beforeend', html);
})();
src/public/routes.html
+4 -1
View File
@@ -107,7 +107,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
</aside>
<main class="main" id="main-content">
<div class="topbar">
<span class="topbar-title">📡 Rotas da API</span>
<span class="topbar-title">📡 Rotas da API</span>
<span id="totalRotas" style="font-size:13px;color:#6b7280"></span>
</div>
<div class="container">
@@ -333,5 +333,8 @@ carregarRotas();
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>
src/public/settings.html
+4 -1
View File
@@ -82,7 +82,7 @@ body { background:var(--surface-3); display:flex; min-height:100vh; }
<a onclick="logout()" aria-label="Sair do sistema"><span class="icon">🚪</span> Sair</a></div>
</aside>
<main class="main" id="main-content">
<div class="topbar"><span class="topbar-title">⚙️ Configurações</span></div>
<span class="topbar-title">⚙️ Configurações</span></div>
<div class="container">
<div class="tabs">
<button class="active" onclick="ativarAba('equipe',this)">👥 Equipe</button>
@@ -1078,5 +1078,8 @@ carregarResolucao();
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
<!-- Bottom Tab Bar (mobile) -->
<script src="/js/tabbar.js"></script>
</body>
</html>