zmiany w ux

2025-09-24 10:55:04 +02:00
parent 8b6fb41a68
commit 4515a1b391
6 changed files with 294 additions and 130 deletions
--- a/static/css/custom.css
+++ b/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%;
+    }
+}
--- a/static/js/edytuj_stan.js
+++ b/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 (previewBar) previewBar.style.setProperty('--progress-width', p + '%');
+        if (previewPct) previewPct.textContent = p.toFixed(1);
+
+        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);
--- a/static/js/zbiorka.js
+++ b/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);
-        if (digits) ibanEl.textContent = 'PL ' + digits.replace(/(.{4})/g, '$1 ').trim();
+        const raw = (('value' in ibanEl ? ibanEl.value : ibanEl.textContent) || '')
+            .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();
            }
        });
    });
--- a/templates/admin/edytuj_stan.html
+++ b/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 %}
--- a/templates/index.html
+++ b/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>
--- a/templates/zbiorka.html
+++ b/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-body">
-            <div class="mb-3">
+        <div class="card shadow-sm wspomoz-card sticky-md" style="top: var(--sticky-offset, 1rem);">
+          <div class="card-body d-flex flex-column gap-3">
+
            <div class="d-flex align-items-center justify-content-between">
-                <strong>Numer konta</strong>
-                <button class="btn btn-sm btn-outline-light border" type="button"
-                  data-copy-target="#ibanDisplay">Kopiuj</button>
+              <h5 class="mb-0">Jak wspomóc?</h5>
+              {% if has_cel and not zbiorka.ukryj_kwote %}
+              {% 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">
-            <div class="d-flex flex-column gap-1">
+            <ul class="list-group list-group-flush small">
              {% 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) %}
-              <small class="text-muted">
+              <li class="list-group-item bg-transparent d-flex justify-content-between">
+                <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 %}