indicators selected filters in one row slider
This commit is contained in:
parent
eeeb4df8d1
commit
e70dc8a586
|
@ -1,28 +1,40 @@
|
||||||
<ng-template #selected_filters_pills>
|
<ng-template #selected_filters_pills>
|
||||||
<span *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="uk-width-auto">
|
<div class=" uk-width-1-1" uk-slider="finite: true">
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
<div class="uk-position-relative " >
|
||||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
<div class="uk-slider-container ">
|
||||||
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
|
<ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
|
||||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
<li *ngIf="periodFilter.selectedFromAndToValues.length > 0" class="">
|
||||||
</button>
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||||
</span>
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
|
||||||
</span>
|
<button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon" [disabled]="loading">
|
||||||
<ng-container *ngFor="let filter of filters ">
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
</button>
|
||||||
<ng-container *ngFor="let value of filter.values; let i = index;">
|
|
||||||
<ng-container *ngIf="value.selected">
|
|
||||||
<span class="uk-width-auto">
|
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
|
||||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
|
||||||
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
|
|
||||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
|
||||||
</button>
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</ng-container>
|
</li>
|
||||||
</ng-container>
|
<ng-container *ngFor="let filter of filters ">
|
||||||
</ng-container>
|
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||||
</ng-container>
|
<ng-container *ngFor="let value of filter.values; let i = index;">
|
||||||
|
<ng-container *ngIf="value.selected">
|
||||||
|
<li class="">
|
||||||
|
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||||
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
|
||||||
|
<button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)" class="uk-close uk-icon" [disabled]="loading">
|
||||||
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<a class="uk-position-center-left-out" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
||||||
|
<a class="uk-position-center-right-out" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<div page-content (stickyEmitter)="stickyPageHeader = $event">
|
<div page-content (stickyEmitter)="stickyPageHeader = $event">
|
||||||
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
|
<div *ngIf="activeTopic && activeTopic.categories.length > 0" header>
|
||||||
|
@ -227,7 +239,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
|
<div *ngIf="stakeholder && !privateStakeholder" id="style_switcher" class="uk-offcanvas offcanvas"
|
||||||
uk-offcanvas="flip:true; overlay: true">
|
uk-offcanvas="flip:true; overlay: true">
|
||||||
<div class="uk-offcanvas-bar">
|
<div class="uk-offcanvas-bar uk-width-small@m">
|
||||||
<div class="uk-float-right">
|
<div class="uk-float-right">
|
||||||
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
|
<button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
|
||||||
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
|
<icon name="close" ratio="1.5" visuallyHidden="close"></icon>
|
||||||
|
|
Loading…
Reference in New Issue