Samuel/challenge-vtex-io-samuelcondack
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona layout mobile

Browse Source
This commit is contained in:
SamuelCondack 2023-02-07 15:37:46 -03:00
parent fbe0abb61e
commit c61e4da934
9 changed files with 74 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
store/blocks/pdp/product.jsonc
View File

@ -30,12 +30,12 @@
"testId": "vtex-product-summary"
},
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
"product-summary-name",
"product-list-price",
"product-selling-price",
"product-summary-description"
// "product-summary-price",
]
},
"product-summary-image": {
@ -482,4 +482,4 @@
}
}
}
}
}

6
styles/css/vtex.product-identifier.css
View File

@ -19,6 +19,12 @@
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
@media (max-width: 1024px) {
.product-identifier {
text-align: left;
justify-content: left;
}
}
.product-identifier .product-identifier__label,
.product-identifier .product-identifier__separator {
display: none;

4
styles/css/vtex.slider-layout.css
View File

@ -36,7 +36,6 @@
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
@ -47,7 +46,6 @@
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
order: 2;
padding: 0;
justify-content: center;
}
@ -56,7 +54,6 @@
max-width: 282.4px;
height: 50px;
align-items: center;
order: 4;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@ -67,7 +64,6 @@
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
display: flex;
order: 3;
padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {

22
styles/css/vtex.store-components.css
View File

@ -16,6 +16,12 @@
.container {
padding: 0 40px;
}
@media (max-width: 1024px) {
.container :global(.vtex-flex-layout-0-x-flexRowContent) {
display: flex;
flex-direction: column;
}
}
.newsletter {
background: black;
@ -101,6 +107,11 @@
display: flex;
justify-content: right;
}
@media (max-width: 1024px) {
.productNameContainer {
justify-content: left;
}
}
.productNameContainer .productBrand--quickview {
font-family: "Open Sans";
font-style: normal;
@ -110,11 +121,22 @@
text-align: right;
color: #575757;
}
@media (max-width: 1024px) {
.productNameContainer .productBrand--quickview {
text-align: left;
}
}
.productDescriptionContainer {
max-width: 632px;
margin-left: 32px;
}
@media (max-width: 1024px) {
.productDescriptionContainer {
max-width: 100%;
margin-left: 0;
}
}
.pointerEventsNone {
display: none;

12
styles/css/vtex.tab-layout.css
View File

@ -15,6 +15,13 @@
padding-left: 40px;
justify-content: space-around;
}
@media (max-width: 1024px) {
.listContainer {
flex-direction: column;
border-top: #BFBFBF 1px solid;
border-spacing: 40px;
}
}
.listContainer::after {
content: "";
background-color: #BFBFBF;
@ -48,4 +55,9 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
@media (max-width: 1024px) {
.listItemActive :global(.vtex-button) {
border: 0;
}
}

5
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -2,13 +2,16 @@
display: flex;
justify-content: flex-end;
margin-right: 40px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
@media (max-width: 1024px){
text-align: left;
justify-content: left;
}
color: rgba(146, 146, 146, 0.48);

4
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -30,7 +30,6 @@
padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
:global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) {
@ -46,7 +45,6 @@
}
:global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
order: 2;
padding: 0;
justify-content: center;
@ -55,7 +53,6 @@
max-width: 282.4px;
height: 50px;
align-items: center;
order: 4;
font-family: 'Open Sans', sans-serif;
font-style: normal;
@ -68,7 +65,6 @@
}
:global(.vtex-product-summary-2-x-priceContainer) {
display: flex;
order: 3;
padding: 0;
:global(.vtex-store-components-3-x-listPrice) {

16
styles/sass/pages/product/vtex.store-components.scss
View File

@ -5,6 +5,12 @@
}
.container{
padding: 0 40px;
:global(.vtex-flex-layout-0-x-flexRowContent){
@media (max-width: 1024px){
display: flex;
flex-direction: column;
}
}
}
.newsletter{
background: black;
@ -91,6 +97,9 @@
.productNameContainer{
display: flex;
justify-content: right;
@media (max-width: 1024px){
justify-content: left;
}
.productBrand--quickview{
font-family: 'Open Sans';
@ -100,11 +109,18 @@
line-height: 34px;
text-align: right;
color: #575757;
@media (max-width: 1024px){
text-align: left;
}
}
}
.productDescriptionContainer{
max-width: 632px;
margin-left: 32px;
@media (max-width: 1024px){
max-width: 100%;
margin-left: 0;
}
}
.pointerEventsNone{
display: none;

8
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -5,6 +5,11 @@
padding-right: 40px;
padding-left: 40px;
justify-content: space-around;
@media (max-width: 1024px){
flex-direction: column;
border-top: #BFBFBF 1px solid;
border-spacing: 40px;
}
&::after{
content: "";
background-color: #BFBFBF;
@ -38,4 +43,7 @@
font-weight: 400;
font-size: 18px;
line-height: 38px;
@media (max-width: 1024px){
border: 0;
}
}