From fd43032b558532e69c682e1cfe333912ba694905 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Thu, 19 Mar 2026 15:14:21 +0100 Subject: [PATCH] poprawki cd --- shopping_app/static/css/style.css | 352 +++++++++++++++++++++++ shopping_app/static/js/chart_controls.js | 6 +- shopping_app/static/js/expense_table.js | 6 +- shopping_app/templates/base.html | 18 +- shopping_app/templates/expenses.html | 34 +-- shopping_app/templates/list.html | 106 +++++-- shopping_app/templates/list_share.html | 243 ++++++++++------ 7 files changed, 634 insertions(+), 131 deletions(-) diff --git a/shopping_app/static/css/style.css b/shopping_app/static/css/style.css index 78a32b9..06fcd0c 100644 --- a/shopping_app/static/css/style.css +++ b/shopping_app/static/css/style.css @@ -5349,3 +5349,355 @@ body:not(.sorting-active) .drag-handle { margin-bottom: .65rem; } } + +/* ========== /expenses mobile fixes: separate range pickers + better wrapping ========== */ +.endpoint-expenses .expenses-range-toolbar { + width: 100%; +} + +.endpoint-expenses .expenses-range-group { + flex-wrap: wrap; + justify-content: center; + width: 100%; +} + +.endpoint-expenses .expenses-range-group > .btn { + white-space: nowrap; +} + +.endpoint-expenses .expenses-date-range { + align-items: stretch; +} + +@media (max-width: 767.98px) { + .endpoint-expenses .expenses-range-toolbar { + justify-content: stretch !important; + overflow: visible; + padding-bottom: 0; + } + + .endpoint-expenses .expenses-range-group { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.55rem; + width: 100%; + min-width: 0; + } + + .endpoint-expenses .expenses-table-toolbar .expenses-range-group { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .endpoint-expenses .expenses-range-group > .btn { + flex: initial !important; + width: 100%; + min-width: 0; + padding-inline: 0.55rem; + font-size: 0.95rem; + } + + .endpoint-expenses .expenses-date-range { + display: grid !important; + grid-template-columns: 52px minmax(0, 1fr); + gap: 0.55rem; + width: 100%; + max-width: 100% !important; + flex-wrap: wrap !important; + } + + .endpoint-expenses .expenses-date-range > .input-group-text, + .endpoint-expenses .expenses-date-range > .form-control, + .endpoint-expenses .expenses-date-range > .btn { + width: 100% !important; + min-width: 0 !important; + flex: initial !important; + border-radius: 0.85rem !important; + } + + .endpoint-expenses .expenses-date-range > .btn { + grid-column: 1 / -1; + } +} + + +/* /share expense entry card aligned with product card */ +.endpoint-list .shopping-entry-card--expense, +.endpoint-list_share .shopping-entry-card--expense, +.endpoint-shared_list .shopping-entry-card--expense, +.endpoint-view_list .shopping-entry-card--expense { + background: linear-gradient(180deg, rgba(13, 110, 253, 0.16), rgba(13, 17, 23, 0.92)); + border-color: rgba(13, 110, 253, 0.42); +} + +.endpoint-list .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-list_share .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-shared_list .shopping-entry-card--expense .shopping-entry-card__label, +.endpoint-view_list .shopping-entry-card--expense .shopping-entry-card__label { + color: #d7e9ff; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group { + margin-bottom: 0 !important; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control { + border-color: rgba(13, 110, 253, 0.55) !important; + background: rgba(17, 24, 39, 0.95) !important; +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .form-control::placeholder { + color: rgba(255, 255, 255, 0.62); +} + +.endpoint-list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-list_share .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-shared_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus, +.endpoint-view_list .shopping-entry-card--expense .shopping-expense-input-group > .shopping-expense-amount-input:focus { + box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.25), 0 0 0 .2rem rgba(13, 110, 253, 0.18); +} + +.endpoint-list .share-submit-btn--expense, +.endpoint-list_share .share-submit-btn--expense, +.endpoint-shared_list .share-submit-btn--expense, +.endpoint-view_list .share-submit-btn--expense { + color: #8ec5ff; + border-color: rgba(13, 110, 253, 0.72) !important; + background: rgba(13, 110, 253, 0.12); +} + +.endpoint-list .share-submit-btn--expense:hover, +.endpoint-list_share .share-submit-btn--expense:hover, +.endpoint-shared_list .share-submit-btn--expense:hover, +.endpoint-view_list .share-submit-btn--expense:hover, +.endpoint-list .share-submit-btn--expense:focus, +.endpoint-list_share .share-submit-btn--expense:focus, +.endpoint-shared_list .share-submit-btn--expense:focus, +.endpoint-view_list .share-submit-btn--expense:focus { + color: #fff; + border-color: rgba(13, 110, 253, 0.9) !important; + background: rgba(13, 110, 253, 0.22); + box-shadow: 0 0 0 .2rem rgba(13, 110, 253, 0.16); +} + +/* UX polish 2026-03-19: list quick actions card */ +.list-quick-actions { + display: grid; + gap: .9rem; + padding: 1rem; + border: 1px solid rgba(255,255,255,.08); + border-radius: 1rem; + background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); + box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.14); +} + +.list-quick-actions__header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: .75rem; +} + +.list-quick-actions__eyebrow { + font-size: .72rem; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255,255,255,.58); + margin-bottom: .15rem; +} + +.list-quick-actions__title { + font-size: 1rem; + font-weight: 700; + color: #fff; + line-height: 1.2; +} + +.list-quick-actions__hint { + font-size: .82rem; + color: rgba(255,255,255,.62); + text-align: right; + max-width: 18rem; +} + +.list-quick-actions__grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .75rem; +} + +.list-quick-actions__form { + display: block; +} + +.list-quick-actions__action.btn { + width: 100%; + min-height: 78px; + display: flex; + align-items: flex-start; + gap: .75rem; + padding: .9rem 1rem; + border-radius: .95rem; + text-align: left; + white-space: normal; +} + +.list-quick-actions__action--primary.btn { + border-color: rgba(255,255,255,.2); + background: rgba(255,255,255,.03); +} + +.list-quick-actions__action--secondary.btn { + border-color: rgba(13,110,253,.5); + background: rgba(13,110,253,.08); +} + +.list-quick-actions__icon { + flex: 0 0 auto; + font-size: 1.05rem; + line-height: 1; + margin-top: .1rem; +} + +.list-quick-actions__content { + display: grid; + gap: .2rem; + min-width: 0; +} + +.list-quick-actions__label { + font-size: .95rem; + font-weight: 600; + color: #fff; + line-height: 1.25; +} + +.list-quick-actions__desc { + font-size: .81rem; + color: rgba(255,255,255,.66); + line-height: 1.35; +} + +@media (max-width: 767.98px) { + .list-quick-actions { + padding: .9rem; + gap: .75rem; + } + + .list-quick-actions__header { + flex-direction: column; + gap: .35rem; + } + + .list-quick-actions__hint { + max-width: none; + text-align: left; + } + + .list-quick-actions__grid { + grid-template-columns: 1fr; + } + + .list-quick-actions__action.btn { + min-height: 72px; + padding: .85rem .9rem; + } +} + + +/* mobile user chip 2026-03-19 */ +.app-navbar__meta--mobile { + display: none; +} + +.app-user-chip--mobile { + max-width: min(46vw, 15rem); + min-width: 0; + padding-left: .6rem; + padding-right: .4rem; +} + +.app-user-chip--mobile .badge { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@media (max-width: 991.98px) { + .app-navbar__meta--mobile { + display: flex !important; + width: auto; + justify-content: flex-end; + min-width: 0; + } + + .app-user-chip--mobile { + display: inline-flex; + } +} + +@media (max-width: 575.98px) { + .app-brand__icon { + width: 2.25rem; + height: 2.25rem; + } + + .app-user-chip--mobile { + gap: .35rem; + padding: .34rem .38rem .34rem .5rem; + } + + .app-user-chip--mobile .app-user-chip__label { + font-size: .62rem; + letter-spacing: .05em; + } + + .app-user-chip--mobile .badge { + font-size: .72rem; + max-width: 5.9rem; + } +} + + +/* mobile navbar layout fix 2026-03-19 */ +@media (max-width: 991.98px) { + .app-navbar .container-xxl { + grid-template-columns: minmax(0, 1fr) auto auto; + } + + .app-navbar__meta--mobile { + grid-column: 2; + justify-self: end; + min-width: 0; + max-width: min(42vw, 12rem); + } + + .app-mobile-menu { + grid-column: 3; + justify-self: end; + } +} + +@media (max-width: 430px) { + .app-navbar .container-xxl { + grid-template-columns: minmax(0, 1fr) auto auto; + gap: .45rem; + } + + .app-user-chip--mobile { + max-width: min(38vw, 8.5rem); + } + + .app-user-chip--mobile .app-user-chip__label { + display: none; + } +} diff --git a/shopping_app/static/js/chart_controls.js b/shopping_app/static/js/chart_controls.js index 78e5f36..682efc8 100644 --- a/shopping_app/static/js/chart_controls.js +++ b/shopping_app/static/js/chart_controls.js @@ -76,7 +76,7 @@ document.addEventListener("DOMContentLoaded", function () { } // porzucenie zakresu - document.querySelectorAll("#chartTab .range-btn").forEach(b => b.classList.remove("active")); + document.querySelectorAll("#chartTab .chart-range-btn").forEach(b => b.classList.remove("active")); reloadRespectingSplit(); }); @@ -90,9 +90,9 @@ document.addEventListener("DOMContentLoaded", function () { }); // ——— Predefiniowane zakresy pod wykresem ——— - document.querySelectorAll("#chartTab .range-btn").forEach((btn) => { + document.querySelectorAll("#chartTab .chart-range-btn").forEach((btn) => { btn.addEventListener("click", function () { - document.querySelectorAll("#chartTab .range-btn").forEach((b) => b.classList.remove("active")); + document.querySelectorAll("#chartTab .chart-range-btn").forEach((b) => b.classList.remove("active")); this.classList.add("active"); const r = this.getAttribute("data-range"); // last30days/currentmonth/monthly/quarterly/halfyearly/yearly diff --git a/shopping_app/static/js/expense_table.js b/shopping_app/static/js/expense_table.js index 47147d1..694c47f 100644 --- a/shopping_app/static/js/expense_table.js +++ b/shopping_app/static/js/expense_table.js @@ -1,7 +1,7 @@ document.addEventListener('DOMContentLoaded', () => { const checkboxes = document.querySelectorAll('.list-checkbox'); const totalEl = document.getElementById('listsTotal'); - const filterButtons = document.querySelectorAll('.range-btn'); + const filterButtons = document.querySelectorAll('#listsTab .table-range-btn'); const rows = document.querySelectorAll('#listsTableBody tr'); const categoryButtons = document.querySelectorAll('.category-filter'); const applyCustomBtn = document.getElementById('applyCustomRange'); @@ -136,7 +136,7 @@ document.addEventListener('DOMContentLoaded', () => { if (initialLoad) { filterByLast30Days(); } else { - const activeRange = document.querySelector('.range-btn.active'); + const activeRange = document.querySelector('#listsTab .table-range-btn.active'); if (activeRange) filterByRange(activeRange.dataset.range); } applyExpenseFilter(); @@ -158,7 +158,7 @@ document.addEventListener('DOMContentLoaded', () => { return; } initialLoad = false; - document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active')); + document.querySelectorAll('#listsTab .table-range-btn').forEach(b => b.classList.remove('active')); filterByCustomRange(startStr, endStr); applyExpenseFilter(); applyCategoryFilter(); diff --git a/shopping_app/templates/base.html b/shopping_app/templates/base.html index 5651049..4bca44b 100644 --- a/shopping_app/templates/base.html +++ b/shopping_app/templates/base.html @@ -58,7 +58,23 @@ {% endif %} -
+
+ {% if has_authorized_cookie and not is_blocked %} + {% if current_user.is_authenticated %} +
+ Zalogowany + {{ current_user.username }} +
+ {% else %} +
+ Tryb + gość +
+ {% endif %} + {% endif %} +
+ +
diff --git a/shopping_app/templates/expenses.html b/shopping_app/templates/expenses.html index 902df05..ddadd12 100644 --- a/shopping_app/templates/expenses.html +++ b/shopping_app/templates/expenses.html @@ -61,18 +61,18 @@
-
-
- - - - - +
+
+ + + + +
-
+
Od @@ -169,20 +169,20 @@
-
-
- - - - - - + + + + +
-
+
Od Do diff --git a/shopping_app/templates/list.html b/shopping_app/templates/list.html index 706175d..bd8fed9 100644 --- a/shopping_app/templates/list.html +++ b/shopping_app/templates/list.html @@ -185,16 +185,6 @@
{% if not list.is_archived %} -
-
- -
- - -
-
➕ Dodaj produkt
@@ -216,6 +206,37 @@
+ +
+
+
+
Szybkie akcje
+
Dodawanie i zapis listy
+
+
Najczęściej używane akcje pod ręką.
+
+ +
+ + +
+ + +
+
+
{% endif %} {% if activity_logs %} @@ -225,7 +246,7 @@
🕘 Historia zmian listy
-
Domyślnie ukryte. Zdarzeń: {{ activity_logs|length }}
+
Rozwiń aby zobaczyć | Zdarzeń: {{ activity_logs|length }}
@@ -248,23 +269,56 @@ {% endif %} {% set receipt_pattern = 'list_' ~ list.id %} -
-
📸 Paragony dodane do tej listy
-
- {% if receipts %} - {% for r in receipts %} -
- - - +
+
+
+
+
📄 Paragony dodane do tej listy
+

+ Tutaj możesz wygodnie przejrzeć wszystkie paragony przypisane do tej listy. +

+
+
+ {{ receipts|length }} plik{% if receipts|length != 1 %}i{% endif %} + Tylko podgląd +
+
+ +
+
+
📸 Galeria paragonów
+ {% if receipts %} + Kliknij miniaturę, aby otworzyć podgląd + {% endif %} +
+ +
+ {% if receipts %} + {% for r in receipts %} +
+ +
+ Paragon {{ loop.index }} +
+
Paragon {{ loop.index }}
+
+
+ +
+ {% endfor %} + {% else %} +
+ +
+ {% endif %} +
+
- {% endfor %} - {% else %} - - {% endif %}
diff --git a/shopping_app/templates/list_share.html b/shopping_app/templates/list_share.html index c6c4a20..ae8d033 100644 --- a/shopping_app/templates/list_share.html +++ b/shopping_app/templates/list_share.html @@ -88,7 +88,7 @@ {% else %}
  • - Brak produktów w tej liście. + Brak produktów w tej liście.
    • {% endfor %} @@ -109,14 +109,34 @@ {% endif %} {% if not list.is_archived %} -
    -
    💰 Dodaj wydatek
    -
    - - -
    {% endif %} -

    💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN

    +
    +
    + 💰 Dodaj wydatek + + + 💸 Łączna suma: {{ '%.2f'|format(total_expense) }} PLN + +
    + +
    Wpisz kwotę wydatku i kliknij Zapisz.
    + +
    + + + +
    +
    +{% endif %} + + - {% else %} -
    - ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR. +
    + {% if receipts %} + {% for r in receipts %} +
    + +
    + Paragon {{ loop.index }} +
    +
    Paragon {{ loop.index }}
    +
    +
    +     +
    + {% endfor %} + {% else %} +
    + +
    + {% endif %} +
    +
    +
    + +
    +
    +
    +
    +
    +
    🔍 Analiza paragonów (OCR)
    +

    + System spróbuje automatycznie rozpoznać kwoty. Sprawdź wynik i kliknij „Dodaj”, aby dopisać wydatek. +

    +
    +
    + + {% if current_user.is_authenticated %} + + {% else %} +
    + ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR. +
    + {% endif %} +
    +
    + + {% if not list.is_archived and current_user.is_authenticated %} +
    +
    📤 Dodaj nowy paragon
    +

    Możesz dodać zdjęcie z aparatu, z galerii albo plik PDF.

    + +
    + +
    + + + + + + + + +
    + + + +
    + +
    + {% elif list.is_archived %} +
    +
    📤 Dodawanie zablokowane
    +

    Ta lista jest archiwalna, więc nie można już dodawać nowych paragonów.

    +
    + {% elif not current_user.is_authenticated %} +
    +
    🔐 Dodawanie wymaga logowania
    +

    Zaloguj się, aby dodawać paragony i uruchamiać analizę OCR.

    +
    + {% endif %} +
    +
    +
    + - {% endif %} -
    - -
    📸 Paragony dodane do tej listy
    -
    - {% if receipts %} - {% for r in receipts %} -
    - - - -
    - {% endfor %} - {% else %} - - {% endif %} -
    - - {% if not list.is_archived and current_user.is_authenticated %} -
    -
    📤 Dodaj zdjęcie paragonu
    - - - - - - - - - - - - - - - -
    - - {% endif %}