482 lines
15 KiB
PHP
482 lines
15 KiB
PHP
{{--
|
|
========================================
|
|
LAYOUT UNIVERSALE NETGESCON
|
|
========================================
|
|
Layout modulare e atomizzato /* Content area scrollabile */
|
|
.netgescon-content {
|
|
grid-area: content;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f8f9fa;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.content-wrapper {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* FIX ALLINEAMENTO BOOTSTRAP CONTAINER */
|
|
.netgescon-content .container-fluid {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
margin: 0 !important;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Fix Bootstrap rows per perfetto allineamento */
|
|
.netgescon-content .row {
|
|
margin-left: 0 !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
/* Fix Bootstrap columns */
|
|
.netgescon-content .col,
|
|
.netgescon-content [class*="col-"] {
|
|
padding-left: 0.75rem;
|
|
padding-right: 0.75rem;
|
|
}
|
|
|
|
/* Ensures perfect content alignment */
|
|
.netgescon-content h1,
|
|
.netgescon-content h2,
|
|
.netgescon-content h3 {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}ente.
|
|
Ogni componente è indipendente e configurabile.
|
|
|
|
Struttura:
|
|
- Header modulare (logo, user info, settings)
|
|
- Sidebar dinamica (basata su ruoli e permessi)
|
|
- Content area modulare
|
|
- Footer modulare
|
|
- Widget system
|
|
|
|
Autore: NetGesCon Development Team
|
|
Data: 2024
|
|
========================================
|
|
--}}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="it" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
|
|
<title>{{ $pageTitle ?? 'NetGesCon' }} - Sistema Gestione Condominiale</title>
|
|
|
|
{{-- Favicon e Icons --}}
|
|
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('icons/apple-touch-icon.png') }}">
|
|
|
|
{{-- CSS Framework --}}
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
{{-- Stili CSS per layout ottimizzato --}}
|
|
<style>
|
|
/* Reset e Base */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden; /* Evita qualsiasi scroll sul body */
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Sidebar scroll interno */
|
|
.netgescon-sidebar {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Stili per cards e contenuto */
|
|
.card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
margin-bottom: 1.5rem;
|
|
transition: box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Cards Stats colorate */
|
|
.card.bg-primary,
|
|
.card.bg-success,
|
|
.card.bg-warning,
|
|
.card.bg-info,
|
|
.card.bg-danger {
|
|
border: none;
|
|
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Perfect spacing for dashboard cards */
|
|
.netgescon-content .card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* Stats cards height uniformity */
|
|
.netgescon-content .row .col-md-3 .card {
|
|
height: 100%;
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.netgescon-breadcrumb {
|
|
padding: 0.5rem 1rem;
|
|
margin: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.netgescon-breadcrumb .breadcrumb {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Layout Base NetGesCon - Grid Layout Semplificato */
|
|
.netgescon-container {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: 70px 1fr 50px; /* Header fisso 70px, Content elastico, Footer fisso 50px */
|
|
grid-template-columns: 280px 1fr; /* Sidebar fissa 280px, Content elastico */
|
|
grid-template-areas:
|
|
"header header"
|
|
"sidebar content"
|
|
"footer footer";
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.netgescon-body {
|
|
display: contents; /* I figli si comportano come se fossero figli diretti del grid container */
|
|
}
|
|
|
|
/* Header fisso */
|
|
.netgescon-header {
|
|
grid-area: header;
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
z-index: 1050 !important;
|
|
height: 70px !important;
|
|
background-color: #ffffff !important;
|
|
border-bottom: 1px solid #e9ecef !important;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar fissa */
|
|
.sidebar-container {
|
|
grid-area: sidebar;
|
|
width: 280px;
|
|
min-width: 280px;
|
|
max-width: 280px;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: #f8f9fa;
|
|
border-right: 1px solid #dee2e6;
|
|
}
|
|
|
|
.netgescon-sidebar {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Nav area con scroll se necessario */
|
|
.sidebar-nav {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Content area */
|
|
.netgescon-content {
|
|
grid-area: content;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: #f8f9fa;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.content-wrapper {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Footer fisso */
|
|
.app-footer {
|
|
grid-area: footer;
|
|
background-color: #ffffff;
|
|
border-top: 1px solid #dee2e6;
|
|
height: 50px;
|
|
min-height: 50px;
|
|
max-height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 1rem;
|
|
z-index: 1040;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.netgescon-container {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 70px auto 1fr 50px;
|
|
grid-template-areas:
|
|
"header"
|
|
"sidebar"
|
|
"content"
|
|
"footer";
|
|
}
|
|
|
|
.sidebar-container {
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 200px;
|
|
border-right: none;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{{-- CSS Specifico per Pagina --}}
|
|
@stack('styles')
|
|
|
|
{{-- Variabili CSS Dinamiche --}}
|
|
<style>
|
|
:root {
|
|
--netgescon-primary: #007bff;
|
|
--netgescon-secondary: #6c757d;
|
|
--netgescon-sidebar-bg: #f8f9fa;
|
|
--netgescon-content-bg: #ffffff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="netgescon-app {{ $bodyClass ?? '' }}" data-user-role="{{ auth()->user()->role ?? 'guest' }}">
|
|
|
|
{{-- Loading Screen --}}
|
|
{{-- @include("components.layout.loading-screen") --}}
|
|
|
|
{{-- Container principale --}}
|
|
<div class="netgescon-container">
|
|
|
|
{{-- Header Modulare --}}
|
|
@include('components.layout.header.main', [
|
|
'showSearch' => $showSearch ?? true,
|
|
'showNotifications' => $showNotifications ?? true,
|
|
'showUserMenu' => $showUserMenu ?? true
|
|
])
|
|
|
|
{{-- Corpo principale con sidebar e content --}}
|
|
<div class="netgescon-body">
|
|
|
|
{{-- Sidebar Modulare (solo se necessaria) --}}
|
|
@if(($showSidebar ?? true) && auth()->check())
|
|
<div class="sidebar-container">
|
|
@include('components.menu.sidebar', [
|
|
'collapsible' => $sidebarCollapsible ?? true,
|
|
'autoHide' => $sidebarAutoHide ?? false
|
|
])
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Area Content Principale --}}
|
|
<main class="netgescon-content main-content" role="main">
|
|
|
|
{{-- Breadcrumb Modulare --}}
|
|
@if($showBreadcrumb ?? true)
|
|
@include('components.layout.breadcrumb')
|
|
@endif
|
|
|
|
{{-- Alert e Messaggi --}}
|
|
@include('components.layout.alerts')
|
|
|
|
{{-- Contenuto Specifico della Pagina --}}
|
|
<div class="content-wrapper">
|
|
{{ $slot ?? '' }}
|
|
@yield('content')
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
|
|
{{-- Footer Modulare --}}
|
|
@include('components.layout.footer.main', [
|
|
'showVersion' => $showVersion ?? true,
|
|
'showLinks' => $showLinks ?? true,
|
|
'showStats' => $showStats ?? false
|
|
])
|
|
|
|
</div>
|
|
|
|
{{-- Modali Globali --}}
|
|
@include('components.layout.modals')
|
|
|
|
{{-- JavaScript Framework --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
|
|
{{-- Script per pulizia layout --}}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Rimuovi eventuali caratteri spuri dal body
|
|
const textNodes = [];
|
|
const walker = document.createTreeWalker(
|
|
document.body,
|
|
NodeFilter.SHOW_TEXT,
|
|
null,
|
|
false
|
|
);
|
|
|
|
let node;
|
|
while (node = walker.nextNode()) {
|
|
if (node.parentNode === document.body && node.textContent.trim() === '>') {
|
|
textNodes.push(node);
|
|
}
|
|
}
|
|
|
|
textNodes.forEach(node => {
|
|
if (node.textContent.trim() === '>' || node.textContent.trim() === '') {
|
|
node.remove();
|
|
}
|
|
});
|
|
|
|
// Debug layout e correzioni automatiche
|
|
const sidebar = document.querySelector('.netgescon-sidebar');
|
|
const content = document.querySelector('.netgescon-content');
|
|
const body = document.querySelector('.netgescon-body');
|
|
|
|
if (sidebar && content && body) {
|
|
// Assicura dimensioni corrette
|
|
const sidebarWidth = sidebar.offsetWidth;
|
|
const bodyWidth = body.offsetWidth;
|
|
const contentWidth = bodyWidth - sidebarWidth;
|
|
|
|
console.log('NetGesCon Layout Debug:');
|
|
console.log('- Sidebar width:', sidebarWidth, 'px');
|
|
console.log('- Body width:', bodyWidth, 'px');
|
|
console.log('- Content calculated width:', contentWidth, 'px');
|
|
console.log('- Content actual width:', content.offsetWidth, 'px');
|
|
|
|
// Forza larghezza corretta se necessario
|
|
if (content.offsetWidth < contentWidth - 50) {
|
|
console.log('Correzione automatica larghezza content...');
|
|
content.style.width = '100%';
|
|
content.style.flex = '1 1 auto';
|
|
}
|
|
}
|
|
|
|
console.log('NetGesCon Layout inizializzato correttamente');
|
|
});
|
|
</script>
|
|
|
|
{{-- JavaScript Specifico per Pagina --}}
|
|
@stack('scripts')
|
|
|
|
{{-- Toggle sidebar function --}}
|
|
<script>
|
|
/* Toggle sidebar function */
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('netgesconSidebar');
|
|
const content = document.querySelector('.netgescon-content');
|
|
|
|
if (sidebar && content) {
|
|
sidebar.classList.toggle('sidebar-hidden');
|
|
content.classList.toggle('sidebar-hidden');
|
|
|
|
// Salva lo stato in localStorage
|
|
const isHidden = sidebar.classList.contains('sidebar-hidden');
|
|
localStorage.setItem('netgescon-sidebar-hidden', isHidden);
|
|
}
|
|
}
|
|
|
|
// Ripristina stato sidebar al caricamento
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const isHidden = localStorage.getItem('netgescon-sidebar-hidden') === 'true';
|
|
const sidebar = document.getElementById('netgesconSidebar');
|
|
const content = document.querySelector('.netgescon-content');
|
|
|
|
if (isHidden && sidebar && content) {
|
|
sidebar.classList.add('sidebar-hidden');
|
|
content.classList.add('sidebar-hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{{-- Dark mode toggle --}}
|
|
<script>
|
|
/* Dark mode toggle */
|
|
function toggleDarkMode() {
|
|
const body = document.body;
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
|
|
body.classList.toggle('dark');
|
|
|
|
// Cambia icona
|
|
if (body.classList.contains('dark')) {
|
|
themeIcon.className = 'fas fa-sun';
|
|
localStorage.setItem('netgescon-theme', 'dark');
|
|
} else {
|
|
themeIcon.className = 'fas fa-moon';
|
|
localStorage.setItem('netgescon-theme', 'light');
|
|
}
|
|
}
|
|
|
|
// Ripristina tema al caricamento
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const savedTheme = localStorage.getItem('netgescon-theme');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
|
|
if (savedTheme === 'dark') {
|
|
document.body.classList.add('dark');
|
|
if (themeIcon) themeIcon.className = 'fas fa-sun';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|