dm/fuz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style modal i poprawa card na telefonie

Browse Source
This commit is contained in:
dm
2025-12-11 18:34:57 +01:00
parent b1d288dce8
commit 51ab1e8b2f
3 changed files with 87 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/styles/offers/offers-table.css
View File

@@ -12,10 +12,14 @@
padding: 0 1rem;
}
/* KARTA – POPRAWIONA, BEZ width/max-width/flex 1 1 300px */
/* -----------------------------
KARTA – MOBILE FIRST
------------------------------ */
/* MOBILE: każda karta ~pełna szerokość */
.f-card {
flex: 0 1 320px;
flex: 1 1 100%;
max-width: 26rem; /* możesz dać 100%, jeśli chcesz naprawdę full */
@apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border]
rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
}
@@ -56,7 +60,7 @@
.f-card-row {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
gap: 0.75rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--f-offers-border);
@@ -83,64 +87,55 @@
@apply text-red-600 opacity-60;
}
/* -----------------------------
INTELIGENTNY UKŁAD KART
INTELIGENTNY UKŁAD – OD MD↑
------------------------------ */
/* DOMYŚLNE: responsywnie */
.f-card {
flex: 1 1 300px;
max-width: 360px;
}
@media (min-width: 768px) {
/* DOMYŚLNE: responsywnie */
.f-card {
flex: 1 1 300px;
max-width: 360px;
}
/* LICZNIK KART */
.f-offers-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}
/* 4 karty → 2 + 2 */
.f-count-4 .f-card {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* --- UKŁAD SPECJALNY --- */
/* 5 kart → 3 + 2 */
.f-count-5 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-5 .f-card:nth-child(n + 4) {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* 4 karty → 2 + 2 */
.f-count-4 .f-card {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* 7 kart → 3 + 3 + 1 (środek) */
.f-count-7 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-7 .f-card:last-child {
flex: 0 1 calc(33% - 2rem);
margin-left: auto;
margin-right: auto;
}
/* 5 kart → 3 + 2 */
.f-count-5 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-5 .f-card:nth-child(n+4) {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* 8 kart → 3 + 3 + 2 */
.f-count-8 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-8 .f-card:nth-child(n + 7) {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* 7 kart → 3 + 3 + 1 (środek) */
.f-count-7 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-7 .f-card:last-child {
flex: 0 1 calc(33% - 2rem);
margin-left: auto;
margin-right: auto;
}
/* 8 kart → 3 + 3 + 2 */
.f-count-8 .f-card {
flex: 0 1 calc(33% - 2rem);
}
.f-count-8 .f-card:nth-child(n+7) {
flex: 0 1 calc(50% - 2rem);
max-width: 420px;
}
/* 10 kart → 3 + 3 + 3 + 1 */
.f-count-10 .f-card:last-child {
flex: 0 1 calc(33% - 2rem);
margin-left: auto;
margin-right: auto;
/* 10 kart → 3 + 3 + 3 + 1 */
.f-count-10 .f-card:last-child {
flex: 0 1 calc(33% - 2rem);
margin-left: auto;
margin-right: auto;
}
}