diff --git a/ssi_product_website/static/src/scss/primary_variables.scss b/ssi_product_website/static/src/scss/primary_variables.scss index c19ec9a..7aceaa0 100644 --- a/ssi_product_website/static/src/scss/primary_variables.scss +++ b/ssi_product_website/static/src/scss/primary_variables.scss @@ -1 +1 @@ -$o-wsale-products-layout-grid-ratio: 1.0 !default; +$o-pcatalog-products-layout-grid-ratio: 1.0 !default; diff --git a/ssi_product_website/static/src/scss/ssi_product_website.scss b/ssi_product_website/static/src/scss/ssi_product_website.scss index 0d62521..4d2f1c0 100644 --- a/ssi_product_website/static/src/scss/ssi_product_website.scss +++ b/ssi_product_website/static/src/scss/ssi_product_website.scss @@ -1,14 +1,14 @@ // Prevent grid gutter to be higher that bootstrap gutter width to make sure // the negative margin layout does not overflow on elements. This prevents the // use of an ugly overflow: hidden which would break box-shadows. -$o-wsale-products-layout-grid-gutter-width: $grid-gutter-width / 2 !default; -$o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale-products-layout-grid-gutter-width); - -@mixin wsale-break-table-to-list() { - .o_wsale_products_grid_table_wrapper > table, - .o_wsale_products_grid_table_wrapper > table > tbody, - .o_wsale_products_grid_table_wrapper > table > tbody > tr, - .o_wsale_products_grid_table_wrapper > table > tbody > tr > td { +$o-pcatalog-products-layout-grid-gutter-width: $grid-gutter-width / 2 !default; +$o-pcatalog-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-pcatalog-products-layout-grid-gutter-width); + +@mixin pcatalog-break-table-to-list() { + .o_pcatalog_products_grid_table_wrapper > table, + .o_pcatalog_products_grid_table_wrapper > table > tbody, + .o_pcatalog_products_grid_table_wrapper > table > tbody > tr, + .o_pcatalog_products_grid_table_wrapper > table > tbody > tr > td { display: block; width: 100%; } @@ -67,7 +67,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale object-fit: scale-down; } } - .o_wsale_product_information { + .o_pcatalog_product_information { position: relative; flex: 0 0 auto; transition: .3s ease; @@ -80,7 +80,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale transform: scale(1, 0); transition: all ease 0.3s; } - .o_wsale_product_btn { + .o_pcatalog_product_btn { @include o-position-absolute(auto, 0, 100%, 0); padding-bottom: map-get($spacers, 1); @@ -97,7 +97,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale &:hover { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1); - .o_wsale_product_information { + .o_pcatalog_product_information { background-color: gray('200') !important; } .oe_subdescription { @@ -110,7 +110,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } } .oe_subdescription, - .o_wsale_product_btn .btn { + .o_pcatalog_product_btn .btn { transform: scale(1); } } @@ -122,7 +122,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } } .oe_subdescription, - .o_wsale_product_btn .btn { + .o_pcatalog_product_btn .btn { transform: scale(1); } } @@ -135,22 +135,22 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale .oe_product_image { @include border-bottom-radius($card-inner-border-radius); } - .o_wsale_product_information { + .o_pcatalog_product_information { @include o-position-absolute(auto, 0, 0, 0); // The wrapper is always relatively positioned } } } #products_grid { - .o_wsale_products_grid_table_wrapper > .table { + .o_pcatalog_products_grid_table_wrapper > .table { table-layout: fixed; > tbody { > tr > td { - margin-top: $o-wsale-products-layout-grid-gutter-width; // For list and mobile design + margin-top: $o-pcatalog-products-layout-grid-gutter-width; // For list and mobile design padding: 0; - @if $o-wsale-products-layout-grid-gutter-width <= 0 { + @if $o-pcatalog-products-layout-grid-gutter-width <= 0 { border: $card-border-width solid $card-border-color; } } @@ -160,22 +160,22 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } } - .o_wsale_product_grid_wrapper { + .o_pcatalog_product_grid_wrapper { position: relative; @for $x from 1 through 4 { @for $y from 1 through 4 { - &.o_wsale_product_grid_wrapper_#{$x}_#{$y} { - padding-top: 100% * $o-wsale-products-layout-grid-ratio * $y / $x; + &.o_pcatalog_product_grid_wrapper_#{$x}_#{$y} { + padding-top: 100% * $o-pcatalog-products-layout-grid-ratio * $y / $x; } } } > * { - $-pos: ($o-wsale-products-layout-grid-gutter-width / 2); + $-pos: ($o-pcatalog-products-layout-grid-gutter-width / 2); @include o-position-absolute($-pos, $-pos, $-pos, $-pos); - @if $o-wsale-products-layout-grid-gutter-width <= 0 { + @if $o-pcatalog-products-layout-grid-gutter-width <= 0 { &.card { border: none; @@ -188,7 +188,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } } - .o_wsale_products_grid_table_wrapper { + .o_pcatalog_products_grid_table_wrapper { // Necessary to compensate the outer border-spacing of the table. No // overflow will occur as the gutter width cannot be higher than the // BS4 grid gutter and the vertical margins of the wrapper's parent are @@ -196,26 +196,26 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale // Note: a possible layout could also be ok by removing the wrapper // related spacings and setting a background to it, thus including the // outer border spacing as part of the design. - margin: (-$o-wsale-products-layout-grid-gutter-width / 2); + margin: (-$o-pcatalog-products-layout-grid-gutter-width / 2); } @include media-breakpoint-down(sm) { - @include wsale-break-table-to-list(); + @include pcatalog-break-table-to-list(); - .table .o_wsale_product_grid_wrapper { + .table .o_pcatalog_product_grid_wrapper { padding-top: 100% !important; } } - &.o_wsale_layout_list { + &.o_pcatalog_layout_list { @include media-breakpoint-up(sm) { - @include wsale-break-table-to-list(); + @include pcatalog-break-table-to-list(); - .o_wsale_products_grid_table_wrapper { + .o_pcatalog_products_grid_table_wrapper { margin: 0; } - .table .o_wsale_product_grid_wrapper { + .table .o_pcatalog_product_grid_wrapper { padding-top: 0 !important; > * { @@ -225,28 +225,28 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } .oe_product_catalog { - $-wsale-list-layout-height: 10rem; + $-pcatalog-list-layout-height: 10rem; flex-flow: row nowrap; - min-height: $-wsale-list-layout-height; + min-height: $-pcatalog-list-layout-height; .oe_product_image { flex: 0 0 auto; - width: $-wsale-list-layout-height; + width: $-pcatalog-list-layout-height; max-width: 35%; min-width: 100px; height: auto; } - .o_wsale_product_information { + .o_pcatalog_product_information { position: static; display: flex; flex: 1 1 auto; text-align: left !important; } - .o_wsale_product_information_text { + .o_pcatalog_product_information_text { flex: 1 1 auto; } - .o_wsale_product_btn { + .o_pcatalog_product_btn { flex: 0 0 auto; position: static; display: flex; @@ -264,12 +264,12 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale max-height: none !important; } .oe_subdescription, - .o_wsale_product_btn .btn { + .o_pcatalog_product_btn .btn { transform: scale(1) !important; } &:hover { - .o_wsale_product_information { + .o_pcatalog_product_information { background-color: $white !important; } } @@ -278,7 +278,7 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale } } -.o_wsale_products_main_row { +.o_pcatalog_products_main_row { margin-top: $grid-gutter-width / 2; margin-bottom: $grid-gutter-width / 2; } diff --git a/ssi_product_website/static/src/scss/ssi_product_website_frontend.scss b/ssi_product_website/static/src/scss/ssi_product_website_frontend.scss index 613f247..5416858 100644 --- a/ssi_product_website/static/src/scss/ssi_product_website_frontend.scss +++ b/ssi_product_website/static/src/scss/ssi_product_website_frontend.scss @@ -1,26 +1,26 @@ -//## Website Sale frontent design +//## Product Catalog frontent design //## ---------------------------- // Theming variables -$o-wsale-wizard-thickness: 0.125rem; -$o-wsale-wizard-dot-size: 0.625rem; -$o-wsale-wizard-dot-active-glow: 0.25rem; +$o-pcatalog-wizard-thickness: 0.125rem; +$o-pcatalog-wizard-dot-size: 0.625rem; +$o-pcatalog-wizard-dot-active-glow: 0.25rem; -$o-wsale-wizard-color-inner: white; -$o-wsale-wizard-color-default: gray('200'); +$o-pcatalog-wizard-color-inner: white; +$o-pcatalog-wizard-color-default: gray('200'); -$o-wsale-wizard-dot-active: theme-color('primary'); -$o-wsale-wizard-dot-completed: theme-color('success'); +$o-pcatalog-wizard-dot-active: theme-color('primary'); +$o-pcatalog-wizard-dot-completed: theme-color('success'); -$o-wsale-wizard-label-default: $text-muted; -$o-wsale-wizard-label-active: $body-color; -$o-wsale-wizard-label-completed: $success; +$o-pcatalog-wizard-label-default: $text-muted; +$o-pcatalog-wizard-label-active: $body-color; +$o-pcatalog-wizard-label-completed: $success; .progress-wizard { // Scoped variables - $tmp-dot-radius: ($o-wsale-wizard-dot-size + $o-wsale-wizard-thickness)*0.5; - $tmp-check-size: max($font-size-base, $o-wsale-wizard-dot-size + $o-wsale-wizard-thickness + $o-wsale-wizard-dot-active-glow*2); - $tmp-check-pos: $o-wsale-wizard-dot-size*0.5 - $tmp-check-size*0.5; + $tmp-dot-radius: ($o-pcatalog-wizard-dot-size + $o-pcatalog-wizard-thickness)*0.5; + $tmp-check-size: max($font-size-base, $o-pcatalog-wizard-dot-size + $o-pcatalog-wizard-thickness + $o-pcatalog-wizard-dot-active-glow*2); + $tmp-check-pos: $o-pcatalog-wizard-dot-size*0.5 - $tmp-check-size*0.5; margin-top: $grid-gutter-width*0.5; padding: 0 $grid-gutter-width*0.5; @@ -33,7 +33,7 @@ $o-wsale-wizard-label-completed: $success; position: relative; @include media-breakpoint-up(md) { - margin-top: $tmp-dot-radius + $o-wsale-wizard-thickness*3.5; + margin-top: $tmp-dot-radius + $o-pcatalog-wizard-thickness*3.5; float: left; width: percentage(1/3); @@ -47,22 +47,22 @@ $o-wsale-wizard-label-completed: $success; } } .progress-wizard-dot { - width: $o-wsale-wizard-dot-size; - height: $o-wsale-wizard-dot-size; + width: $o-pcatalog-wizard-dot-size; + height: $o-pcatalog-wizard-dot-size; position: relative; display: inline-block; - background-color: $o-wsale-wizard-color-inner; + background-color: $o-pcatalog-wizard-color-inner; border-radius: 50%; - box-shadow: 0 0 0 $o-wsale-wizard-thickness $o-wsale-wizard-color-default; + box-shadow: 0 0 0 $o-pcatalog-wizard-thickness $o-pcatalog-wizard-color-default; @include media-breakpoint-up(md) { @include o-position-absolute($left: 50%); - margin: (-$tmp-dot-radius) 0 0 (-$o-wsale-wizard-dot-size*0.5); + margin: (-$tmp-dot-radius) 0 0 (-$o-pcatalog-wizard-dot-size*0.5); } } .progress-wizard-steplabel { - color: $o-wsale-wizard-label-default; + color: $o-pcatalog-wizard-label-default; margin: 5px 0 5px 5px; font-size: $font-size-base; display: inline-block; @@ -78,20 +78,20 @@ $o-wsale-wizard-label-completed: $success; } .progress-wizard-bar { - height: $o-wsale-wizard-thickness; - background-color: $o-wsale-wizard-color-default; + height: $o-pcatalog-wizard-thickness; + background-color: $o-pcatalog-wizard-color-default; } &.active { .progress-wizard-dot { animation: fadeIn 1s ease 0s 1 normal none running; - background: $o-wsale-wizard-dot-active; - box-shadow: 0 0 0 ($o-wsale-wizard-dot-active-glow - 0.0625rem) $o-wsale-wizard-color-inner, - 0 0 0 $o-wsale-wizard-dot-active-glow rgba($o-wsale-wizard-dot-active, 0.5); + background: $o-pcatalog-wizard-dot-active; + box-shadow: 0 0 0 ($o-pcatalog-wizard-dot-active-glow - 0.0625rem) $o-pcatalog-wizard-color-inner, + 0 0 0 $o-pcatalog-wizard-dot-active-glow rgba($o-pcatalog-wizard-dot-active, 0.5); } .progress-wizard-steplabel { - color: $o-wsale-wizard-label-active; + color: $o-pcatalog-wizard-label-active; font-weight: bolder; } } @@ -107,8 +107,8 @@ $o-wsale-wizard-label-completed: $success; height: $tmp-check-size; border-radius: 100%; - background: $o-wsale-wizard-color-inner; - color: $o-wsale-wizard-dot-completed; + background: $o-pcatalog-wizard-color-inner; + color: $o-pcatalog-wizard-dot-completed; text-align: center; line-height: 1; font-size: $tmp-check-size; @@ -119,16 +119,16 @@ $o-wsale-wizard-label-completed: $success; } .progress-wizard-steplabel { - color: $o-wsale-wizard-label-completed; + color: $o-pcatalog-wizard-label-completed; } &:hover:not(.disabled) { .progress-wizard-dot:after { - color: $o-wsale-wizard-label-completed; + color: $o-pcatalog-wizard-label-completed; } .progress-wizard-steplabel { - color: $o-wsale-wizard-label-active; + color: $o-pcatalog-wizard-label-active; } } } diff --git a/ssi_product_website/views/templates.xml b/ssi_product_website/views/templates.xml index 2819f03..c0892d1 100644 --- a/ssi_product_website/views/templates.xml +++ b/ssi_product_website/views/templates.xml @@ -28,9 +28,9 @@ -
+ $0 - +
@@ -38,7 +38,6 @@ - - - - - - - - - - -