kropka kategorii na malych ekranach

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

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>