From edd0a3767f4a21ac0b50bbb35ebf5825c421b905 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Tue, 31 Mar 2026 12:14:27 +0200 Subject: [PATCH] =?UTF-8?q?sekcja=20paragon=C3=B3w=20przebudowana?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shopping_app/static/css/style.css | 113 ++++++++++++++++++++++ shopping_app/static/js/receipt_section.js | 66 ++++++++----- shopping_app/templates/list_share.html | 16 ++- 3 files changed, 167 insertions(+), 28 deletions(-) diff --git a/shopping_app/static/css/style.css b/shopping_app/static/css/style.css index 23ba413..ef953fe 100644 --- a/shopping_app/static/css/style.css +++ b/shopping_app/static/css/style.css @@ -5808,3 +5808,116 @@ body:not(.sorting-active) .drag-handle { min-width: 2.5rem; border-radius: 10px; } + + +/* ========================================================= + Receipt disclosure (share view) +========================================================= */ +.receipt-disclosure { + width: 100%; + cursor: pointer; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 20px; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); + transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; +} + +.receipt-disclosure:hover, +.receipt-disclosure:focus-visible { + transform: translateY(-1px); + border-color: rgba(255, 255, 255, 0.18); + box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24); + outline: none; +} + +.receipt-disclosure.is-open { + border-color: rgba(24, 64, 118, 0.9); + background: linear-gradient(135deg, rgba(24, 64, 118, 0.22), rgba(255, 255, 255, 0.03)); +} + +.receipt-disclosure__content { + display: flex; + align-items: center; + gap: 14px; + padding: 16px 18px; +} + +.receipt-disclosure__icon { + display: grid; + place-items: center; + width: 48px; + height: 48px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.06); + font-size: 1.25rem; + flex-shrink: 0; +} + +.receipt-disclosure__text { + min-width: 0; + flex: 1; +} + +.receipt-disclosure__eyebrow { + font-size: 0.72rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.52); + margin-bottom: 2px; +} + +.receipt-disclosure__title { + font-size: 1rem; + font-weight: 600; + color: var(--text-strong); +} + +.receipt-disclosure__meta { + display: flex; + align-items: center; + gap: 12px; + margin-left: auto; + flex-shrink: 0; +} + +.receipt-disclosure__count { + min-width: 34px; + padding: 6px 10px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + color: var(--text-strong); + font-size: 0.875rem; + text-align: center; +} + +.receipt-disclosure__chevron { + font-size: 1.15rem; + color: rgba(255, 255, 255, 0.7); + transition: transform 0.2s ease; +} + +.receipt-disclosure.is-open .receipt-disclosure__chevron { + transform: rotate(180deg); +} + +@media (max-width: 575.98px) { + .receipt-disclosure__content { + padding: 14px; + gap: 12px; + } + + .receipt-disclosure__icon { + width: 42px; + height: 42px; + border-radius: 12px; + } + + .receipt-disclosure__meta { + gap: 10px; + } + + .receipt-disclosure__title { + font-size: 0.95rem; + } +} diff --git a/shopping_app/static/js/receipt_section.js b/shopping_app/static/js/receipt_section.js index 6a8b271..73caa51 100644 --- a/shopping_app/static/js/receipt_section.js +++ b/shopping_app/static/js/receipt_section.js @@ -1,39 +1,55 @@ document.addEventListener("DOMContentLoaded", function () { const receiptSection = document.getElementById("receiptSection"); - const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]'); + const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]'); - if (!receiptSection || !toggleBtn) return; + if (!receiptSection || !toggleEl) return; + + const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false }); if (localStorage.getItem("receiptSectionOpen") === "true") { - new bootstrap.Collapse(receiptSection, { toggle: true }); + collapse.show(); } - receiptSection.addEventListener('shown.bs.collapse', function () { - localStorage.setItem("receiptSectionOpen", "true"); - }); - - receiptSection.addEventListener('hidden.bs.collapse', function () { - localStorage.setItem("receiptSectionOpen", "false"); - }); -}); - -document.addEventListener("DOMContentLoaded", function () { - const btn = document.getElementById("toggleReceiptBtn"); - const target = document.querySelector(btn.getAttribute("data-bs-target")); + const titleEl = toggleEl.querySelector(".receipt-disclosure__title"); function updateUI() { - const isShown = target.classList.contains("show"); - btn.innerHTML = isShown - ? "📄 Ukryj sekcję paragonów" - : "📄 Pokaż sekcję paragonów"; + const isShown = receiptSection.classList.contains("show"); - btn.classList.toggle("active", isShown); - btn.classList.toggle("btn-outline-light", !isShown); - btn.classList.toggle("btn-secondary", isShown); + toggleEl.classList.toggle("is-open", isShown); + toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false"); + + if (titleEl) { + titleEl.textContent = isShown + ? "Ukryj sekcję paragonów" + : "Pokaż sekcję paragonów"; + } } - target.addEventListener("shown.bs.collapse", updateUI); - target.addEventListener("hidden.bs.collapse", updateUI); + function toggleSection() { + collapse.toggle(); + } + + toggleEl.addEventListener("click", function (event) { + event.preventDefault(); + toggleSection(); + }); + + toggleEl.addEventListener("keydown", function (event) { + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + toggleSection(); + } + }); + + receiptSection.addEventListener("shown.bs.collapse", function () { + localStorage.setItem("receiptSectionOpen", "true"); + updateUI(); + }); + + receiptSection.addEventListener("hidden.bs.collapse", function () { + localStorage.setItem("receiptSectionOpen", "false"); + updateUI(); + }); updateUI(); -}); \ No newline at end of file +}); diff --git a/shopping_app/templates/list_share.html b/shopping_app/templates/list_share.html index 38b3d8c..a798c72 100644 --- a/shopping_app/templates/list_share.html +++ b/shopping_app/templates/list_share.html @@ -138,10 +138,20 @@ 💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN

- +
+ +
+
Strefa paragonów
+
Pokaż sekcję paragonów
+
+
+ {{ receipts|length }} + +
+
+
{% set receipt_pattern = 'list_' ~ list.id %}