Browse Source

fix(iot-hub): move search field to left, results count to sort row, filter button to right on mobile

pull/15508/head
Igor Kulikov 6 months ago
parent
commit
4a75d64829
  1. 18
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html
  2. 15
      ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss

18
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html

@ -340,15 +340,8 @@
<!-- Right content area -->
<div class="tb-iot-hub-results">
<!-- Top bar: filter button (mobile) + results count + search + sort -->
<!-- Top bar: search + filter button (mobile) -->
<div class="tb-iot-hub-results-top">
<button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
<mat-icon>filter_list</mat-icon>
{{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
</button>
<span class="tb-iot-hub-results-count">
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
</span>
<div class="tb-iot-hub-search-field">
<mat-icon class="tb-iot-hub-search-icon">search</mat-icon>
<input class="tb-iot-hub-search-input"
@ -361,12 +354,15 @@
</button>
}
</div>
<button mat-stroked-button color="primary" class="tb-iot-hub-filter-toggle-btn" (click)="filterDrawerOpened = true">
<mat-icon>filter_list</mat-icon>
{{ 'iot-hub.filter' | translate }}@if (activeFilterCount) {: {{ activeFilterCount }}}
</button>
</div>
<!-- Sort button -->
<!-- Sort row: results count + filter chips + sort -->
<div class="tb-iot-hub-sort-row">
<!-- Results count (visible on small screens when filter chips are hidden) -->
<span class="tb-iot-hub-results-count-mobile">
<span class="tb-iot-hub-results-count">
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
</span>
<!-- Active filter chips (hidden on small screens) -->

15
ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.scss

@ -362,8 +362,7 @@
}
// Results count — Design: 14px Medium, rgba(0,0,0,0.76), tracking 0.25
.tb-iot-hub-results-count,
.tb-iot-hub-results-count-mobile {
.tb-iot-hub-results-count {
font-size: 14px;
font-weight: 500;
line-height: 20px;
@ -371,10 +370,6 @@
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;
@ -644,10 +639,6 @@
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 {
@ -655,10 +646,6 @@
}
}
.tb-iot-hub-results-count-mobile {
display: inline;
}
.tb-iot-hub-results {
padding-left: 24px;
padding-right: 24px;

Loading…
Cancel
Save