1. View, filter, and save Product Permutation. \n 2. Synchronised with Product Category page and all common functionality moved into base and base table css, js, and python files.

static/css/pages/store/product_categories.css

@@ -1,23 +1,58 @@
 
+#formFilters {
+    width: 50vh;
+}
 
-td.display-order, th.display-order {
-    width: 8% !important;
+#formFilters .container {
+    max-width: fit-content;
 }
-td.code, th.code {
-    width: 15% !important;
+
+#formFilters .container-input.filter.is_not_empty {
+    width: 10vh;
+} 
+
+#formFilters .container-input.filter.active {
+    width: 8vh;
 }
-td.name, th.name {
-    width: 25% !important;
+
+#tableMain {
+    max-width: min(calc(1vh * 79), calc(1vw * 90));
 }
-td.description, th.description {
-    width: 35% !important;
+
+/*
+#tableMain thead tr th, #tableMain tbody tr td {
+    margin-left: 1vh;
+    margin-right: 1vh;
 }
-td.access_level, th.access_level {
-    width: 10% !important;
+*/
+
+#tableMain tbody tr td.display_order, #tableMain thead tr th.display_order {
+    width: 5vh;
+    min-width: 5vh;
 }
-td.active, th.active {
-    width: 7% !important;
+#tableMain tbody tr td.code, #tableMain thead tr th.code {
+    width: 10vh;
+    min-width: 10vh;
 }
+#tableMain tbody tr td.name, #tableMain thead tr th.name {
+    width: 15vh;
+    min-width: 15vh;
+}
+#tableMain tbody tr td.description, #tableMain thead tr th.description {
+    width: 25vh;
+    min-width: 25vh;
+}
+#tableMain tbody tr td.access_level, #tableMain thead tr th.access_level {
+    width: 7vh;
+    min-width: 7vh;
+}
+#tableMain tbody tr td.active, #tableMain thead tr th.active {
+    width: 5vh;
+    min-width: 5vh;
+}
+/*
+nips
+*/
 
 /*
 .row-new {
@@ -26,15 +61,15 @@ td.active, th.active {
 */
 
 textarea {
-    width: 95% !important;
+    width: 95%;
 }
 
 select {
-    width: 100% !important;
+    width: 100%;
 }
 
 input {
-    width: 90% !important;
+    width: 90%;
 }
 
 td > input, td > select, td > textarea, .container-input > input, .container-input > select, .container-input > textarea {

static/css/pages/store/product_permutations.css

@@ -1,28 +1,110 @@
 
+#formFilters {
+    width: 50vh;
+}
+
+#formFilters .container {
+    max-width: fit-content;
+}
+
 
-td.category, th.category {
-    width: 16% !important;
+#tableMain {
+    max-width: 90vw;
 }
-td.product, th.product {
-    width: 23% !important;
+#tableMain thead tr th.category, #tableMain tbody tr td.category {
+    width: 8vh;
+    min-width: 8vh;
 }
-td.variations, th.variations {
-    width: 19% !important;
+#tableMain thead tr th.product, #tableMain tbody tr td.product {
+    width: 10vh;
+    min-width: 10vh;
 }
-td.quantity-stock, th.quantity-stock {
-    width: 10% !important;
+#tableMain thead tr th.product_variations.collapsed, #tableMain tbody tr td.product_variations.collapsed {
+    width: 10vh;
+    min-width: 10vh;
+    display: table-cell !important;
 }
-td.quantity-min, th.quantity-min {
-    width: 10% !important;
+#tableMain thead tr th.product_variations, #tableMain tbody tr td.product_variations {
+    width: 20vh;
+    min-width: 20vh;
 }
-td.quantity-max, th.quantity-max {
-    width: 10% !important;
+#tableMain tbody tr td.product_variations table thead tr th, #tableMain tbody tr td.product_variations table tbody tr td {
+    width: 8vh;
+    min-width: 8vh;
 }
-td.cost-local-VAT-incl, th.cost-local-VAT-incl {
-    width: 6% !important;
+#tableMain tbody tr td.product_variations table thead tr th:last-of-type, #tableMain tbody tr td.product_variations table tbody tr td:last-of-type {
+    width: 4vh;
+    min-width: 4vh;
 }
-td.detail, th.detail {
-    width: 6% !important;
+#tableMain thead tr th.description, #tableMain tbody tr td.description {
+}
+#tableMain thead tr th.quantity_stock, #tableMain tbody tr td.quantity_stock {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain thead tr th.quantity_min, #tableMain tbody tr td.quantity_min {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain thead tr th.quantity_max, #tableMain tbody tr td.quantity_max {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain thead tr th.count_unit_measurement_per_quantity_step, #tableMain tbody tr td.count_unit_measurement_per_quantity_step {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain thead tr th.id_unit_measurement_quantity, #tableMain tbody tr td.id_unit_measurement_quantity {
+    width: 8vh;
+    min-width: 8vh;
+}
+#tableMain thead tr th.is_subscription, #tableMain tbody tr td.is_subscription {
+    width: 9vh;
+    min-width: 9vh;
+}
+#tableMain thead tr th.count_interval_recurrence, #tableMain tbody tr td.count_interval_recurrence {
+    width: 8vh;
+    min-width: 8vh;
+}
+#tableMain thead tr th.id_unit_measurement_interval_recurrence, #tableMain tbody tr td.id_unit_measurement_interval_recurrence {
+    width: 8vh;
+    min-width: 8vh;
+}
+#tableMain thead tr th.id_stripe_product, #tableMain tbody tr td.id_stripe_product {
+    width: 10vh;
+    min-width: 10vh;
+}
+#tableMain thead tr th.does_expire_faster_once_unsealed, #tableMain tbody tr td.does_expire_faster_once_unsealed {
+    width: 7vh;
+    min-width: 7vh;
+}
+#tableMain thead tr th.count_interval_expiration_unsealed, #tableMain tbody tr td.count_interval_expiration_unsealed {
+    width: 8vh;
+    min-width: 8vh;
+}
+#tableMain thead tr th.id_unit_measurement_interval_expiration_unsealed, #tableMain tbody tr td.id_unit_measurement_interval_expiration_unsealed {
+    width: 8vh;
+    min-width: 8vh;
+}
+#tableMain thead tr th.cost_local, #tableMain tbody tr td.cost_local {
+    width: 9vh;
+    min-width: 9vh;
+}
+#tableMain thead tr th.id_currency_cost, #tableMain tbody tr td.id_currency_cost {
+    width: 6vh;
+    min-width: 6vh;
+}
+#tableMain thead tr th.profit_local_min, #tableMain tbody tr td.profit_local_min {
+    width: 9vh;
+    min-width: 9vh;
+}
+#tableMain thead tr th.latency_manufacture_days, #tableMain tbody tr td.latency_manufacture_days {
+    width: 9vh;
+    min-width: 9vh;
+}
+#tableMain thead tr th.active, #tableMain tbody tr td.active {
+    width: 6vh;
+    min-width: 6vh;
 }
 
 textarea {