diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css index 80a1763..56d6ee6 100644 --- a/expenses_manager/expenses/static/expenses/css/base.css +++ b/expenses_manager/expenses/static/expenses/css/base.css @@ -40,6 +40,25 @@ a.danger { text-decoration: underline; } +.nav-toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 4px; + background: none; + border: none; + padding: 8px; + cursor: pointer; +} + +.nav-toggle-bar { + display: block; + width: 24px; + height: 3px; + background: #e5e7eb; + border-radius: 2px; +} + .nav-item.active { font-weight: bold; border-bottom: 2px solid white; @@ -108,9 +127,20 @@ a.danger { margin-bottom: 4rem; } +.charts-container > section { + flex: 1 1 320px; + min-width: 280px; +} + .chart-box { - height: 300px; - margin-bottom: 3rem; + position: relative; + height: 320px; + width: 100%; + margin-top: 0.5rem; +} + +.chart-box canvas { + max-width: 100%; } .canvas-wrapper { @@ -177,6 +207,16 @@ table { margin-top: 1rem; } +.table-wrap { + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +.table-wrap table { + white-space: nowrap; +} + th, td { padding: 0.6rem 0.75rem; text-align: left; @@ -277,9 +317,24 @@ tbody tr:hover { .dashboard-presets { display: flex; + flex-wrap: wrap; gap: 0.5rem; } +.clear-filters-row { + margin-top: 0.5rem; +} + +.clear-filters { + color: #b91c1c; + text-decoration: none; + font-size: 0.85rem; +} + +.clear-filters:hover { + text-decoration: underline; +} + .preset { padding: 0.35rem 0.6rem; border-radius: 6px; @@ -354,6 +409,16 @@ tbody tr:hover { .dropdown-toggle { padding: 10px; display: inline-block; + background: none; + border: none; + font: inherit; + color: inherit; + cursor: pointer; +} + +.dropdown-toggle:focus-visible { + outline: 2px solid #93c5fd; + outline-offset: 2px; } .dropdown-menu { @@ -379,7 +444,7 @@ tbody tr:hover { background-color: #f5f5f5; } -.dropdown:hover .dropdown-menu { +.dropdown.dropdown--open .dropdown-menu { display: block; } @@ -536,4 +601,89 @@ tbody tr:hover { .auth-help { margin-top: 16px; font-size: 0.9em; +} + +@media (max-width: 768px) { + .content { + padding: 16px; + } + + .topbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .nav-toggle { + display: flex; + } + + .nav { + display: none; + flex-direction: column; + align-items: stretch; + gap: 8px; + width: 100%; + margin-top: 12px; + } + + .nav.nav--open { + display: flex; + } + + .nav .spacer { + display: none; + } + + .dropdown-menu { + display: none; + position: static; + border: none; + box-shadow: none; + background: transparent; + min-width: 0; + padding-left: 12px; + } + + .dropdown-menu a { + color: #e5e7eb; + } + + .dropdown-menu a:hover { + background-color: transparent; + text-decoration: underline; + } + + .dashboard-grid { + grid-template-columns: 1fr; + } + + .card-chart { + height: 320px; + } +} + +@media (max-width: 480px) { + .content { + padding: 12px; + } + + .topbar { + padding: 10px 12px; + } + + .kpi-grid, + .goals-widget, + .settings-grid { + grid-template-columns: 1fr; + } + + .chart-box { + height: 240px; + } + + .card-chart { + height: 260px; + } } \ No newline at end of file diff --git a/expenses_manager/expenses/static/expenses/js/nav.js b/expenses_manager/expenses/static/expenses/js/nav.js new file mode 100644 index 0000000..c382c5c --- /dev/null +++ b/expenses_manager/expenses/static/expenses/js/nav.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', function () { + var toggle = document.getElementById('navToggle'); + var nav = document.getElementById('mainNav'); + + if (!toggle || !nav) { + return; + } + + toggle.addEventListener('click', function () { + var isOpen = nav.classList.toggle('nav--open'); + toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + }); + + var dropdownToggle = document.getElementById('dropdownToggle'); + var dropdown = document.getElementById('settingsDropdown'); + + if (dropdownToggle && dropdown) { + dropdownToggle.addEventListener('click', function () { + var isOpen = dropdown.classList.toggle('dropdown--open'); + dropdownToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + }); + + document.addEventListener('click', function (event) { + if (!dropdown.contains(event.target)) { + dropdown.classList.remove('dropdown--open'); + dropdownToggle.setAttribute('aria-expanded', 'false'); + } + }); + } +}); diff --git a/expenses_manager/expenses/templates/categories/list.html b/expenses_manager/expenses/templates/categories/list.html index 24826ab..b057511 100644 --- a/expenses_manager/expenses/templates/categories/list.html +++ b/expenses_manager/expenses/templates/categories/list.html @@ -18,6 +18,7 @@

Listado

+
@@ -37,6 +38,7 @@ {% endfor %} -
+ +
{% endblock %} \ No newline at end of file diff --git a/expenses_manager/expenses/templates/expenses/account_list.html b/expenses_manager/expenses/templates/expenses/account_list.html index cc7bd4d..c869f28 100644 --- a/expenses_manager/expenses/templates/expenses/account_list.html +++ b/expenses_manager/expenses/templates/expenses/account_list.html @@ -6,6 +6,7 @@ ➕ Nueva cuenta +
@@ -46,4 +47,5 @@ {% endfor %}
+
{% endblock %} \ No newline at end of file diff --git a/expenses_manager/expenses/templates/expenses/base.html b/expenses_manager/expenses/templates/expenses/base.html index 8aa61a1..32f2470 100644 --- a/expenses_manager/expenses/templates/expenses/base.html +++ b/expenses_manager/expenses/templates/expenses/base.html @@ -13,7 +13,12 @@ {% if user.is_authenticated %}
-