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>
-    <ng-container *ngIf="customFilter && ((customFilterEnabled &&
-    refineFields.indexOf(customFilter.queryFieldName) ==
-    -1) ||customFilter.isHiddenFilter)">
-        <span class="uk-width-auto">
-          <span class="uk-label uk-label-secondary uk-text-truncate">
-            {{customFilter.valueName}}
-          </span>
-        </span>
-    </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">
-            <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>
-        </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">
-            <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>
-        </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">
-            <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>
-        </ng-container>
-      </ng-container>
-    </ng-container>
+  <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)">
+                <li class="uk-margin-small-right">
+                  <span class="uk-label uk-label-secondary uk-text-truncate">
+                    {{customFilter.valueName}}
+                  </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">
+                  <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>
+                  </li>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+            <ng-container *ngIf="selectedRangeFilters > 0">
+              <ng-container *ngFor="let filter of rangeFilters ">
+                <ng-container *ngIf="filter.selectedFromAndToValues">
+                  <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>
+                  </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; ">
+                  <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>
+                  </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>