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

poprawka dla malych ekranow

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-01-13 08:26:51 +01:00
parent b92127070b
commit 71233ebb75
1 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
static/css/style.css
View File

@@ -856,33 +856,48 @@ td select.tom-dark {
.sens-mid { background: rgba(13,110,253,.25); color: #9ec5fe; } /* niebieski */
.sens-high { background: rgba(220,53,69,.25); color: #f1aeb5; } /* czerwony */
/* Responsive buttons - hide text on narrow screens (iPhone 11, iPhone 17 Pro) */
/* =========================================================
COMPACT: przyciski akcji na listach (jak navbar)
(podmień za stary blok .btn-group-compact)
========================================================= */
/* Bazowo (wszystkie ekrany): trochę ciaśniej niż Bootstrap */
.btn-group-compact .btn {
padding: 0.25rem 0.5rem;
line-height: 1.1;
}
/* Wąskie ekrany (iPhone 11 / węższe) */
@media (max-width: 420px) {
.btn-group-compact {
flex-wrap: nowrap;
}
.btn-group-compact .btn-text {
display: none !important;
}
.btn-group-compact .btn {
padding: 0.375rem 0.5rem;
padding: 0.22rem 0.45rem; /* jak navbar */
min-width: auto;
font-size: 0.9rem; /* emoji czytelne */
line-height: 1.1;
}
}
/* Medium-narrow screens - smaller font */
/* Medium-narrow screens */
@media (min-width: 421px) and (max-width: 576px) {
.btn-group-compact .btn {
padding: 0.375rem 0.45rem;
font-size: 0.8rem;
padding: 0.24rem 0.45rem; /* ciaśniej */
font-size: 0.82rem;
line-height: 1.1;
}
.btn-group-compact .btn-text {
font-size: 0.75rem;
}
}
/* ================================================
RESPONSIVE NAVBAR - ukryj tekst na małych ekranach
================================================ */
/* ================================================
RESPONSIVE NAVBAR - zachowaj teksty, ale mniejsze
@@ -892,12 +907,12 @@ td select.tom-dark {
@media (max-width: 420px) {
/* Navbar: zmniejsz odstępy w poziomie */
.navbar .container-fluid {
gap: 6px;
gap: 4px;
}
/* Logo: zostaje "Lista Zakupów", ale mniejsze */
.navbar-brand-compact {
font-size: 1.05rem !important;
font-size: 0.9rem !important;
margin-right: 0.25rem;
white-space: nowrap;
}
@@ -905,10 +920,9 @@ td select.tom-dark {
font-size: 0.95em;
}
/* Info o użytkowniku: zostaje "Zalogowany:", ale mniejsze + bez zawijania */
.user-info-compact {
font-size: 0.72rem !important;
line-height: 1.1;
line-height: 0.9;
white-space: nowrap;
}
.user-info-compact .badge {
@@ -931,6 +945,7 @@ td select.tom-dark {
}
}
/* Małe ekrany (np. 421-576px) */
@media (min-width: 421px) and (max-width: 576px) {
.navbar .container-fluid {
@@ -962,5 +977,3 @@ td select.tom-dark {
font-size: 0.75rem;
}
}
}