clean

shopping_app/static/css/style.css

@@ -5929,3 +5929,113 @@ body:not(.sorting-active) .drag-handle {
     right: 0;
   }
 }
+
+
+/* v5.2 create-list unity + receipt collapse fix */
+.endpoint-main_page .create-list-input-group {
+  display: flex;
+  flex-wrap: nowrap !important;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(7, 17, 31, 0.9);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-title-input,
+.endpoint-main_page .create-list-input-group > .form-control {
+  border: 0 !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-title-input:focus,
+.endpoint-main_page .create-list-input-group > .form-control:focus {
+  background: rgba(255, 255, 255, 0.02) !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+.endpoint-main_page .create-list-input-group > #tempToggle {
+  min-width: 9.5rem;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: rgba(255, 255, 255, 0.04) !important;
+  box-shadow: none !important;
+}
+
+.endpoint-main_page .create-list-input-group > .create-list-temp-toggle.is-active,
+.endpoint-main_page .create-list-input-group > #tempToggle.is-active {
+  background: rgba(41, 209, 125, 0.18) !important;
+}
+
+.endpoint-main_page .create-list-temp-toggle__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+}
+
+.endpoint-main_page .create-list-input-group:focus-within {
+  border-color: rgba(41, 209, 125, 0.55);
+  box-shadow: 0 0 0 0.18rem rgba(41, 209, 125, 0.12), 0 10px 28px rgba(0, 0, 0, 0.18);
+}
+
+.receipt-disclosure {
+  display: block;
+  padding: 0;
+  text-align: left;
+}
+
+.receipt-disclosure,
+.receipt-disclosure:hover,
+.receipt-disclosure:focus,
+.receipt-disclosure:active {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.receipt-disclosure:focus-visible {
+  outline: none;
+}
+
+.receipt-section--restoring {
+  transition: none !important;
+}
+
+@media (max-width: 767.98px) {
+  .endpoint-main_page .create-list-input-group {
+    border-radius: 14px;
+  }
+
+  .endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+  .endpoint-main_page .create-list-input-group > #tempToggle {
+    min-width: 8.25rem;
+    padding-left: .8rem;
+    padding-right: .8rem;
+    font-size: .9rem;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .endpoint-main_page .create-list-input-group > .create-list-title-input,
+  .endpoint-main_page .create-list-input-group > .form-control {
+    padding-left: .85rem;
+    padding-right: .7rem;
+    font-size: .95rem;
+  }
+
+  .endpoint-main_page .create-list-input-group > .create-list-temp-toggle,
+  .endpoint-main_page .create-list-input-group > #tempToggle {
+    min-width: 7.6rem;
+    font-size: .84rem;
+  }
+
+  .receipt-disclosure {
+    border-radius: 16px;
+  }
+}

shopping_app/static/js/functions.js

@@ -476,26 +476,6 @@ function updateListSmoothly(newItems) {
   applyHidePurchased();
 }
 
-
-document.addEventListener("DOMContentLoaded", function () {
-  const receiptSection = document.getElementById("receiptSection");
-  const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
-
-  if (!receiptSection || !toggleBtn) return;
-
-  if (localStorage.getItem("receiptSectionOpen") === "true") {
-    new bootstrap.Collapse(receiptSection, { toggle: true });
-  }
-
-  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 toggle = document.getElementById('hidePurchasedToggle');
   if (!toggle) return;

shopping_app/static/js/receipt_section.js

@@ -1,55 +1,54 @@
 document.addEventListener("DOMContentLoaded", function () {
   const receiptSection = document.getElementById("receiptSection");
-  const toggleEl = document.querySelector('[data-bs-target="#receiptSection"]');
+  const toggleEl = document.getElementById("toggleReceiptBtn");
 
-  if (!receiptSection || !toggleEl) return;
+  if (!receiptSection || !toggleEl || typeof bootstrap === "undefined") return;
+  if (receiptSection.dataset.receiptInit === "1") return;
+  receiptSection.dataset.receiptInit = "1";
 
+  const storageKey = receiptSection.dataset.receiptStorageKey || "receiptSectionOpen";
   const collapse = bootstrap.Collapse.getOrCreateInstance(receiptSection, { toggle: false });
-
-  if (localStorage.getItem("receiptSectionOpen") === "true") {
-    collapse.show();
-  }
-
   const titleEl = toggleEl.querySelector(".receipt-disclosure__title");
 
-  function updateUI() {
-    const isShown = receiptSection.classList.contains("show");
+  function isShown() {
+    return receiptSection.classList.contains("show");
+  }
 
-    toggleEl.classList.toggle("is-open", isShown);
-    toggleEl.setAttribute("aria-expanded", isShown ? "true" : "false");
+  function persist(state) {
+    localStorage.setItem(storageKey, state ? "true" : "false");
+  }
+
+  function updateUI() {
+    const shown = isShown();
+    toggleEl.classList.toggle("is-open", shown);
+    toggleEl.setAttribute("aria-expanded", shown ? "true" : "false");
 
     if (titleEl) {
-      titleEl.textContent = isShown
-        ? "Ukryj sekcję paragonów"
-        : "Pokaż sekcję paragonów";
+      titleEl.textContent = shown ? "Ukryj sekcję paragonów" : "Pokaż sekcję paragonów";
     }
   }
 
-  function toggleSection() {
+  toggleEl.addEventListener("click", function () {
     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");
+    persist(true);
     updateUI();
   });
 
   receiptSection.addEventListener("hidden.bs.collapse", function () {
-    localStorage.setItem("receiptSectionOpen", "false");
+    persist(false);
     updateUI();
   });
 
+  if (localStorage.getItem(storageKey) === "true") {
+    receiptSection.classList.add("receipt-section--restoring");
+    collapse.show();
+    requestAnimationFrame(function () {
+      receiptSection.classList.remove("receipt-section--restoring");
+    });
+  }
+
   updateUI();
 });

shopping_app/templates/list_share.html

@@ -138,22 +138,22 @@
   <b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN
 </p>
 
-<div id="toggleReceiptBtn" class="receipt-disclosure mb-3" role="button" tabindex="0"
-  data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
-  <div class="receipt-disclosure__content">
-    <div class="receipt-disclosure__icon" aria-hidden="true">🧾</div>
-    <div class="receipt-disclosure__text">
-      <div class="receipt-disclosure__eyebrow">Strefa paragonów</div>
-      <div class="receipt-disclosure__title">Pokaż sekcję paragonów</div>
-    </div>
-    <div class="receipt-disclosure__meta">
+<button id="toggleReceiptBtn" type="button" class="receipt-disclosure mb-3"
+  aria-expanded="false" aria-controls="receiptSection">
+  <span class="receipt-disclosure__content">
+    <span class="receipt-disclosure__icon" aria-hidden="true">🧾</span>
+    <span class="receipt-disclosure__text">
+      <span class="receipt-disclosure__eyebrow">Strefa paragonów</span>
+      <span class="receipt-disclosure__title">Pokaż sekcję paragonów</span>
+    </span>
+    <span class="receipt-disclosure__meta">
       <span class="receipt-disclosure__count">{{ receipts|length }}</span>
       <span class="receipt-disclosure__chevron" aria-hidden="true">⌄</span>
-    </div>
-  </div>
-</div>
+    </span>
+  </span>
+</button>
 
-<div class="collapse px-2 px-md-4" id="receiptSection">
+<div class="collapse px-2 px-md-4" id="receiptSection" data-receipt-storage-key="receiptSectionOpen:list:{{ list.id }}">
   {% set receipt_pattern = 'list_' ~ list.id %}
 
   <div class="receipt-section-stack d-flex flex-column gap-3 mt-3">

shopping_app/templates/main.html

@@ -29,12 +29,14 @@
         </div>
       </div>
       <form action="{{ url_for('create_list') }}" method="post">
-        <div class="input-group mb-3 create-list-input-group">
+        <div class="input-group mb-3 create-list-input-group" role="group" aria-label="Tworzenie nowej listy">
           <input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
-            class="form-control bg-dark text-white border-secondary">
+            class="form-control bg-dark text-white border-secondary create-list-title-input"
+            aria-label="Nazwa nowej listy">
           <button type="button" class="btn btn-outline-secondary create-list-temp-toggle" id="tempToggle" data-active="0"
-            data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
-            Tymczasowa
+            data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni"
+            aria-pressed="false" aria-label="Przełącz listę tymczasową">
+            <span class="create-list-temp-toggle__label">Tymczasowa</span>
           </button>
           <input type="hidden" name="temporary" id="temporaryHidden" value="0">
         </div>