feat(admin-ui): Various styling fixes

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.html

@@ -1,26 +1,29 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <div class="flex center wrap">
-            <vdr-language-selector
-                class="mt2"
-                [availableLanguageCodes]="availableLanguages$ | async"
-                [currentLanguageCode]="contentLanguage$ | async"
-                (languageCodeChange)="setLanguage($event)"
-            ></vdr-language-selector>
-            <clr-checkbox-wrapper
-                class="expand-all-toggle ml3"
-                [ngClass]="(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'"
-            >
-                <input type="checkbox" clrCheckbox [(ngModel)]="expandAll" (change)="toggleExpandAll()" />
-                <label>{{ 'catalog.expand-all-collections' | translate }}</label>
-            </clr-checkbox-wrapper>
+        <div class="">
             <input
                 type="text"
                 name="searchTerm"
                 [formControl]="filterTermControl"
                 [placeholder]="'catalog.filter-by-name' | translate"
-                class="clr-input search-input ml4"
+                class="clr-input search-input"
             />
+            <div class="flex center">
+                <clr-toggle-wrapper
+                    class="expand-all-toggle mt2"
+                >
+                    <input type="checkbox" clrToggle [(ngModel)]="expandAll" (change)="toggleExpandAll()" />
+                    <label>
+                        {{ 'catalog.expand-all-collections' | translate }}
+                    </label>
+                </clr-toggle-wrapper>
+                <vdr-language-selector
+                    class="mt2"
+                    [availableLanguageCodes]="availableLanguages$ | async"
+                    [currentLanguageCode]="contentLanguage$ | async"
+                    (languageCodeChange)="setLanguage($event)"
+                ></vdr-language-selector>
+            </div>
         </div>
     </vdr-ab-left>
     <vdr-ab-right>

packages/admin-ui/src/lib/catalog/src/components/facet-list/facet-list.component.html

@@ -1,18 +1,20 @@
 <vdr-action-bar>
     <vdr-ab-left>
-        <div class="flex center wrap">
-            <vdr-language-selector
-                [availableLanguageCodes]="availableLanguages$ | async"
-                [currentLanguageCode]="contentLanguage$ | async"
-                (languageCodeChange)="setLanguage($event)"
-            ></vdr-language-selector>
+        <div class="">
             <input
                 type="text"
                 name="searchTerm"
                 [formControl]="filterTermControl"
                 [placeholder]="'catalog.filter-by-name' | translate"
-                class="clr-input search-input ml4"
+                class="clr-input search-input"
             />
+            <div>
+                <vdr-language-selector
+                    [availableLanguageCodes]="availableLanguages$ | async"
+                    [currentLanguageCode]="contentLanguage$ | async"
+                    (languageCodeChange)="setLanguage($event)"
+                ></vdr-language-selector>
+            </div>
         </div>
     </vdr-ab-left>
     <vdr-ab-right>

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html

@@ -192,7 +192,7 @@
                                 [class.btn-primary]="variantDisplayMode === 'card'"
                             >
                                 <clr-icon shape="list"></clr-icon>
-                                {{ 'catalog.display-variant-cards' | translate }}
+                                <span class="full-label">{{ 'catalog.display-variant-cards' | translate }}</span>
                             </button>
                             <button
                                 class="btn"
@@ -200,7 +200,7 @@
                                 [class.btn-primary]="variantDisplayMode === 'table'"
                             >
                                 <clr-icon shape="table"></clr-icon>
-                                {{ 'catalog.display-variant-table' | translate }}
+                                <span class="full-label">{{ 'catalog.display-variant-table' | translate }}</span>
                             </button>
                         </div>
                         <div class="variant-filter">
@@ -216,7 +216,7 @@
                         <a
                             *vdrIfPermissions="['UpdateCatalog', 'UpdateProduct']"
                             [routerLink]="['./', 'manage-variants']"
-                            class="btn btn-secondary edit-variants-btn"
+                            class="btn btn-secondary edit-variants-btn mb0 mr0"
                         >
                             <clr-icon shape="add-text"></clr-icon>
                             {{ 'catalog.manage-variants' | translate }}

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 :host {
     ::ng-deep {
@@ -44,8 +44,11 @@ vdr-action-bar clr-toggle-wrapper {
 
 .view-mode {
     display: flex;
-    justify-content: flex-end;
-    align-items: center;
+    flex-direction: column;
+    justify-content: space-between;
+    @media screen and (min-width: $breakpoint-small) {
+        flex-direction: row;
+    }
 }
 
 .edit-variants-btn {

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.html

@@ -52,10 +52,12 @@
             </vdr-dropdown>
         </div>
         <div class="flex wrap">
-            <clr-checkbox-wrapper class="mt2">
-                <input type="checkbox" clrCheckbox [(ngModel)]="groupByProduct" (ngModelChange)="refresh()" />
-                <label>{{ 'catalog.group-by-product' | translate }}</label>
-            </clr-checkbox-wrapper>
+            <clr-toggle-wrapper class="mt2">
+                <input type="checkbox" clrToggle [(ngModel)]="groupByProduct" (ngModelChange)="refresh()" />
+                <label>
+                    {{ 'catalog.group-by-product' | translate }}
+                </label>
+            </clr-toggle-wrapper>
             <vdr-language-selector
                 [availableLanguageCodes]="availableLanguages$ | async"
                 [currentLanguageCode]="contentLanguage$ | async"
@@ -71,7 +73,7 @@
             *vdrIfPermissions="['CreateCatalog', 'CreateProduct']"
         >
             <clr-icon shape="plus"></clr-icon>
-            <span class="full-label">{{ 'catalog.create-new-product' | translate }}</span>
+            {{ 'catalog.create-new-product' | translate }}
         </a>
     </vdr-ab-right>
 </vdr-action-bar>

packages/admin-ui/src/lib/catalog/src/components/product-list/product-list.component.scss

@@ -19,9 +19,9 @@
     display: flex;
     align-items: center;
     width: 100%;
-    margin-bottom: 6px;
+    //margin-bottom: 6px;
 }
-.search-input {
+vdr-product-search-input {
     min-width: 300px;
     @media screen and (max-width: $breakpoint-small){
         min-width: 100px;

packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.scss

@@ -1,14 +1,25 @@
+@import "variables";
 
 :host {
     display: block;
-    padding: 0 1rem;
+    @media screen and (min-width: $breakpoint-small) {
+        padding: 0 1rem;
+    }
 }
 .breadcrumbs {
     list-style-type: none;
+    display: flex;
+    overflow-x: auto;
+    max-width: 100vw;
+    padding: 0 3px;
+    @media screen and (min-width: $breakpoint-small) {
+        padding: 0;
+    }
     li {
         font-size: 16px;
         display: inline-block;
         margin-right: 10px;
+        white-space: nowrap;
     }
     li:not(:last-child)::after {
         content: '›';

packages/admin-ui/src/lib/core/src/shared/components/action-bar/action-bar.component.scss

@@ -1,3 +1,4 @@
+@import 'variables';
 
 :host {
     display: flex;
@@ -12,4 +13,23 @@
     > .grow {
         flex: 1;
     }
+
+    flex-direction: column-reverse;
+
+    .right-content {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    ::ng-deep vdr-ab-right > *:last-child {
+        margin-right: 0px;
+    }
+
+    @media screen and (min-width: $breakpoint-small) {
+        flex-direction: row;
+        .right-content {
+            width: initial;
+        }
+    }
 }

packages/admin-ui/src/lib/core/src/shared/components/action-bar/action-bar.component.ts

@@ -2,9 +2,7 @@ import { Component, ContentChild, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'vdr-ab-left',
-    template: `
-        <ng-content></ng-content>
-    `,
+    template: ` <ng-content></ng-content> `,
 })
 export class ActionBarLeftComponent {
     @Input() grow = false;
@@ -12,9 +10,7 @@ export class ActionBarLeftComponent {
 
 @Component({
     selector: 'vdr-ab-right',
-    template: `
-        <ng-content></ng-content>
-    `,
+    template: ` <ng-content></ng-content> `,
 })
 export class ActionBarRightComponent {
     @Input() grow = false;

packages/admin-ui/src/lib/core/src/shared/components/data-table/data-table.component.scss

@@ -13,6 +13,11 @@
     z-index: 2;
 }
 
+table.table {
+    max-width: 100vw;
+    overflow-x: auto;
+}
+
 table.no-select {
     user-select: none;
 }

packages/admin-ui/src/lib/core/src/shared/components/language-selector/language-selector.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="1 < availableLanguageCodes?.length">
     <vdr-dropdown>
-        <button type="button" class="btn btn-sm btn-link" vdrDropdownTrigger [disabled]="disabled">
+        <button type="button" class="btn btn-sm" vdrDropdownTrigger [disabled]="disabled">
             <clr-icon shape="world"></clr-icon>
             {{ 'common.language' | translate }}: {{ currentLanguageCode | localeLanguageName | uppercase }}
             <clr-icon shape="caret down"></clr-icon>

packages/admin-ui/src/lib/core/src/shared/components/product-search-input/product-search-input.component.scss

@@ -12,7 +12,7 @@
 
 ng-select {
     width: 100%;
-    min-width: 300px;
+    //min-width: 300px;
     margin-right: 12px;
 }
 

packages/admin-ui/src/lib/customer/src/components/customer-group-list/customer-group-list.component.html

@@ -5,7 +5,7 @@
             name="emailSearchTerm"
             [formControl]="searchTerm"
             [placeholder]="'customer.search-by-group-name' | translate"
-            class="search-input ml3"
+            class="search-input"
         />
     </vdr-ab-left>
     <vdr-ab-right>

packages/admin-ui/src/lib/customer/src/components/customer-list/customer-list.component.html

@@ -5,7 +5,7 @@
             name="emailSearchTerm"
             [formControl]="searchTerm"
             [placeholder]="'customer.search-customers-by-email-last-name-postal-code' | translate"
-            class="search-input ml3"
+            class="search-input"
         />
     </vdr-ab-left>
     <vdr-ab-right>

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.html

@@ -1,7 +1,7 @@
 <vdr-action-bar>
     <vdr-ab-left>
         <div class="search-form">
-            <div class="btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">
+            <div class="filter-presets btn-group btn-outline-primary" *ngIf="activePreset$ | async as activePreset">
                 <button
                     class="btn"
                     *ngFor="let preset of filterPresets"
@@ -75,7 +75,7 @@
     <vdr-ab-right>
         <vdr-action-bar-items locationId="order-list"></vdr-action-bar-items>
         <ng-container *ngIf="canCreateDraftOrder">
-            <a class="btn btn-primary" *vdrIfPermissions="['CreateOrder']" [routerLink]="['./draft/create']">
+            <a class="btn btn-primary mt1" *vdrIfPermissions="['CreateOrder']" [routerLink]="['./draft/create']">
                 <clr-icon shape="plus"></clr-icon>
                 {{ 'catalog.create-draft-order' | translate }}
             </a>

packages/admin-ui/src/lib/order/src/components/order-list/order-list.component.scss

@@ -4,15 +4,20 @@
     display: flex;
     flex-direction: column;
     @media screen and (min-width: $breakpoint-small) {
-        flex-direction: row;
+        //flex-direction: row;
     }
     align-items: baseline;
     width: 100%;
+    max-width: 100vw;
     margin-bottom: 6px;
 }
 
+.filter-presets {
+    max-width: 90vw;
+    overflow-x: auto;
+}
+
 .search-input {
-    margin-left: 6px;
     margin-top: 6px;
     min-width: 300px;
 }

packages/admin-ui/src/lib/settings/src/components/country-list/country-list.component.html

@@ -7,25 +7,29 @@
             [placeholder]="'settings.search-country-by-name' | translate"
             class="search-input"
         />
-        <vdr-language-selector
-            [availableLanguageCodes]="availableLanguages$ | async"
-            [currentLanguageCode]="contentLanguage$ | async"
-            (languageCodeChange)="setLanguage($event)"
-        ></vdr-language-selector>
+        <div>
+            <vdr-language-selector
+                [availableLanguageCodes]="availableLanguages$ | async"
+                [currentLanguageCode]="contentLanguage$ | async"
+                (languageCodeChange)="setLanguage($event)"
+            ></vdr-language-selector>
+        </div>
     </vdr-ab-left>
 
     <vdr-ab-right>
         <vdr-action-bar-items locationId="country-list"></vdr-action-bar-items>
-        <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="['CreateSettings', 'CreateCountry']">
+        <a
+            class="btn btn-primary"
+            [routerLink]="['./create']"
+            *vdrIfPermissions="['CreateSettings', 'CreateCountry']"
+        >
             <clr-icon shape="plus"></clr-icon>
             {{ 'settings.create-new-country' | translate }}
         </a>
     </vdr-ab-right>
 </vdr-action-bar>
 
-<vdr-data-table
-    [items]="countriesWithZones$ | async"
->
+<vdr-data-table [items]="countriesWithZones$ | async">
     <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
     <vdr-dt-column [expand]="true">{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'settings.zone' | translate }}</vdr-dt-column>
@@ -36,7 +40,10 @@
         <td class="left align-middle">{{ country.code }}</td>
         <td class="left align-middle">{{ country.name }}</td>
         <td class="left align-middle">
-            <a [routerLink]="['/settings', 'zones', { contents: zone.id }]" *ngFor="let zone of country.zones">
+            <a
+                [routerLink]="['/settings', 'zones', { contents: zone.id }]"
+                *ngFor="let zone of country.zones"
+            >
                 <vdr-chip [colorFrom]="zone.name">{{ zone.name }}</vdr-chip>
             </a>
         </td>

packages/admin-ui/src/lib/static/styles/global/_forms.scss

@@ -126,12 +126,14 @@ select {
     }
     input {
         border: none !important;
-        padding: 0;
         background: none !important;
     }
 }
 .ng-select.ng-select-single > .ng-select-container {
     padding-top: 9px;
+    input {
+        padding-left: 0 !important;
+    }
 }
 .ng-select.ng-select-focused > .ng-select-container {
     border-color: var(--color-primary-500) !important;
@@ -142,5 +144,5 @@ select {
     background: var(--color-form-input-bg) !important;
 }
 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: var(--color-grey-100);
+    background-color: var(--color-grey-200);
 }

packages/admin-ui/src/lib/system/src/components/health-check/health-check.component.scss

@@ -6,6 +6,7 @@
 
     .status-detail {
         font-weight: bold;
+        margin-right: 6px;
     }
     .last-checked {
         font-weight: normal;