From 3901cc152e8e3504267152d10cc8c6c91db5fd2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Gruszczy=C5=84ski?= Date: Tue, 13 Jan 2026 09:03:05 +0100 Subject: [PATCH] poprawka dla malych ekranow --- static/css/style.css | 44 +++++++------- templates/main.html | 140 ++++++++++++------------------------------- 2 files changed, 62 insertions(+), 122 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index b644d70..3841a6c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -857,32 +857,36 @@ td select.tom-dark { .sens-high { background: rgba(220,53,69,.25); color: #f1aeb5; } /* czerwony */ /* ========================================================= - COMPACT: przyciski akcji na listach (jak navbar) - (podmień za stary blok .btn-group-compact) + COMPACT: przyciski akcji na listach + - Desktop: standard Bootstrap + - <=576px: kompakt ========================================================= */ -/* Bazowo (wszystkie ekrany): trochę ciaśniej niż Bootstrap */ -.btn-group-compact .btn { - padding: 0.25rem 0.5rem; +/* <=420px: tylko emoji */ +@media (max-width: 420px) { + .btn-group-compact .btn-text { + display: none !important; + } + + .btn-group-compact .btn { + padding: 0.22rem 0.45rem; + min-width: auto; + font-size: 0.9rem; line-height: 1.1; + } } -/* Wąskie ekrany (iPhone 11 / węższe) */ -@media (max-width: 420px) { - .btn-group-compact { - flex-wrap: nowrap; - } +/* 421–576px: lekko ciaśniej, ale tekst zostaje */ +@media (min-width: 421px) and (max-width: 576px) { + .btn-group-compact .btn { + padding: 0.25rem 0.5rem; + font-size: 0.82rem; + line-height: 1.1; + } - .btn-group-compact .btn-text { - display: none !important; - } - - .btn-group-compact .btn { - padding: 0.22rem 0.45rem; /* jak navbar */ - min-width: auto; - font-size: 0.9rem; /* emoji czytelne */ - line-height: 1.1; - } + .btn-group-compact .btn-text { + font-size: 0.75rem; + } } /* Medium-narrow screens */ diff --git a/templates/main.html b/templates/main.html index 74f4388..421201c 100644 --- a/templates/main.html +++ b/templates/main.html @@ -31,10 +31,8 @@ {% endif %} -{% set month_names = ["styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień", -"październik", "listopad", "grudzień"] %} +{% set month_names = ["styczeń","luty","marzec","kwiecień","maj","czerwiec","lipiec","sierpień","wrzesień","październik","listopad","grudzień"] %} -
-
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%) - {% if l.total_expense > 0 %} - — 💸 {{ '%.2f'|format(l.total_expense) }} PLN - {% endif %} + {% if l.total_expense > 0 %} — 💸 {{ '%.2f'|format(l.total_expense) }} PLN{% endif %} @@ -180,40 +171,42 @@ {{ l.title }} (Autor: {{ l.owner.username if l.owner else '—' }}) {% for cat in l.category_badges %} - + {{ cat.name }} {% endfor %} - -
- - ✏️ Odznaczaj - -
+
+ + ✏️ Odznaczaj + +
- -
- - ✏️ Odznaczaj - -
+
+ + ✏️ Odznaczaj + +
+ {# <-- TO DOMKNIĘCIE U CIEBIE BRAKOWAŁO #}
+ style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" + aria-valuemin="0" aria-valuemax="100">
{% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
+ style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" + aria-valuemin="0" aria-valuemax="100">
+ style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%" + aria-valuemin="0" aria-valuemax="100"> Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%) @@ -227,64 +220,7 @@

Brak list do wyświetlenia

{% endif %} - - - - + {% block scripts %}