¨4.0.1¨

Modules/Attribute/Resources/assets/admin/js/AttributeValues.js

@@ -3,7 +3,7 @@ export default class {
         this.attributeId = 0;
         this.valuesCount = 0;
 
-        this.addOldValues(FleetCart.data['attribute.values']);
+        this.addOldValues(FleetCart.data["attribute.values"]);
 
         if (this.valuesCount === 0) {
             this.addAttributeValue();
@@ -12,7 +12,7 @@ export default class {
         this.eventListeners();
         this.sortable();
 
-        window.admin.removeSubmitButtonOffsetOn('#values');
+        window.admin.removeSubmitButtonOffsetOn("#values");
     }
 
     addOldValues(values = {}) {
@@ -21,26 +21,26 @@ export default class {
         }
     }
 
-    addAttributeValue(value = { id: '', value: '' }) {
-        let template = _.template($('#attribute-value-template').html());
+    addAttributeValue(value = { id: "", value: "" }) {
+        let template = _.template($("#attribute-value-template").html());
         let html = template({ valueId: this.valuesCount++, value });
 
-        $('#attribute-values').append(html);
+        $("#attribute-values").append(html);
 
         window.admin.tooltip();
     }
 
     eventListeners() {
-        $('#add-new-value').on('click', () => this.addAttributeValue());
+        $("#add-new-value").on("click", () => this.addAttributeValue());
 
-        $('#attribute-values').on('click', '.delete-row', (e) => {
-            $(e.currentTarget).closest('tr').remove();
+        $("#attribute-values").on("click", ".delete-row", (e) => {
+            $(e.currentTarget).closest("tr").remove();
         });
     }
 
     sortable() {
-        Sortable.create(document.getElementById('attribute-values'), {
-            handle: '.drag-icon',
+        Sortable.create(document.getElementById("attribute-values"), {
+            handle: ".drag-handle",
             animation: 150,
         });
     }

Modules/Attribute/Resources/assets/admin/js/main.js

@@ -1,10 +1,5 @@
-import AttributeValues from './AttributeValues';
-import ProductAttributes from './ProductAttributes';
+import AttributeValues from "./AttributeValues";
 
-if ($('#attribute-values-wrapper').length !== 0) {
+if ($("#attribute-values-wrapper").length !== 0) {
     new AttributeValues();
 }
-
-if ($('#product-attributes-wrapper').length !== 0) {
-    new ProductAttributes();
-}

Modules/Attribute/Resources/assets/admin/sass/main.scss

@@ -1,49 +1,23 @@
-#product-attributes-wrapper,
-#attribute-values-wrapper {
-    margin-bottom: 15px;
-
-    .table {
-        .form-group {
-            margin: 0;
-        }
-
-        thead th {
-            &:first-child {
-                width: 40px;
-            }
-
-            &:last-child {
-                width: 60px;
-            }
-        }
-    }
-}
-
 #product-attributes-wrapper {
-    .table-responsive {
-        overflow: visible;
-    }
-
     .table {
         > tbody > tr {
             > td {
-                vertical-align: middle;
-
                 &:nth-child(2) {
-                    width: 160px;
+                    width: 190px;
+                    min-width: 160px;
                 }
             }
         }
     }
-
-    .options {
-        .drag-icon {
-            margin-top: 3px;
-        }
-    }
 }
 
 #attribute-values-wrapper {
+    margin-bottom: 15px;
+
+    .table-responsive {
+        margin-bottom: 15px;
+    }
+
     .table {
         > tbody > tr {
             > td {
@@ -55,19 +29,55 @@
     }
 }
 
-@media screen and (max-width: 767px) {
-    #product-attributes-wrapper {
-        .options {
-            .drag-icon {
-                margin-top: 0;
+#product-attributes-wrapper,
+#attribute-values-wrapper {
+    .table-responsive {
+        margin-bottom: 15px;
+        overflow: visible;
+    }
+
+    .table {
+        thead th {
+            &:first-child {
+                width: 35px;
+            }
+
+            &:last-child {
+                width: 60px;
             }
         }
 
+        .form-group {
+            margin: 0;
+        }
+    }
+}
+
+@media screen and (max-width: 991px) {
+    #product-attributes-wrapper {
+        .table {
+            > tbody > tr {
+                > td {
+                    &:nth-child(2) {
+                        min-width: 160px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 767px) {
+    #product-attributes-wrapper {
         .table {
             > tbody > tr {
                 border-top: 1px solid #e9e9e9;
 
                 > td {
+                    &:nth-child(2) {
+                        padding-top: 15px;
+                    }
+
                     &:nth-child(2),
                     &:nth-child(3),
                     &:nth-child(4) {
@@ -77,7 +87,6 @@
                         padding-left: 15px;
                         padding-right: 15px;
                         text-align: left;
-                        vertical-align: initial;
                     }
 
                     &:nth-child(4) {