Merge remote-tracking branch 'origin/new-theme' into new-theme

searchPages/searchUtils/newSearchPage.component.html

@@ -1,57 +1,72 @@
 <ng-template #selected_filters_pills>
-  <h1 class="uk-grid uk-grid-small uk-text-small" uk-grid>
+  <h1 class=""  >
+    <div class=" uk-width-1-1" uk-slider="finite: true">
+      <div    class="uk-position-relative " >
+        <div class="uk-slider-container ">
+          <ul class=" uk-slider-items " style="flex-wrap: nowrap !important;" >
             <ng-container *ngIf="customFilter && ((customFilterEnabled &&
             refineFields.indexOf(customFilter.queryFieldName) ==
             -1) ||customFilter.isHiddenFilter)">
-        <span class="uk-width-auto">
+                <li class="uk-margin-small-right">
                   <span class="uk-label uk-label-secondary uk-text-truncate">
                     {{customFilter.valueName}}
                   </span>
-        </span>
+                </li>
             </ng-container>
             <ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0">
               <ng-container *ngFor="let type of resultTypes.values; let i = index;">
                 <ng-container *ngIf="type.selected">
-          <span class="uk-width-auto">
+                  <li class="uk-margin-small-right">
                     <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
                       <button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
                         <icon name="close" flex="true" ratio="0.7"></icon>
                       </button>
                     </span>
-          </span>
+                  </li>
                 </ng-container>
               </ng-container>
             </ng-container>
             <ng-container *ngIf="selectedRangeFilters > 0">
               <ng-container *ngFor="let filter of rangeFilters ">
                 <ng-container *ngIf="filter.selectedFromAndToValues">
-          <span class="uk-width-auto">
+                  <li class="uk-margin-small-right">
                     <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
                       <button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
                         <icon name="close" flex="true" ratio="0.7"></icon>
                       </button>
                     </span>
-          </span>
+                  </li>
                 </ng-container>
               </ng-container>
             </ng-container>
             <ng-container *ngFor="let filter of filters ">
               <ng-container *ngIf="filter.countSelectedValues > 0">
                 <ng-container *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; ">
-          <span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
-                class="uk-width-auto">
+                  <li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
+                        class="uk-margin-small-right">
                     <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]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
                         <icon name="close" flex="true" ratio="0.7"></icon>
                       </button>
                     </span>
-          </span>
+                  </li>
                 </ng-container>
               </ng-container>
             </ng-container>
+            <li class="uk-margin-small-right">
+              <span class="uk-label uk-flex uk-flex-middle uk-invisible" > <!-- adds space--></span>
+            </li>
+          </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>
   </h1>
 </ng-template>
 <ng-template #filters_column>