並べ替えのレイアウト修正

JSの変数宣言を最適化

css/apop-style.css

@@ -52,16 +52,18 @@ h3 {
 
 .list-orders-outer {
     width: 100%;
-    display: flex;
     margin-bottom: 1em;
     flex-wrap: wrap;
     justify-content: space-between;
 }
 
 .list-orders-inner {
-    width: calc((100% / 2) - 20px);
-    padding: .5em;
+    width: calc(100% - 60px);
+    margin: 1em auto;
+    padding: .5em 1em;
     position: relative;
+    background: #eee;
+    border-radius: 12px;
 }
 
 .sort-menu-list {
@@ -146,15 +148,19 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 
 .drag-sort .product-list {
     border: 1px solid #ccc;
+    border-radius: 6px;
 }
 
 .enable-box .product-list {
-    padding: 1em .3em;
-    background: #eee;
+    width: calc((50%) - 30px);
+    padding: 1em;
+    background: #fff;
+    border: 1px solid #bbb;
+    border-radius: 6px;
 }
 
 .enable-box .product-list:hover {
-    border: 1px solid #bbb;
+    border: 1px solid #999;
 }
 
 .custom_field_key_select,
@@ -172,10 +178,6 @@ dl.apop-setting-list-dd .sort-custom-field-input {
     width: calc((100%) - 60px);
 }
 
-.enable-box .product-list-type-label {
-    width: calc(100% / 2);
-}
-
 .search-normal-sort .product-list-sort-type {
     width: 100%;
     display: flex;
@@ -196,6 +198,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 
 .product-list.no-order {
     background: #ababab;
+    border-radius: 6px;
 }
 
 .list-order {
@@ -256,7 +259,6 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 .disable-normal-list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
     margin: .5em 1em 1em 0;
 }
 
@@ -267,7 +269,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 }
 
 .disable-box .product-list {
-    width: calc((100% / 2) - 15px);
+    width: calc((25%) - 15px);
     display: flex;
     cursor: default;
 }
@@ -291,7 +293,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 .enable-box,
 .disable-box {
     padding: .5em;
-    border: 1px solid #ccc;
+    /*border-bottom: 1px solid #ccc;*/
 }
 
 .enable-box h4 {
@@ -311,9 +313,9 @@ dl.apop-setting-list-dd .sort-custom-field-input {
 
 
 @media only screen and (max-width: 1264px) {
-    .enable-box .product-list,
-    .disable-box .product-list {
-        display: block;
+
+    .enable-box .product-list {
+        width: calc((100%) - 15px);
     }
 
     .search-normal-sort .product-list {
@@ -351,13 +353,9 @@ dl.apop-setting-list-dd .sort-custom-field-input {
         width: 98%;
     }
 
-    .list-orders-outer {
-        display: block;;
-    }
-
     .list-orders-inner {
         width: auto;
-        margin: 1.5em 0 0 0;
+        margin: 1.5em 1em 0;
     }
 
     dl.apop-setting-list dt {
@@ -379,4 +377,12 @@ dl.apop-setting-list-dd .sort-custom-field-input {
         width: auto;
         white-space: normal;
     }
+
+    .disable-normal-list {
+        display: block;
+    }
+
+    .disable-box .product-list {
+        width: 100%;
+    }
 }