diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css index a1ee0ca..a99bbb3 100644 --- a/expenses_manager/expenses/static/expenses/css/base.css +++ b/expenses_manager/expenses/static/expenses/css/base.css @@ -105,21 +105,6 @@ a.danger { margin-bottom: 2rem; } -.tag{ - display: inline-block; - padding: 2px 6px; - margin-right: 4px; - background: #eef2f7; - border-radius: 4px; - font-size: 0.85rem; - text-decoration: none; - color: #333; -} - -.tag:hover { - background: #dbe3ee; -} - .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); @@ -283,4 +268,46 @@ tbody tr:hover { .preset.active { background: #2563eb; color: white; +} + +.filters { + margin-bottom: 1.5rem; +} + +.filters-main { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; +} + +.filters-advanced { + margin-top: 0.5rem; +} + +.active-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + margin-top: 0.3rem; +} + +.tag{ + /* display: inline-block; */ + padding: 0.2rem 0.5rem; + border-radius: 4px; + background: #eee; + text-decoration: none; + margin-right: 4px; + font-size: 0.85rem; + color: #333; +} + +.tag.active { + background: #333; + color: white; +} + +.tag:hover { + background: #dbe3ee; } \ No newline at end of file diff --git a/expenses_manager/expenses/templates/expenses/expense_list.html b/expenses_manager/expenses/templates/expenses/expense_list.html index 9ff88b1..293d0c1 100644 --- a/expenses_manager/expenses/templates/expenses/expense_list.html +++ b/expenses_manager/expenses/templates/expenses/expense_list.html @@ -8,72 +8,90 @@ {% block content %}