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 cb59c9f5e9..83b1764afd 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 @@ -405,87 +405,92 @@ - - @if (isLoading) { -
- -
- } +
- - @if (hasError && !isLoading) { -
-
-

{{ 'iot-hub.unable-to-load' | translate }}

-

{{ 'iot-hub.unable-to-load-text' | translate }}

- -
- } - - - @if (!isLoading && !hasError && items.length === 0) { -
-
-

{{ 'iot-hub.no-items-found' | translate }}

-

{{ 'iot-hub.no-items-found-text' | translate }}

- @if (hasActiveFilters()) { - + + @if (hasError) { +
+
+

{{ 'iot-hub.unable-to-load' | translate }}

+

{{ 'iot-hub.unable-to-load-text' | translate }}

+ +
} -
- } - - @if (!isLoading && !hasError && items.length > 0) { -
- @for (item of items; track item.id) { - - + + @if (!hasError && items.length === 0) { +
+
+

{{ 'iot-hub.no-items-found' | translate }}

+

{{ 'iot-hub.no-items-found-text' | translate }}

+ @if (hasActiveFilters()) { + + } +
} -
- -
-
- - @for (p of getPageNumbers(); track p) { - - } - -
-
- {{ 'iot-hub.items-per-page' | translate }}: - - @for (size of pageSizeOptions; track size) { - {{ size }} + + @if (!hasError && items.length > 0) { +
+ @for (item of items; track item.id) { + + } - -
+
+ + +
+
+ + @for (p of getPageNumbers(); track p) { + + } + +
+
+ {{ 'iot-hub.items-per-page' | translate }}: + + @for (size of pageSizeOptions; track size) { + {{ size }} + } + +
+
+ } + + + @if (isLoading) { +
+
+ +
+
+ }
- }
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 b377219bb7..4c058ef5d1 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 @@ -112,7 +112,8 @@ } .tb-iot-hub-filters-wrapper { - position: absolute; + position: sticky; + max-height: calc(100vh - var(--mat-toolbar-standard-height, 64px)); inset: 0; overflow-y: auto; } @@ -146,10 +147,12 @@ width: 60%; max-width: 550px; min-width: 300px; - margin-bottom: -48px; - - .embedded & { - margin-bottom: 0; + &:not(.embedded &) { + position: fixed; + top: var(--mat-toolbar-standard-height, 64px); + @media #{$mat-xs} { + top: var(--mat-toolbar-mobile-height, 56px); + } } } diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html index 70dc7d986e..dc2030b00a 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html @@ -80,7 +80,7 @@ } @else {
-
+
@if (getPreviewUrl(); as previewUrl) { } @else { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss index 77d363f4ad..d46124d91e 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.scss @@ -52,11 +52,6 @@ position: relative; overflow: hidden; padding: 12px; - - &.tb-iot-hub-card-preview-device { - background: white; - border-bottom: 1px solid rgba(0, 0, 0, 0.12); - } } .tb-iot-hub-preview-image { diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html index c72e209037..6c0318abbc 100644 --- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html @@ -94,8 +94,7 @@
+ [class.dlg-preview-carousel]="item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1"> @if (item.type === ItemType.SOLUTION_TEMPLATE && carouselImages.length > 1) {