OrderBy Responsive Design

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -31,9 +31,9 @@
 
     <div
       class="page-search-result-item__item-title font-bold text-2xl"
-      [class.text-xl]="item?.product?.name?.length >= 35"
-      [class.text-lg]="item?.product?.name?.length >= 40"
-      [class.text-md]="item?.product?.name?.length >= 50"
+      [class.text-xl]="item?.product?.name?.length >= 35 && isTablet"
+      [class.text-lg]="item?.product?.name?.length >= 40 && isTablet"
+      [class.text-md]="item?.product?.name?.length >= 50 && isTablet"
       [class.text-sm]="item?.product?.name?.length >= 60 || !isTablet"
       [class.text-xs]="item?.product?.name?.length >= 100 || (!isTablet && item?.product?.name?.length >= 70)"
     >

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss

@@ -8,10 +8,6 @@
   box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
 }
 
-.page-search-result-item__item-card-main {
-  @apply grid grid-flow-col;
-}
-
 .page-search-result-item__item-grid-container {
   @apply grid grid-flow-row gap-[0.375rem];
   grid-template-areas:
@@ -69,6 +65,7 @@
 .page-search-result-item__item-ssc {
   grid-area: ssc;
 }
+
 .page-search-result-item__item-image {
   box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935);
 }

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -16,8 +16,12 @@
   </div>
 </div>
 
-<div class="page-search-results__order-by h-[53px] flex flex-row items-center justify-center bg-white rounded-t-card">
-  <shared-order-by-filter [orderBy]="(filter$ | async)?.orderBy" (selectedOrderByChange)="search(); updateBreadcrumbs()">
+<div class="page-search-results__order-by" [class.page-search-results__order-by-main]="isOutletMain">
+  <shared-order-by-filter
+    [groupBy]="isOutletMain ? [2, 2, 1, 1] : []"
+    [orderBy]="(filter$ | async)?.orderBy"
+    (selectedOrderByChange)="search(); updateBreadcrumbs()"
+  >
   </shared-order-by-filter>
 </div>
 

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -12,7 +12,15 @@
 }
 
 .page-search-results__result-item-main {
-  @apply mb-[6px];
+  @apply mb-[5px];
+}
+
+.page-search-results__order-by {
+  @apply bg-white rounded-t-card px-4;
+}
+
+.page-search-results__order-by-main {
+  @apply pl-[4.9375rem];
 }
 
 .filter {
@@ -35,10 +43,6 @@
   .hits {
     @apply text-inactive-branch font-semibold absolute top-2 right-0;
   }
-
-  shared-order-by-filter {
-    @apply mx-auto;
-  }
 }
 
 .actions {
@@ -58,3 +62,20 @@
     @apply bg-brand text-white;
   }
 }
+
+::ng-deep page-search-results .page-search-results__order-by-main shared-order-by-filter {
+  @apply grid grid-flow-col justify-items-start gap-x-4 justify-start;
+  grid-template-columns: 30% 30% 20% 8.8%;
+
+  .group:last-child {
+    @apply justify-self-end;
+
+    .order-by-filter-button {
+      @apply ml-12 mr-0;
+    }
+  }
+
+  .order-by-filter-button {
+    @apply ml-0 mr-12;
+  }
+}

apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html

@@ -1,19 +1,21 @@
-<div class="order-by-filter-button-wrapper">
-  <button
-    [attr.data-label]="label"
-    class="order-by-filter-button"
-    type="button"
-    *ngFor="let label of orderByKeys"
-    (click)="setActive(label)"
-  >
-    <span>
-      {{ label }}
-    </span>
-    <ui-icon
-      [class.asc]="label === activeOrderBy?.label && !activeOrderBy.desc"
-      [class.desc]="label === activeOrderBy?.label && activeOrderBy.desc"
-      icon="arrow"
-      size="14px"
-    ></ui-icon>
-  </button>
-</div>
+<ng-container *ngIf="orderByKeys">
+  <div class="group flex flex-row" *ngFor="let group of groupedOrderByKeys">
+    <button
+      *ngFor="let label of group.keys"
+      [attr.data-label]="label"
+      class="order-by-filter-button"
+      type="button"
+      (click)="setActive(label)"
+    >
+      <span>
+        {{ label }}
+      </span>
+      <ui-icon
+        [class.asc]="label === activeOrderBy?.label && !activeOrderBy.desc"
+        [class.desc]="label === activeOrderBy?.label && activeOrderBy.desc"
+        icon="arrow"
+        size="10px"
+      ></ui-icon>
+    </button>
+  </div>
+</ng-container>

apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss

@@ -1,14 +1,9 @@
 :host {
-  @apply box-border flex justify-center items-center;
-  min-height: 30px;
-}
-
-.order-by-filter-button-wrapper {
-  @apply flex flex-row items-center justify-center;
+  @apply box-border flex flex-row items-center justify-center h-[3.3125rem] w-full;
 }
 
 .order-by-filter-button {
-  @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2;
+  @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center mx-2;
 }
 
 ::ng-deep .tablet shared-order-by-filter .order-by-filter-button {
@@ -16,13 +11,13 @@
 }
 
 ui-icon {
-  @apply hidden transform ml-2 rounded-full p-1;
+  @apply hidden transform ml-1 rounded-full p-1 bg-[#AEB7C1] h-[20px] w-[20px] items-center justify-center;
   transition: 250ms all ease-in-out;
 }
 
 ui-icon.asc,
 ui-icon.desc {
-  @apply flex rounded-full visible text-white;
+  @apply flex rounded-full visible text-black;
 }
 
 ui-icon.asc {
@@ -32,23 +27,3 @@ ui-icon.asc {
 ui-icon.desc {
   @apply rotate-90;
 }
-
-::ng-deep .customer shared-order-by-filter {
-  ui-icon {
-    @apply bg-active-customer;
-  }
-
-  .order-by-filter-button {
-    @apply text-active-customer;
-  }
-}
-
-::ng-deep .branch shared-order-by-filter {
-  ui-icon {
-    @apply bg-active-branch;
-  }
-
-  .order-by-filter-button {
-    @apply text-active-branch;
-  }
-}

apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts

@@ -11,6 +11,9 @@ export class OrderByFilterComponent implements OnInit {
   @Input()
   orderBy: OrderBy[];
 
+  @Input()
+  groupBy?: number[] = []; // example input: [2, 1, 2] should result in: [[item, item], [item], [item, item]]
+
   @Output()
   selectedOrderByChange = new EventEmitter<OrderBy>();
 
@@ -18,6 +21,36 @@ export class OrderByFilterComponent implements OnInit {
     return this.orderBy?.map((ob) => ob.label).filter((key, idx, self) => self.indexOf(key) === idx);
   }
 
+  get groupedOrderByKeys(): Array<{ group: number; keys: string[] }> {
+    let orderByKeys = this.orderByKeys; // copy
+    const grouped: Array<{ group: number; keys: string[] }> = [];
+
+    if (this.groupBy?.length > 1) {
+      // group keys based on given input groupBy array structure
+      for (let [outerIndex, group] of this.groupBy?.entries()) {
+        let item = {
+          group: outerIndex,
+          keys: [],
+        };
+
+        for (let [innerIndex, key] of orderByKeys.entries()) {
+          if (innerIndex < group) {
+            item.keys.push(key);
+          } else {
+            break;
+          }
+        }
+
+        // Filter already grouped keys from initial array
+        orderByKeys = orderByKeys.filter((key) => !item.keys.find((itemKey) => itemKey === key));
+        grouped.push(item);
+      }
+    } else {
+      grouped.push({ group: 1, keys: this.orderByKeys });
+    }
+    return grouped;
+  }
+
   get activeOrderBy() {
     return this.orderBy?.find((f) => f.selected);
   }