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:18:49 +01:00
parent c22a59c70c
commit b92127070b
1 changed files with 61 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
static/css/style.css
View File

@@ -884,67 +884,83 @@ td select.tom-dark {
RESPONSIVE NAVBAR - ukryj tekst na małych ekranach
================================================ */
/* Bardzo małe ekrany (iPhone 11, iPhone 17 Pro) - tylko emoji w navbar */
/* ================================================
RESPONSIVE NAVBAR - zachowaj teksty, ale mniejsze
================================================ */
/* Wąskie ekrany (np. iPhone 11) */
@media (max-width: 420px) {
/* Ukryj teksty w przyciskach nawigacji */
/* Navbar: zmniejsz odstępy w poziomie */
.navbar .container-fluid {
gap: 6px;
}
/* Logo: zostaje "Lista Zakupów", ale mniejsze */
.navbar-brand-compact {
font-size: 1.05rem !important;
margin-right: 0.25rem;
white-space: nowrap;
}
.navbar-brand-compact .navbar-brand-text {
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;
white-space: nowrap;
}
.user-info-compact .badge {
font-size: 0.68rem;
padding: 0.2rem 0.45rem;
}
/* Przyciski po prawej: tylko emoji (tekst chowamy) */
.nav-buttons-compact .nav-btn-text {
display: none !important;
}
/* Zmniejsz padding przycisków */
.nav-buttons-compact .btn {
padding: 0.25rem 0.5rem;
min-width: auto;
.nav-buttons-compact {
gap: 0.35rem !important;
flex-wrap: nowrap;
}
/* Zmniejsz logo - ukryj słowo "Lista" */
.nav-buttons-compact .btn {
padding: 0.22rem 0.45rem;
min-width: auto;
line-height: 1.1;
}
}
/* Małe ekrany (np. 421-576px) */
@media (min-width: 421px) and (max-width: 576px) {
.navbar .container-fluid {
gap: 8px;
}
.navbar-brand-compact {
font-size: 1.25rem !important;
white-space: nowrap;
}
.navbar-brand-text {
display: none !important;
}
/* Ukryj "Zalogowany:" / "Przeglądasz jako" tekst */
.user-info-compact .user-info-label {
display: none !important;
}
/* Zmniejsz badge użytkownika */
.user-info-compact .badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
}
}
/* Średnio-małe ekrany (421-576px) - mniejszy font */
@media (min-width: 421px) and (max-width: 576px) {
.navbar-brand-compact {
font-size: 1.5rem !important;
.user-info-compact {
font-size: 0.8rem !important;
white-space: nowrap;
}
.user-info-compact .badge {
font-size: 0.75rem;
}
/* Tu tekst w przyciskach może zostać (ale mniejszy) */
.nav-buttons-compact {
flex-wrap: nowrap;
}
.nav-buttons-compact .btn {
font-size: 0.8rem;
padding: 0.25rem 0.4rem;
padding: 0.25rem 0.45rem;
}
.nav-buttons-compact .nav-btn-text {
font-size: 0.75rem;
}
.user-info-compact {
font-size: 0.75rem;
}
}
/* Średnie ekrany (577-768px) - lekko zmniejszone */
@media (min-width: 577px) and (max-width: 768px) {
.navbar-brand-compact {
font-size: 1.75rem !important;
}
.nav-buttons-compact .btn {
font-size: 0.85rem;
}
}