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

layout mobile e ultrawide

Browse Source
This commit is contained in:
Emerson Fully 2023-02-10 18:46:45 -03:00
parent 92ded99fdd
commit 4f76bd79e3
9 changed files with 101 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
react/components/Html/style.css
View File

@ -1,7 +1,30 @@
.html--pdp-breadcrumb {
margin: 0 40px;
}
.html--product-summary-container {
margin: 0 40px;
}
@media screen and (min-width: 1920px) {
.html--pdp-breadcrumb {
margin: 0 360px;
}
.html--product-summary-container {
margin: 0 360px;
}
}
@media screen and (min-width: 768px) {
.html--quantity-and-button {
display: flex;
}
}
/*buy-button*/
/* [class*="flexRowContent--btn-product"] button {

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

@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
"children": [
"assembly-option-item-image"
]
"children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {

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

@ -125,14 +125,20 @@
"html#product-installments",
"html#Pix",
"html#sku-selector",
"html#product-quantity",
"html#buy-container",
"product-assembly-options",
"flex-layout.row#buy-button",
"availability-subscriber",
"html#shipping-simulator"
]
},
"html#buy-container": {
"props": {
"blockClass": "quantity-and-button"
},
"children": ["html#product-quantity", "flex-layout.row#buy-button"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
@ -287,7 +293,8 @@
"html#slider": {
"props": {
"testId": "product-summary-list"
"testId": "product-summary-list",
"blockClass": "product-summary-container"
},
"children": ["slider-layout#carrosselatualizado"]
},
@ -297,7 +304,7 @@
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 1
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",

14
styles/css/vtex.flex-layout.css
View File

@ -32,15 +32,15 @@
position: relative;
}
@media screen and (min-width: 769px) {
.flexRow--btn-product {
width: 100%;
max-width: 526px;
position: absolute;
top: 374px;
left: 158px;
@media screen and (min-width: 768px) {
.flexRowContent--btn-product {
margin: 0 10px;
}
}
.flexRow--btn-product {
width: 100%;
}
.flexRow--btn-product :global(.vtex-button) {
background-color: black;
border: 1px solid black;

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

@ -27,7 +27,7 @@
/* carouselThumbs*/
.carouselGaleryThumbs {
height: 200px;
height: 140px;
margin-top: 16px;
}
.carouselGaleryThumbs .productImagesThumb {
@ -267,6 +267,12 @@
line-height: 32px;
color: #575757;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
line-height: 32px;
}
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
@ -275,6 +281,12 @@
line-height: 19px;
color: #929292;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionText {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer {
margin-top: 16px;
@ -322,7 +334,12 @@
margin: 16px;
}
.newsletter .inputGroup {
width: 774px;
display: flex;
}
@media screen and (min-width: 768px) {
.newsletter .inputGroup {
width: 774px;
}
}
.newsletter .inputGroup :global(.vtex-input-prefix__group) {
border: none;

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

@ -15,6 +15,11 @@
margin: auto;
width: 95%;
}
@media screen and (min-width: 1920px) {
.listContainer {
width: 75%;
}
}
@media screen and (max-width: 1024px) {
.listContainer {
flex-direction: column;
@ -26,6 +31,11 @@
display: flex;
padding: 62px 52px;
}
@media screen and (min-width: 1920px) {
.contentItem {
padding: 62px 360px;
}
}
@media screen and (max-width: 1024px) {
.contentItem {
flex-direction: column;

13
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -27,14 +27,13 @@
position: relative;
}
.flexRow--btn-product {
@media screen and (min-width: 769px) {
width: 100%;
max-width: 526px;
position: absolute;
top: 374px;
left: 158px;
.flexRowContent--btn-product {
@media screen and (min-width: 768px) {
margin: 0 10px;
}
}
.flexRow--btn-product {
width: 100%;
:global(.vtex-button) {
background-color: black;

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

@ -15,7 +15,7 @@
/* carouselThumbs*/
.carouselGaleryThumbs {
height: 200px;
height: 140px;
margin-top: 16px;
.productImagesThumb {
@ -296,6 +296,11 @@
line-height: 32px;
color: $color-gray6;
@media screen and (min-width: 1920px) {
font-size: 32px;
line-height: 32px;
}
}
.productDescriptionText {
@ -306,6 +311,11 @@
line-height: 19px;
color: $color-gray8;
@media screen and (min-width: 1920px) {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
@ -361,7 +371,10 @@
}
.inputGroup {
width: 774px;
display: flex;
@media screen and (min-width: 768px) {
width: 774px;
}
:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid gray;

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

@ -5,6 +5,9 @@
margin: auto;
width: 95%;
@media screen and (min-width: 1920px) {
width: 75%;
}
@media screen and (max-width: 1024px) {
flex-direction: column;
border-top: 1px solid #b9b9b9;
@ -15,6 +18,10 @@
display: flex;
padding: 62px 52px;
@media screen and (min-width: 1920px) {
padding: 62px 360px;
}
@media screen and (max-width: 1024px) {
flex-direction: column;
padding: 16px 40px;