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 --> <!-- Right content area -->
<div class="tb-iot-hub-results"> <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"> <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"> <div class="tb-iot-hub-search-field">
<mat-icon class="tb-iot-hub-search-icon">search</mat-icon> <mat-icon class="tb-iot-hub-search-icon">search</mat-icon>
<input class="tb-iot-hub-search-input" <input class="tb-iot-hub-search-input"
@ -361,12 +354,15 @@
</button> </button>
} }
</div> </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> </div>
<!-- Sort button --> <!-- Sort row: results count + filter chips + sort -->
<div class="tb-iot-hub-sort-row"> <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">
<span class="tb-iot-hub-results-count-mobile">
{{ 'iot-hub.results-count' | translate:{ count: totalElements } }} {{ 'iot-hub.results-count' | translate:{ count: totalElements } }}
</span> </span>
<!-- Active filter chips (hidden on small screens) --> <!-- 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 // 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-size: 14px;
font-weight: 500; font-weight: 500;
line-height: 20px; line-height: 20px;
@ -371,10 +370,6 @@
color: rgba(0, 0, 0, 0.76); 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 // Search field — Design: 320px, h-40, rounded-8, border rgba(0,0,0,0.12), white bg
.tb-iot-hub-search-field { .tb-iot-hub-search-field {
width: 320px; width: 320px;
@ -644,10 +639,6 @@
display: inline-flex; display: inline-flex;
} }
.tb-iot-hub-results-count {
display: none;
}
.tb-iot-hub-sort-row { .tb-iot-hub-sort-row {
.tb-iot-hub-active-filters, .tb-iot-hub-active-filters,
.tb-iot-hub-clear-btn { .tb-iot-hub-clear-btn {
@ -655,10 +646,6 @@
} }
} }
.tb-iot-hub-results-count-mobile {
display: inline;
}
.tb-iot-hub-results { .tb-iot-hub-results {
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;

Loading…
Cancel
Save