feat(admin-ui): Improve layout of ProductVariantList

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.html

@@ -16,22 +16,35 @@
                     (selectedChange)="toggleSelectVariant(variant.id)"
                 ></vdr-select-toggle>
             </div>
-            <div class="options">
-                <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
+            <div class="details">
+                <div class="sku">
+                    <clr-input-container>
+                        <input
+                            clrInput
+                            type="text"
+                            [formControl]="formArray.get([i, 'sku'])"
+                            [placeholder]="'catalog.sku' | translate"
+                        />
+                    </clr-input-container>
+                </div>
+                <div class="name">
+                    <clr-input-container>
+                        <input
+                            clrInput
+                            type="text"
+                            [formControl]="formArray.get([i, 'name'])"
+                            [placeholder]="'common.name' | translate"
+                        />
+                    </clr-input-container>
+                </div>
             </div>
-            <div class="flex-spacer"></div>
-            <div class="facets">
-                <vdr-facet-value-chip
-                    *ngFor="let facetValue of existingFacetValues(i)"
-                    [facetValue]="facetValue"
-                    (remove)="removeFacetValue(i, facetValue.id)"
-                ></vdr-facet-value-chip>
-                <vdr-facet-value-chip
-                    *ngFor="let facetValue of pendingFacetValues(i)"
-                    [facetValue]="facetValue"
-                    (remove)="removeFacetValue(i, facetValue.id)"
-                ></vdr-facet-value-chip>
+            <div *ngIf="variant.options.length">
+                <div class="options">
+                    {{ 'catalog.options' | translate }}:
+                    <vdr-chip *ngFor="let option of variant.options">{{ option.name }}</vdr-chip>
+                </div>
             </div>
+            <div class="flex-spacer"></div>
         </div>
         <div class="card-block">
             <div class="row">
@@ -44,20 +57,6 @@
                     ></vdr-product-assets>
                 </div>
                 <div class="col">
-                    <div class="details">
-                        <div class="sku">
-                            <clr-input-container>
-                                <label>{{ 'catalog.sku' | translate }}</label>
-                                <input clrInput type="text" [formControl]="formArray.get([i, 'sku'])" />
-                            </clr-input-container>
-                        </div>
-                        <div class="name">
-                            <clr-input-container>
-                                <label>{{ 'common.name' | translate }}</label>
-                                <input clrInput type="text" [formControl]="formArray.get([i, 'name'])" />
-                            </clr-input-container>
-                        </div>
-                    </div>
                     <div class="pricing">
                         <div class="tax-category">
                             <clr-select-container>
@@ -94,5 +93,19 @@
                 </div>
             </div>
         </div>
+        <div class="card-block">
+            <div class="facets">
+                <vdr-facet-value-chip
+                    *ngFor="let facetValue of existingFacetValues(i)"
+                    [facetValue]="facetValue"
+                    (remove)="removeFacetValue(i, facetValue.id)"
+                ></vdr-facet-value-chip>
+                <vdr-facet-value-chip
+                    *ngFor="let facetValue of pendingFacetValues(i)"
+                    [facetValue]="facetValue"
+                    (remove)="removeFacetValue(i, facetValue.id)"
+                ></vdr-facet-value-chip>
+            </div>
+        </div>
     </div>
 </div>

admin-ui/src/app/catalog/components/product-variants-list/product-variants-list.component.scss

@@ -21,6 +21,23 @@
     .header-row {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .details {
+        display: flex;
+        margin-left: 12px;
+        > div {
+            margin-right: 12px;
+        }
+
+        .name, .sku {
+            font-weight: bold;
+        }
+
+        ::ng-deep .name input {
+            width: 300px;
+        }
     }
 
     .flex-spacer {
@@ -44,18 +61,19 @@
         margin-right: 12px;
     }
 
-    .details {
+    .pricing {
         display: flex;
-        margin-bottom: 24px;
         > div {
             margin-right: 12px;
         }
     }
+}
 
-    .pricing {
-        display: flex;
-        > div {
-            margin-right: 12px;
+@media screen and (max-width: $breakpoint-small){
+    .details {
+        flex-direction: column;
+        ::ng-deep .clr-control-container, ::ng-deep input {
+            width: 100%
         }
     }
 }

admin-ui/src/i18n-messages/en.json

@@ -52,6 +52,7 @@
     "option-group-name": "Option group name",
     "option-group-options-label": "Options",
     "option-group-options-tooltip": "Enter each option on a new line in the default language ({ defaultLanguage })",
+    "options": "Options",
     "original-asset-size": "Source size",
     "price": "Price",
     "price-includes-tax-at": "Price includes tax at { rate }%",
@@ -216,4 +217,4 @@
     "update": "Update",
     "zone": "Zone"
   }
-}
+}