diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss index 66fc802b9b..172b0a420a 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss @@ -20,6 +20,7 @@ .mat-mdc-dialog-content { position: relative; padding: 0; + overflow-x: hidden; @media #{$mat-gt-md} { width: 1000px; diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html index ea783f19f2..349e04f275 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html @@ -104,16 +104,9 @@ - -
-
- -
-
- + [autoFocus]="false" [(opened)]="filterDrawerOpened">
{{ 'iot-hub.filter' | translate }}
@if (hasActiveDropdownFilters()) { +
@for (key of getActiveSubtypesArray(); track key) { @@ -147,13 +141,22 @@
} +
- - + + +
+
+ +
+
+ + +
} +
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss index f5e6ff36d1..526b917297 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss @@ -50,6 +50,16 @@ .tb-iot-hub-content { display: flex; flex: 1; + background: transparent; + overflow: visible; + + .mat-drawer-backdrop { + bottom: -48px; + + &.mat-drawer-shown { + background: transparent; + } + } } // Left sidebar filters — Design: 280px wide, right border, own scroll @@ -73,6 +83,13 @@ overflow-y: auto; } +// Drawer content — holds desktop filters + results side by side +.tb-iot-hub-drawer-content { + display: flex; + flex: 1; + overflow: visible; +} + // Filter toggle button — hidden on large screens, shown on lt-lg .tb-iot-hub-filter-toggle-btn { display: none; @@ -84,16 +101,26 @@ width: 60%; max-width: 550px; min-width: 300px; + margin-bottom: -48px; + + .add-mode & { + margin-bottom: 0; + } } .tb-iot-hub-filter-drawer-header { display: flex; align-items: center; justify-content: space-between; - padding: 16px 16px 8px; + padding: 12px 12px 12px 24px; font-size: 18px; font-weight: 500; color: rgba(0, 0, 0, 0.87); + + .mat-mdc-icon-button { + --mat-icon-button-state-layer-size: 40px; + padding: 8px; + } } .tb-iot-hub-filter-drawer-chips { @@ -101,13 +128,25 @@ flex-wrap: wrap; align-items: center; gap: 8px; - padding: 0 16px 8px; + padding: 4px 24px 12px; } .tb-iot-hub-filter-drawer-body { overflow-y: auto; flex: 1; - padding: 0 8px; + padding: 8px 0 0; + + .tb-iot-hub-filters-inner { + padding: 12px 0; + } + + .tb-iot-hub-filter-panel.mat-expansion-panel .mat-expansion-panel-header { + padding-left: 24px; + } + + .tb-iot-hub-filter-panel.mat-expansion-panel mat-checkbox { + padding-left: 12px; + } } .tb-iot-hub-filters-inner { @@ -179,7 +218,8 @@ } // Results count — Design: 14px Medium, rgba(0,0,0,0.76), tracking 0.25 -.tb-iot-hub-results-count { +.tb-iot-hub-results-count, +.tb-iot-hub-results-count-mobile { font-size: 14px; font-weight: 500; line-height: 20px; @@ -187,6 +227,10 @@ color: rgba(0, 0, 0, 0.76); } +.tb-iot-hub-results-count-mobile { + display: none; +} + // Search field — Design: 320px, h-40, rounded-8, border rgba(0,0,0,0.12), white bg .tb-iot-hub-search-field { width: 320px; @@ -210,6 +254,7 @@ .tb-iot-hub-search-input { flex: 1; + min-width: 0; border: none; outline: none; font-size: 14px; @@ -286,15 +331,15 @@ } } -// Card grid — Design: 4 columns, gap 20px; compact: 3 columns +// Card grid — Design: 5 columns, gap 20px; compact: 4 columns .tb-iot-hub-card-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 8px 0 24px; &.tb-iot-hub-card-grid-compact { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); } } @@ -417,12 +462,12 @@ // Responsive -@media #{$mat-gt-xxl} { +@media #{$mat-lt-xxl} { .tb-iot-hub-card-grid { - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(4, 1fr); &.tb-iot-hub-card-grid-compact { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(3, 1fr); } } } @@ -448,10 +493,6 @@ } @media #{$mat-lt-lg} { - .tb-iot-hub-card-grid { - grid-template-columns: repeat(1, 1fr); - } - .tb-iot-hub-filters-desktop { display: none; } @@ -459,6 +500,31 @@ .tb-iot-hub-filter-toggle-btn { display: inline-flex; } + + .tb-iot-hub-results-count { + display: none; + } + + .tb-iot-hub-sort-row { + .tb-iot-hub-active-filters, + .tb-iot-hub-clear-btn { + display: none; + } + } + + .tb-iot-hub-results-count-mobile { + display: inline; + } + + .tb-iot-hub-results { + padding-left: 24px; + padding-right: 24px; + } + + .tb-iot-hub-pagination-pages { + position: static; + transform: none; + } } @media #{$mat-lt-md} { @@ -466,6 +532,36 @@ width: 100%; max-width: 100%; } + + .tb-iot-hub-search-field { + width: 200px; + } +} + +@media #{$mat-xs} { + .tb-iot-hub-card-grid { + grid-template-columns: repeat(1, 1fr); + } + + .tb-iot-hub-pagination { + flex-direction: column; + align-items: center; + gap: 24px; + } + + .tb-iot-hub-pagination-pages { + position: static; + transform: none; + } + + .tb-iot-hub-pagination-size { + margin-left: 0; + } + + .tb-iot-hub-results { + padding-left: 16px; + padding-right: 16px; + } } // Add mode responsive overrides diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss index b639426cae..db526c263b 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss @@ -25,6 +25,7 @@ background: white; border-radius: 8px; padding: 40px 40px 48px; + overflow: hidden; } // Back button diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss index be636fb1f2..48ac20121d 100644 --- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss +++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-items-page.component.scss @@ -25,6 +25,7 @@ background: white; border-radius: 8px; padding: 40px 40px 48px; + overflow: hidden; } // Hero section — flex row: left (back + text) and right (image), space-between @@ -45,7 +46,7 @@ } .tb-iot-hub-items-title { - font-size: 40px; + font-size: 36px; font-weight: 500; line-height: 48px; color: rgba(0, 0, 0, 0.87); @@ -121,3 +122,71 @@ tb-iot-hub-browse { margin: 0 0 32px; } } + +// Responsive +@media #{$mat-lt-lg} { + .tb-iot-hub-items-page { + padding-left: 24px; + padding-right: 24px; + } + + .tb-iot-hub-items-divider { + margin-left: -24px; + margin-right: -24px; + } + + tb-iot-hub-browse { + margin-left: -24px; + margin-right: -24px; + } + + .tb-iot-hub-items-title { + font-size: 28px; + line-height: 36px; + } + + .tb-iot-hub-items-desc { + font-size: 14px; + line-height: 20px; + } +} + +@media #{$mat-lt-xmd} { + .tb-iot-hub-items-hero { + gap: 24px; + } + + .tb-iot-hub-items-hero-image { + min-width: 0; + flex: 1; + + img { + min-width: 0; + margin-left: auto; + margin-top: auto; + } + } +} + +@media #{$mat-lt-md} { + .tb-iot-hub-items-hero-image { + display: none; + } +} + +@media #{$mat-xs} { + .tb-iot-hub-items-page { + padding-left: 16px; + padding-right: 16px; + } + + .tb-iot-hub-items-divider { + margin-left: -16px; + margin-right: -16px; + } + + tb-iot-hub-browse { + margin-left: -16px; + margin-right: -16px; + } +} diff --git a/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg index 6f3e9fcca7..fa88380d61 100644 --- a/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg +++ b/ui-ngx/src/assets/iot-hub/items-page-calculated-fields-hero.svg @@ -1,104 +1,104 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/ui-ngx/src/scss/constants.scss b/ui-ngx/src/scss/constants.scss index 83c7114f01..addc319a4d 100644 --- a/ui-ngx/src/scss/constants.scss +++ b/ui-ngx/src/scss/constants.scss @@ -27,6 +27,7 @@ $mat-gt-sm: "screen and (min-width: 960px)"; $mat-gt-md: "screen and (min-width: 1280px)"; $mat-lt-xmd: "screen and (max-width: 1599px)"; $mat-gt-xmd: "screen and (min-width: 1600px)"; +$mat-lt-xxl: "screen and (max-width: 2447px)"; $mat-gt-xxl: "screen and (min-width: 2448px)"; $mat-gt-xl: "screen and (min-width: 1920px)"; $mat-md-lg: "screen and (min-width: 960px) and (max-width: 1819px)";