Browse Source

Add responsive breakpoints for IoT Hub home page matching design

- LG (1600px): 4-col big cards, 2-col compact cards
- MD (1280px): 3-col big cards, 1-col compact, 2-col categories, hero 40px title
- SM (960px): 2-col big cards, smaller floating icons
- XS (600px): single-col categories, hidden floating icons, reduced padding
- Search page: propagate search to type pages, mat-select paginator
pull/15508/head
Igor Kulikov 6 months ago
parent
commit
b5c85c62c7
  1. 100
      ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss

100
ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss

@ -606,10 +606,12 @@
animation: iot-hub-fade-slide-up 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both; animation: iot-hub-fade-slide-up 1s cubic-bezier(0.19, 1, 0.22, 1) 0.2s both;
} }
// Responsive // Responsive — breakpoints from design: LG=1280, MD=960, SM=600, XS=375
@media (max-width: 1200px) {
// LG: 1280px content area (sidebar present)
@media (max-width: 1600px) {
.tb-iot-hub-big-cards-row { .tb-iot-hub-big-cards-row {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
} }
.tb-iot-hub-compact-cards-grid { .tb-iot-hub-compact-cards-grid {
@ -617,24 +619,106 @@
} }
} }
@media (max-width: 900px) { // MD: 960px viewport — sidebar present, narrower content
@media (max-width: 1280px) {
.tb-iot-hub-big-cards-row {
grid-template-columns: repeat(3, 1fr);
}
.tb-iot-hub-compact-cards-grid {
grid-template-columns: repeat(1, 1fr);
}
.tb-iot-hub-categories { .tb-iot-hub-categories {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
.tb-iot-hub-category-card { .tb-iot-hub-category-card {
height: 180px; height: 189px;
} }
} }
.tb-iot-hub-hero {
padding: 100px 24px 60px;
}
.tb-iot-hub-hero-title {
font-size: 40px;
}
.tb-iot-hub-hero-subtitle {
font-size: 18px;
line-height: 22px;
}
.tb-iot-hub-section {
padding: 0 24px;
}
.tb-iot-hub-become-creator {
padding: 64px 24px;
}
}
// SM: 600px viewport — sidebar hidden, full width
@media (max-width: 960px) {
.tb-iot-hub-big-cards-row { .tb-iot-hub-big-cards-row {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.tb-iot-hub-hero-title { .tb-iot-hub-categories {
font-size: 36px; .tb-iot-hub-category-card {
height: 168px;
}
}
.tb-iot-hub-hero-float-icon {
width: 51px;
height: 51px;
img {
width: 51px;
height: 51px;
}
}
}
// XS: 375px viewport — single column, stacked layout
@media (max-width: 600px) {
:host {
padding: 8px;
} }
.tb-iot-hub-hero { .tb-iot-hub-hero {
padding: 80px 24px 40px; padding: 80px 16px 40px;
}
.tb-iot-hub-categories {
grid-template-columns: 1fr;
padding-bottom: 32px;
.tb-iot-hub-category-card {
height: 197px;
}
}
.tb-iot-hub-big-cards-row {
grid-template-columns: repeat(2, 1fr);
}
.tb-iot-hub-section {
padding: 0 16px;
}
.tb-iot-hub-become-creator {
padding: 48px 16px;
}
.tb-iot-hub-hero-float-icon {
display: none;
}
.tb-iot-hub-installed-btn {
top: 12px;
right: 12px;
} }
} }

Loading…
Cancel
Save