Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 01:18:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 59

Fleet UI: Responsive accommodations for 7 cards (#27644)

Browse source
This commit is contained in:
RachelElysia 2025-03-28 16:57:25 -04:00 committed by GitHub
parent fdf92541f8
commit f11a73dd53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 77 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/pages/DashboardPage/sections/PlatformHostCounts/_styles.scss
View file

@ -5,13 +5,23 @@
// >= 320px and < 480px
@media (min-width: $break-mobile-xs) {
grid-template-columns: repeat(2, 1fr);
// For odd number of cards, make the first one span 2 columns
& > :first-child:nth-child(odd) {
grid-column: span 2;
}
}
// >= 480px and < 880px
// >= 480px
@media (min-width: $break-mobile-sm) {
grid-template-columns: 1fr;
grid-template-rows: initial; // undo multi row
// For odd number of cards, undo first one spanning 2 columns
& > :first-child:nth-child(odd) {
grid-column: initial;
}
&:has(> :nth-child(2)) {
grid-template-columns: repeat(2, 1fr);
}
@ -29,15 +39,77 @@
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
}
// Special case for exactly 7 items
&:has(> :nth-child(7)) {
grid-template-columns: repeat(
6,
1fr
); // Make both rows span across 6 columns
grid-template-rows: auto auto auto; // Three rows
// Overridden at 576px
& > :nth-child(-n + 5) {
// First row (cards 1-4)
grid-column: span 3; // Each card spans 3 columns
}
// Overridden at 576px
& > :nth-child(n + 5) {
// Second row (cards 5-7)
grid-column: span 2; // Each card spans 4 columns
}
}
}
// > 576px
@media (min-width: $break-mobile-md) {
// Special case for exactly 7 items
&:has(> :nth-child(7)) {
grid-template-columns: repeat(
12,
1fr
); // Make both rows span across 12 columns
grid-template-rows: auto auto; // Two rows
// Overridden at 990px
& > :nth-child(-n + 4) {
// First row (cards 1-4)
grid-column: span 3; // Each card spans 3 columns
}
// Overridden at 990px
& > :nth-child(n + 5) {
// Second row (cards 5-7)
grid-column: span 4; // Each card spans 4 columns
}
}
}
// >= 880px
@media (min-width: $break-sm) {
&#{&} {
// Intentionally repeat classname to override break-xs selector specificity
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: none;
gap: $pad-medium;
// Apply to all cases except when there are exactly 7 items
&:not(:has(> :nth-child(7))) {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-template-rows: none;
gap: $pad-medium;
}
}
}
// >= 990px
@media (min-width: $break-md) {
// Special case for exactly 7 items
&:has(> :nth-child(7)) {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: auto;
// Must override specificity above
& > :nth-child(n + 5),
& > :nth-child(-n + 4) {
grid-column: span 1;
}
}
}
}