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

feat: adiciona tablet query

Browse Source
This commit is contained in:
Patrick Reis Santos 2023-02-09 23:18:11 -03:00
parent 534f54717a
commit 7157d1e7c2
13 changed files with 321 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/left-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 B

BIN
assets/right-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 B

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

@ -47,7 +47,7 @@
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"showNavigationArrows": "always",
"blockClass": "carousel"
}
},

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

@ -8,10 +8,23 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.flexRow--product-container :global(.vtex-store-components-3-x-container) {
padding: 0;
}
.flexRowContent--product-container {
margin: 0;
padding: 16px 40px;
}
@media (max-width: 1024px) {
.flexRowContent--product-container {
flex-direction: column;
}
.flexRowContent--product-container .stretchChildrenWidth {
padding: 0;
width: 100% !important;
}
}
.flexRowContent--addToBag .stretchChildrenWidth:first-child {
padding: 0;

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

@ -20,6 +20,11 @@
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
@media (max-width: 1024px) {
.product-identifier--productReference {
justify-content: start;
}
}
.product-identifier__label {
font-size: 0;

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

@ -12,6 +12,16 @@
width: 1300px;
margin: auto;
}
@media (max-width: 1024px) {
.sliderTrackContainer {
width: 944px;
padding: 28px;
}
}
.sliderTrack--carousel {
padding: 0 28px;
}
.paginationDotsContainer {
align-items: center;
@ -30,4 +40,39 @@
.slideChildrenContainer {
margin-bottom: 36px;
}
.sliderRightArrow--carousel {
right: 20px;
}
.sliderRightArrow--carousel::after {
content: url(assets/right-arrow.png);
height: 30px;
width: 12px;
display: block;
}
.sliderRightArrow--carousel .caretIcon {
display: none;
}
.sliderLeftArrow--carousel {
left: 20px;
}
.sliderLeftArrow--carousel::after {
content: url(assets/left-arrow.png);
height: 30px;
width: 12px;
display: block;
}
.sliderLeftArrow--carousel .caretIcon {
display: none;
}
.slide--carousel {
padding: 0 8px;
}
@media (max-width: 1024px) {
.slide--carousel {
padding: 0 6px;
}
}

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

@ -10,12 +10,16 @@
.productNameContainer--quickview {
text-align: right;
color: #575757;
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
}
@media (max-width: 1024px) {
.productNameContainer--quickview {
text-align: left;
}
}
.skuSelectorContainer--sku-selector {
display: flex;
@ -24,7 +28,6 @@
}
.skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -64,7 +67,6 @@
font-size: 0;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -189,6 +191,11 @@
height: 90px;
margin-top: 16px !important;
}
@media (max-width: 1024px) {
.carouselGaleryThumbs {
margin-bottom: 32px;
}
}
.carouselGaleryThumbs :global(.vtex-store-components-3-x-thumbImg) {
width: 90px;
height: 90px;
@ -197,4 +204,25 @@
.carouselGaleryThumbs :global(.vtex-store-components-3-x-productImagesThumb) {
margin-right: 16px;
width: 90px !important;
height: 90px !important;
}
@media (max-width: 1024px) {
.carouselGaleryThumbs :global(.vtex-store-components-3-x-productImagesThumb) {
margin-bottom: 0;
}
}
.shippingTable {
border: none;
}
.shippingTableHead {
display: contents;
display: flex;
}
@media (max-width: 1024px) {
.productImagesGallerySlide {
width: 100% !important;
}
}

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

@ -10,12 +10,38 @@
.contentContainer {
padding: 32px 72px 0 72px;
}
@media (max-width: 1024px) {
.contentContainer {
padding: 16px 24px 0 24px;
}
}
.contentContainer .contentItem {
display: flex;
}
@media (max-width: 1024px) {
.contentContainer .contentItem {
flex-direction: column;
position: relative;
}
.contentContainer .contentItem::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background-color: #929292;
bottom: -16px;
}
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-left: 32px;
}
@media (max-width: 1024px) {
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
margin: 0;
margin-top: 16px;
}
}
.contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans";
font-style: normal;
@ -35,6 +61,12 @@
width: 632px;
height: 632px;
}
@media (max-width: 1024px) {
.contentContainer .contentItem :global(.vtex-store-components-3-x-productImage) {
width: 100%;
height: auto;
}
}
.listContainer {
border-bottom: 1px solid #bfbfbf;
@ -43,17 +75,52 @@
display: flex;
gap: 120px;
}
@media (max-width: 1360px) {
.listContainer {
gap: 0;
justify-content: space-around;
}
}
@media (max-width: 1024px) {
.listContainer {
flex-direction: column;
width: 100%;
gap: 0;
max-width: 944px;
border-top: 1px solid #bfbfbf;
padding: 8px 0;
}
}
.listContainer :global(.vtex-button) {
background-color: white;
color: black;
border: none;
}
@media (max-width: 1024px) {
.listContainer :global(.vtex-button) {
height: fit-content;
}
}
@media (max-width: 1024px) {
.listContainer :global(.vtex-button__label) {
padding: 0 !important;
}
}
.listItem {
position: relative;
bottom: -5px;
color: #bfbfbf;
}
@media (max-width: 1024px) {
.listItem {
height: 38px;
margin: 8px 0;
display: flex;
align-items: center;
position: unset;
}
}
.listItem :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
@ -69,6 +136,11 @@
position: relative;
bottom: -5px;
}
@media (max-width: 1024px) {
.listItemActive {
border: none;
}
}
.listItemActive :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;

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

@ -1,6 +1,20 @@
.flexRow--product-container {
:global(.vtex-store-components-3-x-container) {
padding: 0;
}
}
.flexRowContent--product-container {
margin: 0;
padding: 16px 40px;
@media (max-width: 1024px) {
flex-direction: column;
.stretchChildrenWidth {
padding: 0;
width: 100% !important;
}
}
}
.flexRowContent--addToBag {
.stretchChildrenWidth {

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

@ -9,8 +9,11 @@
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
@media (max-width: 1024px) {
justify-content: start;
}
}
.product-identifier__label {

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

@ -2,6 +2,15 @@
background-color: white;
width: 1300px;
margin: auto;
@media (max-width: 1024px) {
width: 944px;
padding: 28px;
}
}
.sliderTrack--carousel {
padding: 0 28px;
}
.paginationDotsContainer {
@ -22,3 +31,39 @@
.slideChildrenContainer {
margin-bottom: 36px;
}
.sliderRightArrow--carousel {
right: 20px;
&::after {
content: url(assets/right-arrow.png);
height: 30px;
width: 12px;
display: block;
}
.caretIcon {
display: none;
}
}
.sliderLeftArrow--carousel {
left: 20px;
&::after {
content: url(assets/left-arrow.png);
height: 30px;
width: 12px;
display: block;
}
.caretIcon {
display: none;
}
}
.slide--carousel {
padding: 0 8px;
@media (max-width: 1024px) {
padding: 0 6px;
}
}

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

@ -1,11 +1,14 @@
.productNameContainer--quickview {
text-align: right;
color: #575757;
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
@media (max-width: 1024px) {
text-align: left;
}
}
.skuSelectorContainer--sku-selector {
@ -15,7 +18,6 @@
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorItemTextValue {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -55,7 +57,6 @@
.skuSelectorName {
font-size: 0;
&::after {
/* font-family: "Open Sans"; */
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -186,6 +187,9 @@
.carouselGaleryThumbs {
height: 90px;
margin-top: 16px !important;
@media (max-width: 1024px) {
margin-bottom: 32px;
}
:global(.vtex-store-components-3-x-thumbImg) {
width: 90px;
height: 90px;
@ -194,5 +198,25 @@
:global(.vtex-store-components-3-x-productImagesThumb) {
margin-right: 16px;
width: 90px !important;
height: 90px !important;
@media (max-width: 1024px) {
margin-bottom: 0;
}
}
}
.shippingTable {
border: none;
}
.shippingTableHead {
display: contents;
display: flex;
}
.productImagesGallerySlide {
@media (max-width: 1024px) {
width: 100% !important;
}
}

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

@ -1,10 +1,34 @@
.contentContainer {
padding: 32px 72px 0 72px;
@media (max-width: 1024px) {
padding: 16px 24px 0 24px;
}
.contentItem {
display: flex;
@media (max-width: 1024px) {
flex-direction: column;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background-color: #929292;
bottom: -16px;
}
}
:global(.vtex-store-components-3-x-productDescriptionContainer) {
margin-left: 32px;
@media (max-width: 1024px) {
margin: 0;
margin-top: 16px;
}
:global(.vtex-store-components-3-x-productDescriptionTitle) {
font-family: "Open Sans";
font-style: normal;
@ -24,6 +48,11 @@
:global(.vtex-store-components-3-x-productImage) {
width: 632px;
height: 632px;
@media (max-width: 1024px) {
width: 100%;
height: auto;
}
}
}
}
@ -34,10 +63,33 @@
margin: auto;
display: flex;
gap: 120px;
@media (max-width: 1360px) {
gap: 0;
justify-content: space-around;
}
@media (max-width: 1024px) {
flex-direction: column;
width: 100%;
gap: 0;
max-width: 944px;
border-top: 1px solid #bfbfbf;
padding: 8px 0;
}
:global(.vtex-button) {
background-color: white;
color: black;
border: none;
@media (max-width: 1024px) {
height: fit-content;
}
}
:global(.vtex-button__label) {
@media (max-width: 1024px) {
padding: 0 !important;
}
}
}
@ -45,6 +97,14 @@
position: relative;
bottom: -5px;
color: #bfbfbf;
@media (max-width: 1024px) {
height: 38px;
margin: 8px 0;
display: flex;
align-items: center;
position: unset;
}
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
@ -61,6 +121,10 @@
position: relative;
bottom: -5px;
@media (max-width: 1024px) {
border: none;
}
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;