gru/lista_zakupowa_live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

kropka kategorii na malych ekranach

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-01-21 11:11:22 +01:00
parent 43b5312e35
commit 34cfde795a
2 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/style.css
View File

@@ -993,13 +993,29 @@ td select.tom-dark {
.user-label-mobile { display: none !important; }
}
.badge.rounded-circle.category-dot {
min-width: 0.75rem !important;
padding: 0 !important;
font-size: 0 !important;
.category-dot {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
border: 2px solid rgba(255, 255, 255, 0.8) !important;
background-clip: content-box !important;
vertical-align: middle !important;
margin-right: 2px !important;
opacity: 1 !important;
font-size: 8px !important;
line-height: 1 !important;
cursor: help !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
/* Hover efekt */
.category-dot:hover {
transform: scale(1.3) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.list-title {
white-space: nowrap !important;
overflow: hidden !important;

32
templates/main.html
View File

@@ -84,14 +84,18 @@
</a>
{% for cat in l.category_badges %}
<span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
<!-- DESKTOP: nazwa kategorii -->
<span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
{{ cat.name }}
</span>
<span class="badge rounded-circle ms-1 d-sm-none category-dot"
style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }};
border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
<!-- MOBILE: DUŻA kolorowa kropka -->
<span class="ms-1 d-sm-none category-dot"
style="background-color: {{ cat.color }};"
title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
●
</span>
{% endfor %}
</span>
@@ -195,14 +199,18 @@
</a>
{% for cat in l.category_badges %}
<span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline"
style="background-color: {{ cat.color }}; font-size: 0.56rem; opacity: 0.85;">
<!-- DESKTOP: nazwa kategorii -->
<span class="badge rounded-pill text-dark ms-1 d-none d-sm-inline fw-semibold"
style="background-color: {{ cat.color }}; font-size: 0.7rem; opacity: 0.9; padding: 0.3em 0.6em;">
{{ cat.name }}
</span>
<span class="badge rounded-circle ms-1 d-sm-none category-dot"
style="width: 0.75rem; height: 0.75rem; background-color: {{ cat.color }};
border: 1px solid rgba(255,255,255,0.4); opacity: 0.95;"
title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}"></span>
<!-- MOBILE: DUŻA kolorowa kropka -->
<span class="ms-1 d-sm-none category-dot"
style="background-color: {{ cat.color }};"
title="{{ cat.name }}" aria-label="Kategoria: {{ cat.name }}">
●
</span>
{% endfor %}
</span>