From ff6c381dc4e2acc4757d74f9dab20f12cc38eab2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Pastor?= Date: Mon, 4 May 2026 10:05:15 +0200 Subject: [PATCH 1/2] chore: adapt css for mobile devices --- templates/base.html | 295 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 288 insertions(+), 7 deletions(-) diff --git a/templates/base.html b/templates/base.html index 27aa45d..cda776a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -16,6 +16,15 @@ background-color: #f8f9fa; } + body.sidebar-open { + overflow: hidden; + } + + .navbar-brand { + min-width: 0; + white-space: nowrap; + } + .sidebar { position: fixed; top: 56px; @@ -45,6 +54,7 @@ .main-content { margin-left: 250px; padding: 20px; + min-width: 0; } .card { @@ -52,16 +62,216 @@ box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } - @media (max-width: 768px) { - .sidebar { + /* Overlay para cerrar el sidebar en móvil */ + .sidebar-overlay { + display: none; + position: fixed; + top: 56px; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1040; + opacity: 0; + transition: opacity 0.3s ease; + } + + .sidebar-overlay.show { + display: block; + opacity: 1; + } + + .table-responsive { + -webkit-overflow-scrolling: touch; + } + + .table { + vertical-align: middle; + } + + @media (max-width: 767.98px) { + body { + padding-top: 56px; + } + + h1 { + font-size: 1.55rem; + line-height: 1.25; + } + + h2 { + font-size: 1.35rem; + } + + h3 { + font-size: 1.2rem; + } + + .navbar .container-fluid { + flex-wrap: nowrap; + gap: 0.25rem; + } + + .navbar-brand { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + } + + .navbar-toggler { + flex: 0 0 auto; + padding: 0.25rem 0.5rem; + } + + .navbar-collapse { + position: fixed; + top: 56px; + left: 0; + right: 0; + padding: 0.75rem 1rem 1rem; + background-color: #212529; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); + } + + .navbar-nav .dropdown-menu { + position: static; width: 100%; - height: auto; - position: relative; - top: 0; + margin-top: 0.5rem; + } + + .sidebar { + width: 280px; + max-width: calc(100vw - 3rem); + position: fixed; + top: 56px; + left: -280px; + bottom: 0; + z-index: 1045; + padding: 12px 0 max(20px, env(safe-area-inset-bottom)); + transition: left 0.3s ease; + } + + .sidebar.show { + left: 0; } .main-content { margin-left: 0; + padding: 16px 12px max(24px, env(safe-area-inset-bottom)); + width: 100%; + overflow-x: hidden; + } + + .container.mt-5 { + margin-top: 1rem !important; + padding-left: 12px; + padding-right: 12px; + } + + .card { + border-radius: 0.5rem; + margin-bottom: 16px; + } + + .card-body { + padding: 1rem; + } + + .d-flex.justify-content-between.align-items-center.mb-4 { + align-items: stretch !important; + flex-direction: column; + gap: 0.75rem; + } + + .d-flex.justify-content-between.align-items-center.mb-4 > .btn, + .d-flex.justify-content-between.align-items-center.mb-4 > .btn-group { + width: 100%; + } + + .btn-group { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } + + .btn-group > .btn, + .btn-group > a, + .btn-group > form { + flex: 1 1 100%; + border-radius: 0.375rem !important; + } + + .alert.d-flex.justify-content-between.align-items-center { + align-items: flex-start !important; + flex-direction: column; + gap: 0.5rem; + } + + .row.g-3 > [class*="col-auto"] { + width: 100%; + } + + .row.g-3 > .ms-auto { + margin-left: 0 !important; + } + + .table-responsive { + margin-left: -1rem; + margin-right: -1rem; + padding-left: 1rem; + padding-right: 1rem; + } + + .table { + min-width: 640px; + font-size: 0.9rem; + } + + .table .btn, + .table .badge { + white-space: nowrap; + } + + .pagination { + flex-wrap: wrap; + gap: 0.25rem; + } + + .pagination .page-link { + border-radius: 0.375rem; + } + + .modal-dialog { + margin: 0.75rem; + } + + .fc .fc-toolbar { + align-items: stretch; + flex-direction: column; + gap: 0.5rem; + } + + .fc .fc-toolbar-chunk { + display: flex; + justify-content: center; + } + + .fc .fc-toolbar-title { + font-size: 1.1rem; + text-align: center; + } + + .fc .fc-button { + padding: 0.25rem 0.45rem; + font-size: 0.85rem; + } + } + + @media (prefers-reduced-motion: reduce) { + .sidebar, + .sidebar-overlay, + .sidebar a { + transition: none; } } @@ -71,6 +281,12 @@ {% if current_user.is_authenticated %} -