zmiany w ux

static/css/custom.css

@@ -304,3 +304,81 @@ select.form-select:focus {
 .CodeMirror-cursor {
     border-left: 1px solid #e0e0e0 !important;
 }
+
+.nav-pills .nav-link.active {
+    background: var(--accent);
+    color: #111;
+}
+
+.nav-pills .nav-link {
+    color: inherit;
+}
+
+/* sticky tylko od md wzwyż, by na mobile nie przyklejać */
+@media (min-width: 768px) {
+    .sticky-md {
+        position: sticky;
+    }
+}
+
+:root {
+    --sticky-offset: 1rem;
+}
+
+/* Rząd kopiowania: czytelny, łatwy klik w przycisk */
+.copy-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto;
+    gap: .25rem .5rem;
+    align-items: center;
+    padding: .5rem .75rem;
+    border: 1px solid var(--border, rgba(255, 255, 255, .15));
+    border-radius: .75rem;
+    background: rgba(255, 255, 255, .02);
+}
+
+.copy-row+.copy-row {
+    margin-top: .5rem;
+}
+
+.copy-row__label {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    font-weight: 600;
+    font-size: .9rem;
+    opacity: .85;
+}
+
+.copy-row__value {
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+    letter-spacing: .02em;
+    user-select: text;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.copy-row__btn {
+    grid-column: 2 / 3;
+    grid-row: 1 / 3;
+    height: fit-content;
+    align-self: center;
+}
+
+@media (max-width: 575.98px) {
+
+    /* na XS przycisk pod spodem – łatwiej trafić kciukiem */
+    .copy-row {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+    }
+
+    .copy-row__btn {
+        grid-column: 1 / -1;
+        grid-row: 3 / 4;
+        width: 100%;
+    }
+}

static/js/edytuj_stan.js

@@ -26,15 +26,20 @@
         const val = clamp(Number(input.value));
         const p = Math.max(0, Math.min(100, pct(val)));
 
-        if (previewPct) previewPct.textContent = pct(val).toFixed(1);
+        if (previewPct) previewPct.textContent = p.toFixed(1);
-        if (previewBar) previewBar.style.setProperty('--progress-width', p + '%');
+
+        if (previewBar) {
+            previewBar.style.width = p + '%';
+            previewBar.setAttribute('aria-valuenow', p.toFixed(2));
+        }
 
         if (previewNote) {
             if (cel > 0) {
                 const diff = cel - val;
-                if (diff > 0) {
+                const isZero = Math.abs(diff) < 0.005; // float-safe
+                if (diff > 0 && !isZero) {
                     previewNote.textContent = 'Do celu brakuje: ' + diff.toFixed(2) + ' PLN';
-                } else if (diff === 0) {
+                } else if (isZero) {
                     previewNote.textContent = 'Cel osiągnięty.';
                 } else {
                     previewNote.textContent = 'Przekroczono cel o: ' + Math.abs(diff).toFixed(2) + ' PLN';
@@ -45,6 +50,7 @@
         }
     }
 
+
     // Zmiana ręczna
     if (input) {
         input.addEventListener('input', updatePreview);

static/js/zbiorka.js

@@ -1,37 +1,65 @@
+
 (function () {
-    const ibanEl = document.getElementById('ibanDisplay');
+    // --- Formatowanie IBAN ---
+    const ibanEl = document.getElementById('ibanInput') || document.getElementById('ibanDisplay');
     if (ibanEl) {
-        const digits = (ibanEl.textContent || '').replace(/\s+/g, '').replace(/^PL/i, '').replace(/\D/g, '').slice(0, 26);
+        const raw = (('value' in ibanEl ? ibanEl.value : ibanEl.textContent) || '')
-        if (digits) ibanEl.textContent = 'PL ' + digits.replace(/(.{4})/g, '$1 ').trim();
+            .toString().replace(/\s+/g, '').toUpperCase();
+        const digits = raw.replace(/^PL/, '').replace(/\D/g, '').slice(0, 26);
+        if (digits) {
+            const pretty = 'PL ' + digits.replace(/(.{4})/g, '$1 ').trim();
+            if ('value' in ibanEl) ibanEl.value = pretty; else ibanEl.textContent = pretty;
         }
-    const blikEl = document.getElementById('blikDisplay');
-    if (blikEl) {
-        const d = (blikEl.textContent || '').replace(/\D/g, '').slice(0, 9);
-        const parts = [d.slice(0, 3), d.slice(3, 6), d.slice(6, 9)].filter(Boolean).join(' ');
-        if (parts) blikEl.textContent = parts;
     }
 
-    document.querySelectorAll('[data-copy-target]').forEach(btn => {
+    // --- Formatowanie BLIK ---
+    const blikEl = document.getElementById('blikInput') || document.getElementById('blikDisplay');
+    if (blikEl) {
+        const raw = (('value' in blikEl ? blikEl.value : blikEl.textContent) || '')
+            .toString().replace(/\D/g, '').slice(0, 9);
+        if (raw) {
+            const pretty = [raw.slice(0, 3), raw.slice(3, 6), raw.slice(6, 9)]
+                .filter(Boolean).join(' ');
+            if ('value' in blikEl) blikEl.value = pretty; else blikEl.textContent = pretty;
+        }
+    }
+
+    // --- Kopiowanie: wspiera data-copy-input i data-copy-target ---
+    const buttons = document.querySelectorAll('[data-copy-input], [data-copy-target]');
+    buttons.forEach(btn => {
         btn.addEventListener('click', async () => {
-            const sel = btn.getAttribute('data-copy-target');
+            const sel = btn.getAttribute('data-copy-input') || btn.getAttribute('data-copy-target');
             const el = sel ? document.querySelector(sel) : null;
             if (!el) return;
-            const raw = el.textContent.replace(/\u00A0/g, ' ').trim();
+
+            const textRaw = ('value' in el ? el.value : el.textContent || '')
+                .toString().replace(/\u00A0/g, ' ').trim();
+
+            const copyWithFallback = async (text) => {
                 try {
-                await navigator.clipboard.writeText(raw);
+                    await navigator.clipboard.writeText(text);
+                    return true;
+                } catch {
+                    // Fallback: tymczasowy textarea
+                    const ta = document.createElement('textarea');
+                    ta.value = text;
+                    ta.style.position = 'fixed';
+                    ta.style.top = '-1000px';
+                    ta.setAttribute('readonly', '');
+                    document.body.appendChild(ta);
+                    ta.select();
+                    try { document.execCommand('copy'); } catch { /* ignore */ }
+                    document.body.removeChild(ta);
+                    return true;
+                }
+            };
+
             const original = btn.textContent;
+            const ok = await copyWithFallback(textRaw);
+            if (ok) {
                 btn.textContent = 'Skopiowano!';
                 btn.disabled = true;
                 setTimeout(() => { btn.textContent = original; btn.disabled = false; }, 1200);
-            } catch {
-                // fallback
-                const r = document.createRange();
-                r.selectNodeContents(el);
-                const selObj = window.getSelection();
-                selObj.removeAllRanges();
-                selObj.addRange(r);
-                try { document.execCommand('copy'); } catch { }
-                selObj.removeAllRanges();
             }
         });
     });

templates/admin/edytuj_stan.html

@@ -81,10 +81,7 @@
             <button type="button" class="btn btn-sm btn-outline-light border btn-set"
               data-value="{{ zbiorka.cel|round(2) }}">Ustaw: do celu</button>
             {% set brakujace = (zbiorka.cel - zbiorka.stan) if (zbiorka.cel - zbiorka.stan) > 0 else 0 %}
-            {% if brakujace > 0 %}
+
-            <span class="badge bg-dark border" style="border-color: var(--border);">Brakuje: {{ brakujace|round(2) }}
-              PLN</span>
-            {% endif %}
             {% endif %}
             <button type="button" class="btn btn-sm btn-outline-light border btn-set" data-value="0">Ustaw: 0</button>
           </div>
@@ -105,8 +102,7 @@
               </div>
               <div class="mt-2">
                 <div class="progress" aria-hidden="true">
-                  <div class="progress-bar" style="width: {{ progress_clamped }}%;"></div>
+                  <div id="previewBar" class="progress-bar" style="width: {{ progress_clamped }}%;"></div>
-
                 </div>
                 <small class="text-muted d-block mt-1" id="previewNote">
                   {% if has_cel %}

templates/index.html

@@ -8,18 +8,19 @@ zbiórki{% endif %}{% endblock %}
 
 <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
     <h2 class="mb-0">
-        {% if is_completed_view %}Zrealizowane zbiórki{% else %}Aktualnie aktywne zbiórki{% endif %}
+        {% if is_completed_view %}Zrealizowane zbiórki{% else %}Aktywne zbiórki{% endif %}
     </h2>
     <ul class="nav nav-pills">
         <li class="nav-item">
-            <a class="nav-link {% if not is_completed_view %}active{% endif %}"
+            <a class="nav-link {% if not is_completed_view %}active bg-secondary text-light{% endif %}"
                 href="{{ url_for('index') }}">Aktywne</a>
         </li>
         <li class="nav-item">
-            <a class="nav-link {% if is_completed_view %}active{% endif %}"
+            <a class="nav-link {% if is_completed_view %}active bg-secondary text-light{% endif %}"
                 href="{{ url_for('zbiorki_zrealizowane') }}">Zrealizowane</a>
         </li>
     </ul>
+
 </div>
 
 {% if zbiorki and zbiorki|length > 0 %}
@@ -46,14 +47,15 @@ zbiórki{% endif %}{% endblock %}
                         Cel: {{ z.cel|round(2) }} PLN
                     </span>
                     {% endif %}
-                    <span class="badge bg-dark border" style="border-color: var(--border);">
+                    <span class="badge bg-dark border border-success" style="border-color: var(--border);">
                         Stan: {{ z.stan|round(2) }} PLN
                     </span>
 
                     {% if z.cel > 0 %}
                     {% set delta = z.cel - z.stan %}
                     {% if delta > 0 %}
-                    <span class="badge bg-dark border" style="border-color: var(--border);">
+                    {# CHANGE: mocniejszy badge „Brakuje” #}
+                    <span class="badge bg-dark border border-warning">
                         Brakuje: {{ delta|round(2) }} PLN
                     </span>
                     {% elif delta < 0 %} <span class="badge bg-dark border" style="border-color: var(--border);">
@@ -66,7 +68,6 @@ zbiórki{% endif %}{% endblock %}
                         {% endif %}
                 </div>
 
-
                 <div class="mb-1">
                     <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"
                         aria-valuenow="{{ progress_clamped|round(2) if not z.ukryj_kwote else '' }}"
@@ -81,10 +82,13 @@ zbiórki{% endif %}{% endblock %}
                     {% endif %}
                 </div>
 
-
                 <div class="mt-auto pt-2">
                     <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="stretched-link"></a>
-                    <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-primary btn-sm">Szczegóły</a>
+                    <div class="d-grid">
+                        <a href="{{ url_for('zbiorka', zbiorka_id=z.id) }}" class="btn btn-outline-light btn-sm w-100">
+                            Szczegóły
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>

templates/zbiorka.html

@@ -159,69 +159,119 @@
 
       <!-- Kolumna prawa: płatności (sticky) -->
       <div class="col-md-4">
-        <div class="card shadow-sm wspomoz-card position-sticky" style="top: 1rem;">
+        <div class="card shadow-sm wspomoz-card sticky-md" style="top: var(--sticky-offset, 1rem);">
-          <div class="card-body">
+          <div class="card-body d-flex flex-column gap-3">
-            <div class="mb-3">
+
             <div class="d-flex align-items-center justify-content-between">
-                <strong>Numer konta</strong>
+              <h5 class="mb-0">Jak wspomóc?</h5>
-                <button class="btn btn-sm btn-outline-light border" type="button"
+              {% if has_cel and not zbiorka.ukryj_kwote %}
-                  data-copy-target="#ibanDisplay">Kopiuj</button>
+              {% set brak = (zbiorka.cel - zbiorka.stan) %}
+              {% if brak > 0 %}
+              <span class="badge bg-warning text-dark border border-warning">
+                Brakuje: {{ brak|round(2) }} PLN
+              </span>
+              {% else %}
+              <span class="badge rounded-pill" style="background: var(--accent); color:#111;">
+                Zrealizowana
+              </span>
+              {% endif %}
+              {% endif %}
             </div>
-              <div class="fs-5" id="ibanDisplay">{{ zbiorka.numer_konta }}</div>
+
+            <!-- Numer konta -->
+            <div>
+              <label for="ibanInput" class="form-label fw-semibold mb-1">Numer konta</label>
+              <div class="input-group">
+                <input id="ibanInput" type="text"
+                  class="form-control form-control-sm bg-transparent text-light border monospace-input text-truncate"
+                  value="{{ zbiorka.numer_konta }}" readonly autocomplete="off" autocorrect="off" autocapitalize="off"
+                  spellcheck="false" inputmode="text" aria-label="Numer konta do wpłaty">
+                <button class="btn btn-sm btn-outline-light border copy-btn" type="button" data-copy-input="#ibanInput"
+                  aria-label="Kopiuj numer konta">Kopiuj</button>
               </div>
-            <div class="mb-3">
-              <div class="d-flex align-items-center justify-content-between">
-                <strong>Telefon BLIK</strong>
-                <button class="btn btn-sm btn-outline-light border" type="button"
-                  data-copy-target="#blikDisplay">Kopiuj</button>
             </div>
-              <div class="fs-5" id="blikDisplay">{{ zbiorka.numer_telefonu_blik }}</div>
+
+            <!-- Telefon BLIK -->
+            <div>
+              <label for="blikInput" class="form-label fw-semibold mb-1">Telefon BLIK</label>
+              <div class="input-group">
+                <input id="blikInput" type="text"
+                  class="form-control form-control-sm bg-transparent text-light border monospace-input text-truncate"
+                  value="{{ zbiorka.numer_telefonu_blik }}" readonly autocomplete="off" autocorrect="off"
+                  autocapitalize="off" spellcheck="false" inputmode="numeric" aria-label="Telefon BLIK">
+                <button class="btn btn-sm btn-outline-light border copy-btn" type="button" data-copy-input="#blikInput"
+                  aria-label="Kopiuj numer BLIK">Kopiuj</button>
+              </div>
             </div>
 
             {% if not zbiorka.ukryj_kwote %}
-            <hr class="my-3">
+            <ul class="list-group list-group-flush small">
-            <div class="d-flex flex-column gap-1">
               {% if has_cel %}
-              <div><strong>Cel:</strong> <span class="fs-6">{{ zbiorka.cel|round(2) }} PLN</span></div>
+              <li class="list-group-item bg-transparent d-flex justify-content-between">
+                <span>Cel</span>
+                <span class="fw-semibold">{{ zbiorka.cel|round(2) }} PLN</span>
+              </li>
               {% endif %}
-              <div><strong>Stan:</strong> <span class="fs-6">{{ zbiorka.stan|round(2) }} PLN</span></div>
+              <li class="list-group-item bg-transparent d-flex justify-content-between">
+                <span>Stan</span>
+                <span class="fw-semibold text-success">{{ zbiorka.stan|round(2) }} PLN</span>
+              </li>
               {% if has_cel %}
-              {% set brak = (zbiorka.cel - zbiorka.stan) %}
+              <li class="list-group-item bg-transparent d-flex justify-content-between">
-              <small class="text-muted">
+                <span>
+                  {% if brak > 0 %}Brakuje{% elif brak == 0 %}Cel{% else %}Nadwyżka{% endif %}
+                </span>
+                <span class="fw-semibold {% if brak > 0 %}text-warning{% elif brak < 0 %}text-success{% endif %}">
                   {% if brak > 0 %}
-                Do celu brakuje: {{ brak|round(2) }} PLN
+                  {{ brak|round(2) }} PLN
                   {% elif brak == 0 %}
-                Cel osiągnięty.
+                  osiągnięty
                   {% else %}
-                Przekroczono cel o: {{ (brak * -1)|round(2) }} PLN
+                  {{ (-brak)|round(2) }} PLN
                   {% endif %}
-              </small>
+                </span>
+              </li>
               {% endif %}
+            </ul>
+            {% endif %}
+
+
+            {% if current_user.is_authenticated and current_user.is_admin %}
+            <hr>
+            <div class="d-grid gap-2 mt-2">
+              <a href="{{ url_for('dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Dodaj
+                wpłatę</a>
+              <a href="{{ url_for('dodaj_wydatek', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Dodaj
+                wydatek</a>
+              <a href="{{ url_for('edytuj_stan', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light btn-sm">Edytuj
+                stan</a>
+              <a href="{{ url_for('formularz_zbiorek', zbiorka_id=zbiorka.id) }}"
+                class="btn btn-outline-light btn-sm">Edytuj opis</a>
             </div>
             {% endif %}
 
-            {% if current_user.is_authenticated and current_user.is_admin %}
-            <div class="d-grid mt-3">
-              <a href="{{ url_for('dodaj_wplate', zbiorka_id=zbiorka.id) }}" class="btn btn-primary">Dodaj wpłatę</a>
-            </div>
-            <div class="d-grid mt-2">
-              <a href="{{ url_for('dodaj_wydatek', zbiorka_id=zbiorka.id) }}" class="btn btn-outline-light border">Dodaj
-                wydatek</a>
-            </div>
-            {% endif %}
-          </div>
           </div>
         </div>
       </div>
 
+
       <!-- Aktywność -->
       <div class="card shadow-sm mt-4">
-      <div class="card-header d-flex align-items-center justify-content-between">
+        <div class="card-header bg-transparent d-flex align-items-center justify-content-between">
           <h5 class="card-title mb-0">Aktywność / Transakcje</h5>
+          <div class="d-flex align-items-center gap-2">
             {% if aktywnosci and aktywnosci|length > 0 %}
             <small class="text-muted">Łącznie pozycji: {{ aktywnosci|length }}</small>
             {% endif %}
+            {% if current_user.is_authenticated and current_user.is_admin %}
+            <a href="{{ url_for('transakcje_zbiorki', zbiorka_id=zbiorka.id) }}"
+              class="btn btn-sm btn-outline-light border">
+              Zarządzaj
+            </a>
+            {% endif %}
           </div>
+        </div>
+
         <div class="card-body">
           {% if aktywnosci and aktywnosci|length > 0 %}
           <ul class="list-group list-group-flush">
@@ -253,6 +303,7 @@
         </div>
       </div>
 
+
       <!-- Akcje dolne -->
       <div class="d-flex gap-2 justify-content-between mt-3">
         <div></div>
@@ -266,4 +317,5 @@
     {{ super() }}
     <script src="{{ url_for('static', filename='js/zbiorka.js') }}?v={{ APP_VERSION }}"></script>
     <script src="{{ url_for('static', filename='js/progress.js') }}?v={{ APP_VERSION }}"></script>
+    <script src="{{ url_for('static', filename='js/progress.js') }}?v={{ APP_VERSION }}"></script>
     {% endblock %}