feat: completar fases 3 y 4 del roadmap mvp (gradebook, drag-and-drop, impersonacion) y actualizar README
This commit is contained in:
@@ -31,17 +31,35 @@
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
NAVBAR COMPACTA — limpia y sin desperdicio
|
||||
============================================= */
|
||||
.glass-navbar {
|
||||
padding: 0 !important; /* Bootstrap agrega padding, lo neutralizamos */
|
||||
min-height: 48px;
|
||||
}
|
||||
.glass-navbar .container-fluid {
|
||||
padding-top: 0.35rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
/* --- MODO CLARO ([data-bs-theme="light"]) --- */
|
||||
[data-bs-theme="light"] body {
|
||||
background: #F8FAFC !important;
|
||||
color: #1E293B !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar {
|
||||
background: rgba(255, 255, 255, 0.88) !important;
|
||||
background: rgba(255, 255, 255, 0.92) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .navbar-brand span {
|
||||
background: linear-gradient(90deg, #B43E8E, #682CAD);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link {
|
||||
color: #334155 !important;
|
||||
@@ -49,6 +67,8 @@
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link.active {
|
||||
color: #B43E8E !important;
|
||||
background: rgba(180, 62, 142, 0.06);
|
||||
border-radius: 7px;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-card,
|
||||
[data-bs-theme="light"] .card {
|
||||
@@ -57,6 +77,16 @@
|
||||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
/* Toggle button - modo claro */
|
||||
[data-bs-theme="light"] .navbar-toggle-custom {
|
||||
color: #334155;
|
||||
border-color: rgba(51, 65, 85, 0.25);
|
||||
}
|
||||
[data-bs-theme="light"] .navbar-toggle-custom:hover {
|
||||
background: rgba(180, 62, 142, 0.08);
|
||||
border-color: #B43E8E;
|
||||
color: #B43E8E;
|
||||
}
|
||||
|
||||
/* --- MODO OSCURO ([data-bs-theme="dark"]) --- */
|
||||
[data-bs-theme="dark"] body {
|
||||
@@ -64,11 +94,17 @@
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar {
|
||||
background: rgba(15, 23, 42, 0.78) !important;
|
||||
background: rgba(15, 23, 42, 0.82) !important;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35) !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .navbar-brand span {
|
||||
background: linear-gradient(90deg, #FF8AB6, #AE7FFF);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link {
|
||||
color: #CBD5E1 !important;
|
||||
@@ -76,6 +112,8 @@
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link.active {
|
||||
color: #FF8AB6 !important;
|
||||
background: rgba(255, 138, 182, 0.08);
|
||||
border-radius: 7px;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-card,
|
||||
[data-bs-theme="dark"] .card {
|
||||
@@ -84,18 +122,123 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
font-weight: 700;
|
||||
background: linear-gradient(90deg, #B43E8E, #682CAD);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
/* Toggle button - modo oscuro */
|
||||
[data-bs-theme="dark"] .navbar-toggle-custom {
|
||||
color: #CBD5E1;
|
||||
border-color: rgba(203, 213, 225, 0.25);
|
||||
}
|
||||
[data-bs-theme="dark"] .navbar-toggle-custom:hover {
|
||||
background: rgba(255, 138, 182, 0.1);
|
||||
border-color: rgba(255, 138, 182, 0.5);
|
||||
color: #FF8AB6;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BRAND / LOGO
|
||||
============================================= */
|
||||
.navbar-brand {
|
||||
font-weight: 700;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar-brand span {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.navbar-logo {
|
||||
height: 26px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
NAV LINKS — compactos
|
||||
============================================= */
|
||||
.glass-navbar .nav-link {
|
||||
font-size: 0.84rem;
|
||||
font-weight: 500;
|
||||
padding: 0.3rem 0.65rem !important;
|
||||
border-radius: 7px;
|
||||
transition: color 0.15s ease, background 0.15s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.glass-navbar .nav-link i {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
TOGGLE BUTTON — limpio, pill style
|
||||
============================================= */
|
||||
.navbar-toggle-custom {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.18s ease;
|
||||
outline: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.navbar-toggle-custom i {
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
MAIN CONTAINER — espacio eficiente
|
||||
============================================= */
|
||||
.main-container {
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
padding: 1rem 0 1.5rem;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE — 720p (1360x768)
|
||||
============================================= */
|
||||
@media (max-height: 800px) {
|
||||
.main-container {
|
||||
padding: 0.65rem 0 1rem;
|
||||
}
|
||||
.glass-navbar .container-fluid {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE — 1920x1080 (pantallas grandes)
|
||||
============================================= */
|
||||
@media (min-width: 1600px) {
|
||||
.main-container {
|
||||
padding: 1.25rem 0 2rem;
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
MENU COLAPSADO (mobile / tablet)
|
||||
============================================= */
|
||||
@media (max-width: 991.98px) {
|
||||
.glass-navbar .navbar-collapse {
|
||||
padding: 0.5rem 0;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.12);
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.glass-navbar .nav-link {
|
||||
padding: 0.45rem 0.75rem !important;
|
||||
border-radius: 8px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
.glass-navbar .navbar-nav.ms-auto {
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px solid rgba(128, 128, 128, 0.1);
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
@@ -117,42 +260,56 @@
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg glass-navbar sticky-top">
|
||||
<div class="container-fluid px-4">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/dashboard">
|
||||
<img src="/img/logo_unicaba_mini.png" alt="Logo UniCABA" class="navbar-logo me-2" height="30">
|
||||
<div class="container-fluid px-3 px-lg-4">
|
||||
<!-- Brand -->
|
||||
<a class="navbar-brand d-flex align-items-center gap-2" href="/dashboard">
|
||||
<img src="/img/logo_unicaba_mini.png" alt="Logo UniCABA" class="navbar-logo">
|
||||
<span>Edu-Space Admin</span>
|
||||
</a>
|
||||
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<i class="bi bi-list text-light fs-2"></i>
|
||||
|
||||
<!-- Toggle button — limpio, sin foco feo de Bootstrap -->
|
||||
<button
|
||||
class="navbar-toggle-custom d-lg-none"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Menú"
|
||||
>
|
||||
<i class="bi bi-list"></i>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto align-items-center ms-3">
|
||||
<!-- Nav principal -->
|
||||
<ul class="navbar-nav me-auto align-items-lg-center ms-lg-2 gap-lg-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/dashboard">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Panel General
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/classrooms/list_classrooms">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios & Sedes
|
||||
<a class="nav-link" href="/classrooms/list_classrooms">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios & Sedes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/schedule/calendar_view">
|
||||
<i class="bi bi-calendar3 me-1"></i>Cronograma & Reservas
|
||||
<a class="nav-link" href="/schedule/calendar_view">
|
||||
<i class="bi bi-calendar3 me-1"></i>Cronograma & Reservas
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3 active text-primary fw-semibold" href="/predictive">
|
||||
<a class="nav-link" href="/predictive">
|
||||
<i class="bi bi-cpu me-1"></i>Módulo Predictivo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav ms-auto align-items-center">
|
||||
<!-- Nav derecha -->
|
||||
<ul class="navbar-nav align-items-lg-center ms-auto gap-2">
|
||||
<li class="nav-item">
|
||||
<a class="btn btn-outline-danger btn-sm rounded-pill px-3 fw-medium" href="/auth/logout">
|
||||
<i class="bi bi-box-arrow-right me-1"></i> Cerrar Sesión
|
||||
<i class="bi bi-box-arrow-right me-1"></i>Cerrar Sesión
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -161,7 +318,7 @@
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container main-container">
|
||||
<main class="container-fluid container-xl main-container px-3 px-lg-4">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user