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/dist/css/store_product_permutations.bundle.css

@@ -1,28 +1,163 @@
 
+.img-product {
+    max-width: 20vh;
+    max-height: 20vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.img-thumbnail {
+    max-width: 10vh;
+    max-height: 10vh;
+    border-radius: 3vh;
+    justify-self: left;
+}
+
+.buttonAddToBasket {
+    background-color: var(--c_blue_pastel);
+    color: var(--c_blue_dark);
+    border-color: var(--c_blue_dark);
+}
+
+#buttonCheckout, .buttonBuyNow {
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+
+.button-increment, .button-decrement {
+    border: 2px solid darkgrey;
+    background-color: lightgray;
+    margin: 1vh 1vh;
+    width: 2.5vh;
+    height: 2.5vh;
+    border-radius: 1.25vh;
+    font-size: 2vh;
+}
+
+.container-input > input {
+    padding: 0vh 1vh;
+    border-radius: 0.5vh;
+    max-width: 7vh;
+}
+
+#basket {
+    max-width: 100%;
+}
+
 
-td.category, th.category {
-    width: 16% !important;
+
+/* Right column */
+.rightcolumn {
+    min-width: fit-content;
 }
-td.product, th.product {
-    width: 23% !important;
+
+#formFilters {
+    width: 50vh;
 }
-td.variations, th.variations {
-    width: 19% !important;
+
+#formFilters .container {
+    max-width: fit-content;
 }
-td.quantity-stock, th.quantity-stock {
-    width: 10% !important;
+
+
+#tableMain {
+    max-width: 90vw;
 }
-td.quantity-min, th.quantity-min {
-    width: 10% !important;
+#tableMain thead tr th.category, #tableMain tbody tr td.category {
+    width: 8vh;
+    min-width: 8vh;
 }
-td.quantity-max, th.quantity-max {
-    width: 10% !important;
+#tableMain thead tr th.product, #tableMain tbody tr td.product {
+    width: 10vh;
+    min-width: 10vh;
 }
-td.cost-local-VAT-incl, th.cost-local-VAT-incl {
-    width: 6% !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.detail, th.detail {
-    width: 6% !important;
+#tableMain thead tr th.product_variations, #tableMain tbody tr td.product_variations {
+    width: 20vh;
+    min-width: 20vh;
+}
+#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;
+}
+#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;
+}
+#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 {