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.

This commit is contained in:
2024-09-24 23:25:52 +01:00
parent d37f632c92
commit cf78e4b3bc
239 changed files with 6371 additions and 4336 deletions

1
static/dist/css/416.bundle.css vendored Normal file
View File

@@ -0,0 +1 @@

View File

@@ -1,4 +1,7 @@
#pageBody > * > * {
width: 100%;
}
#pageBody > * {
height: 100%;
}

View File

@@ -1,75 +1,5 @@
#overlayConfirm {
position: absolute;
left: 25vw;
width: 50vw;
height: 50vh;
}
.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;
}
.buttonAdd2Basket {
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%;
}
/* Right column */
.rightcolumn {
min-width: fit-content;
}
/*
/* Base styles *
@import 'lib/reset.css';
@import 'lib/typography.css';
@@ -79,6 +9,7 @@
/* Layout styles *
@import 'layouts/header.css';
@import 'layouts/footer.css';
@import 'layouts/table-main.css';
/* Component styles *
@import 'components/button.css';
@@ -91,6 +22,7 @@
/* Section styles *
@import 'sections/store.css';
*/
/* Page-specific styles *
@import 'pages/page_admin.css';
@@ -101,15 +33,14 @@
@import 'pages/page_store_home.css';
@import 'pages/page_store_product_permutations.css';
@import 'pages/page_store_stock_items.css';
*
*/
/* Theme styles *
@import 'themes/light.css';
/* Uncomment the line below to enable dark theme *
/* @import 'themes/dark.css'; *
/* Uncomment the line below to enable dark theme */
/* @import 'themes/dark.css'; */
*/
/* Custom styles */
/* Add any custom styles or overrides here */
@@ -304,10 +235,9 @@ h5 {
text-align: center;
width: 100%;
align-self: center;
font-size: min(20px, calc(1vh * 6));
font-size: min(16px, calc(1vh * 4));
}
#pageBody > * > * {
width: 100%;
align-self: center;
padding-top: 1vh;
padding-bottom: 1vh;
@@ -444,6 +374,7 @@ img.header-logo {
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0;
}
.row {
@@ -591,10 +522,10 @@ button:hover, input[type="submit"]:hover, #overlayHamburger .row *:hover {
z-index: 999;
}
.overlay.expanded {
display: block !important;
display: block;
}
.collapsed {
display: none !important;
display: none;
}
#overlayHamburger {
@@ -663,8 +594,21 @@ td.dirty {
/* Tables */
#pageBody > *, button {
font-size: min(14px, calc(1vh * 5)) !important;
font-size: min(12px, calc(1vh * 3));
}
#overlayConfirm {
position: absolute;
left: 25vw;
width: 50vw;
height: 50vh;
}
thead, tbody {
padding-top: 0px !important;
padding-bottom: 0px !important;
@@ -674,7 +618,7 @@ th {
}
td {
font-size: min(14px, calc(1vh * 5));
font-size: min(12px, calc(1vh * 3));
}
th, td {
@@ -700,3 +644,83 @@ tr {
}
*/
button.collapsed {
display: block;
opacity: 0;
}
form.filter button.save, form.filter button.button-cancel {
margin-top: 0;
margin-bottom: 0;
}
form.filter button.save, form.filter button.button-cancel {
margin-top: 0;
margin-bottom: 0;
}
#tableMain {
overflow-x: auto;
padding: 1vh 2vh;
max-width: min(calc(1vh * 80), calc(1vw * 90));
width: fit-content;
margin: 1vh 2vh;
align-items: normal;
justify-content: normal;
}
#tableMain thead tr th, #tableMain tbody tr td {
width: 20vh;
min-width: 20vh;
padding: 0 0.5vh;
}
:root {
--background-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #343a40;
--border-color: #dee2e6;
--shadow-color: rgba(0, 0, 0, 0.1);
/* Header */
--header-bg: #f8f9fa;
--header-text: #333333;
/* Footer */
--footer-bg: #f8f9fa;
--footer-text: #6c757d;
/* Navigation */
--nav-bg: #ffffff;
--nav-text: #333333;
--nav-hover-bg: #f1f3f5;
--nav-hover-text: #007bff;
/* Buttons */
--Button-primary-bg: #007bff;
--Button-primary-text: #ffffff;
--Button-secondary-bg: #6c757d;
--Button-secondary-text: #ffffff;
/* Forms */
--input-bg: #ffffff;
--input-border: #ced4da;
--input-text: #495057;
--input-focus-border: #80bdff;
/* Cards */
--card-bg: #ffffff;
--card-border: #dee2e6;
--card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

View File

@@ -30,7 +30,7 @@
justify-self: left;
}
.buttonAdd2Basket {
.buttonAddToBasket {
background-color: var(--c_blue_pastel);
color: var(--c_blue_dark);
border-color: var(--c_blue_dark);

View File

@@ -1 +1,54 @@
.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%;
}
/* Right column */
.rightcolumn {
min-width: fit-content;
}

View File

@@ -1,23 +1,111 @@
.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.display-order, th.display-order {
width: 8% !important;
/* Right column */
.rightcolumn {
min-width: fit-content;
}
td.code, th.code {
width: 15% !important;
#formFilters {
width: 50vh;
}
td.name, th.name {
width: 25% !important;
#formFilters .container {
max-width: fit-content;
}
td.description, th.description {
width: 35% !important;
#formFilters .container-input.filter.is_not_empty {
width: 10vh;
}
#formFilters .container-input.filter.active {
width: 8vh;
}
td.access_level, th.access_level {
width: 10% !important;
#tableMain {
max-width: min(calc(1vh * 79), calc(1vw * 90));
}
td.active, th.active {
width: 7% !important;
/*
#tableMain thead tr th, #tableMain tbody tr td {
margin-left: 1vh;
margin-right: 1vh;
}
*/
#tableMain tbody tr td.display_order, #tableMain thead tr th.display_order {
width: 5vh;
min-width: 5vh;
}
#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 +114,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 {

View File

@@ -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 {

View File

@@ -1,4 +1,57 @@
.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%;
}
/* Right column */
.rightcolumn {
min-width: fit-content;
}
th, td {
min-width: fit-content;
}