fix(admin-ui): Fix mobile layout for asset list

Fixes #2206
vendure-ecommerce · Jun 19, 2023 · 5f7ac8c · 5f7ac8c
1 parent 161b757
commit 5f7ac8c
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 58 deletions.
diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html
@@ -1,16 +1,17 @@
 <vdr-page-block>
-    <vdr-asset-search-input
-        class="my-2"
-        [tags]="allTags$ | async"
-        (searchTermChange)="searchTerm$.next($event)"
-        (tagsChange)="filterByTags$.next($event)"
-    >
-        <vdr-asset-file-input
-            (selectFiles)="filesSelected($event)"
-            [uploading]="uploading"
-            dropZoneTarget=".content-area"
-        ></vdr-asset-file-input>
-    </vdr-asset-search-input>
+    <div class="my-2">
+        <vdr-asset-search-input
+            [tags]="allTags$ | async"
+            (searchTermChange)="searchTerm$.next($event)"
+            (tagsChange)="filterByTags$.next($event)"
+        >
+            <vdr-asset-file-input
+                (selectFiles)="filesSelected($event)"
+                [uploading]="uploading"
+                dropZoneTarget=".content-area"
+            ></vdr-asset-file-input>
+        </vdr-asset-search-input>
+    </div>
     <vdr-asset-gallery
         [assets]="(items$ | async)! | paginate : (paginationConfig$ | async) || {}"
         [multiSelect]="true"

diff --git a/packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss b/packages/admin-ui/src/lib/core/src/components/app-shell/app-shell.component.scss
@@ -15,7 +15,7 @@
     overflow: hidden;
     height: 100%;
     border-right: 1px solid var(--color-weight-150);
-    z-index: 1;
+    z-index: 2;
     width: var(--left-nav-width);
     max-width: var(--left-nav-width);
 

diff --git a/...es/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss b/...es/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss
@@ -2,6 +2,10 @@
 
 :host {
     display: flex;
+    flex-direction: column-reverse;
+    @media screen and (min-width: $breakpoint-medium) {
+        flex-direction: row;
+    }
 }
 
 .gallery {
@@ -61,7 +65,9 @@ vdr-select-toggle {
 }
 
 .info-bar {
-    width: 25%;
+    @media screen and (min-width: $breakpoint-medium) {
+        width: 25%;
+    }
     padding: 0 6px;
     overflow-y: auto;
 

diff --git a/...i/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.html b/...i/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.html
@@ -1,42 +1,44 @@
-<div class="flex center">
-    <ng-select
-        [addTag]="addTagFn"
-        [placeholder]="'catalog.search-asset-name-or-tag' | translate"
-        [items]="tags"
-        [searchFn]="filterTagResults"
-        [hideSelected]="true"
-        [multiple]="true"
-        [markFirst]="false"
-        (change)="onSelectChange($event)"
-        #selectComponent
-    >
-        <ng-template ng-header-tmp>
-            <div
-                class="search-header"
-                *ngIf="selectComponent.searchTerm"
-                [class.selected]="isSearchHeaderSelected()"
-                (click)="selectComponent.selectTag()"
+<ng-select
+    [addTag]="addTagFn"
+    [placeholder]="'catalog.search-asset-name-or-tag' | translate"
+    [items]="tags"
+    [searchFn]="filterTagResults"
+    [hideSelected]="true"
+    [multiple]="true"
+    [markFirst]="false"
+    (change)="onSelectChange($event)"
+    #selectComponent
+>
+    <ng-template ng-header-tmp>
+        <div
+            class="search-header"
+            *ngIf="selectComponent.searchTerm"
+            [class.selected]="isSearchHeaderSelected()"
+            (click)="selectComponent.selectTag()"
+        >
+            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}
+        </div>
+    </ng-template>
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+        <ng-container *ngIf="item.value">
+            <vdr-chip [colorFrom]="item.value" icon="close" (iconClick)="clear(item)"
             >
-                {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}
-            </div>
-        </ng-template>
-        <ng-template ng-label-tmp let-item="item" let-clear="clear">
-            <ng-container *ngIf="item.value">
-                <vdr-chip [colorFrom]="item.value" icon="close" (iconClick)="clear(item)"
-                    ><clr-icon shape="tag" class="mr2"></clr-icon> {{ item.value }}</vdr-chip
-                >
-            </ng-container>
-            <ng-container *ngIf="!item.value">
-                <vdr-chip [icon]="'times'" (iconClick)="clear(item)">"{{ item.label || item }}"</vdr-chip>
-            </ng-container>
-        </ng-template>
-        <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-            <ng-container *ngIf="item.value">
-                <vdr-chip [colorFrom]="item.value"
-                    ><clr-icon shape="tag" class="mr2"></clr-icon> {{ item.value }}</vdr-chip
-                >
-            </ng-container>
-        </ng-template>
-    </ng-select>
-    <ng-content></ng-content>
-</div>
+                <clr-icon shape="tag" class="mr2"></clr-icon>
+                {{ item.value }}</vdr-chip
+            >
+        </ng-container>
+        <ng-container *ngIf="!item.value">
+            <vdr-chip [icon]="'times'" (iconClick)="clear(item)">"{{ item.label || item }}"</vdr-chip>
+        </ng-container>
+    </ng-template>
+    <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+        <ng-container *ngIf="item.value">
+            <vdr-chip [colorFrom]="item.value"
+            >
+                <clr-icon shape="tag" class="mr2"></clr-icon>
+                {{ item.value }}</vdr-chip
+            >
+        </ng-container>
+    </ng-template>
+</ng-select>
+<ng-content></ng-content>
diff --git a/...i/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.scss b/...i/src/lib/core/src/shared/components/asset-search-input/asset-search-input.component.scss
@@ -1,8 +1,16 @@
 @import "mixins";
+@import "variables";
 
 :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
     width: 100%;
+    @media screen and (min-width: $breakpoint-medium) {
+        flex-direction: row;
+        min-width: 300px;
+    }
 
     ::ng-deep {
         @include ng-select-facet-values;
@@ -11,8 +19,9 @@
 
 ng-select {
     width: 100%;
-    min-width: 300px;
-    margin-right: 12px;
+    @media screen and (min-width: $breakpoint-medium) {
+        min-width: 300px;
+    }
 }
 
 .search-header {