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

feat:adicionando estilos no mobile

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2023-02-10 16:00:05 -03:00
parent e17c4ccc25
commit 1f1056cad3
17 changed files with 268 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
react/components/Example/paymentWithPix.tsx
View File

@ -1,24 +1,24 @@
import React from 'react';
import {useProduct} from 'vtex.product-context';
import styles from "./styles.css";
const paymentWithPix =() => {
const PaymentWithPix =() => {
const product = useProduct();
let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg"
return (
<div className={styles.wrapperPix}>
<img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
<div className={styles.wrapperPrices}>
<p className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
<p className={styles.wrapperSubtitle}>R$ 10 % de desconto</p>
<div className="wrapperPix">
<img className="wrapperPixImage" src={imagePix} alt="Imagem do icone do pix" />
<div className="wrapperPrices">
<p className="wrapperTitle">{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
<p className="wrapperSubtitle">R$ 10 % de desconto</p>
</div>
</div>
)
}
export default paymentWithPix
export default PaymentWithPix;

11
react/components/Example/styles.css
View File

@ -1,20 +1,21 @@
.wrapperPix {
[class*="wrapperPix"] {
display: flex;
gap: 26px;
align-items: center;
margin-top: 8px;
}
.wrapperPixImage {
[class*="wrapperPixImage"] {
width: 66px;
height: 24px;
}
.wrapperPrices {
[class*="wrapperPrices"] {
display: flex;
flex-direction: column;
}
.wrapperTitle {
[class*="wrapperTitle"] {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
@ -25,7 +26,7 @@
}
.wrapperSubtitle {
[class*="wrapperSubtitle"] {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;

2
react/paymentWithPix.tsx
View File

@ -1,3 +1,3 @@
import paymentWithPix from "./components/Example/paymentWithPix";
import paymentWithPix from "./components/Example/PaymentWithPix";
export default paymentWithPix;

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

@ -100,7 +100,8 @@
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"displayThumbnailsArrows": false,
@ -121,9 +122,8 @@
"html#codigo",
"product-rating-summary",
"flex-layout.row#selling-price",
"example-component",
"html#pixzap",
"html#product-installments",
// "html#pixzap",
// "product-separator",
// "product-identifier.product",
"html#sku-selector",
@ -276,7 +276,11 @@
"defaultActiveTab": true
},
"children": [
"tab-content.item#home1"
"tab-content.item#home1",
"tab-content.item#home2",
"tab-content.item#home3",
"tab-content.item#home4",
"tab-content.item#home5"
]
},
@ -289,6 +293,42 @@
"tabId":"description1"
}
},
"tab-content.item#home2": {
"children": [
"image#image-1",
"product-description"
],
"props": {
"tabId":"description2"
}
},
"tab-content.item#home3": {
"children": [
"image#image-1",
"product-description"
],
"props": {
"tabId":"description3"
}
},
"tab-content.item#home4": {
"children": [
"image#image-1",
"product-description"
],
"props": {
"tabId":"description4"
}
},
"tab-content.item#home5": {
"children": [
"image#image-1",
"product-description"
],
"props": {
"tabId":"description5"
}
},
"html#box-buy" : {
"props":{
@ -345,14 +385,15 @@
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"showNavigationArrows": "always",
"blockClass": "carousel"
}
},
"rich-text#1": {
"props": {
"text": "Você também pode gostar:"
"text": "Você também pode gostar:",
"blockClass": "m3-richText"
}
},
@ -377,12 +418,12 @@
},
"children":["product-installments"]
},
// "html#pixzap": {
// "props":{
// "testId": "pix-price"
// },
// "children":["paymentWithPix"]
// },
"html#pixzap": {
"props":{
"testId": "pix-price"
},
"children":["example-component"]
},
"html#sku-selector": {
"props":{
"testId": "sku-selector",

2
store/interfaces.json
View File

@ -1,6 +1,6 @@
{
"example-component": {
"component": "paymentWithPix"
"component": "PaymentWithPix"
},
"html": {

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

@ -32,4 +32,7 @@
display: flex;
flex-direction: column;
}
.flexRowContent .stretchChildrenWidth {
width: 100% !important;
}
}

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

@ -28,3 +28,9 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media (min-width: 768px) and (max-width: 1024px) {
.product-identifier__value {
justify-content: flex-start;
}
}

10
styles/css/vtex.rich-text.css
View File

@ -20,3 +20,13 @@
display: flex;
justify-content: center;
}
.m3-richText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}

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

@ -10,6 +10,25 @@
/*font*/
/*colors*/
/* Grid breakpoints */
.sliderLayoutContainer--carousel {
width: 100%;
padding: 0 16px 0 16px;
display: flex;
justify-content: center;
margin-bottom: 64px;
}
.sliderLayoutContainer--carousel .paginationDotsContainer {
display: flex;
align-items: center;
}
.sliderLayoutContainer--carousel .paginationDot {
background: black;
}
.sliderLayoutContainer--carousel .paginationDot--isActive {
background: white;
border: 0.5px solid black;
}
@media (min-width: 768px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel {
padding: 24px 62px;

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

@ -12,7 +12,7 @@
/* Grid breakpoints */
.newsletter {
background: black;
border-bottom: 1px solid #FFFFFF;
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
@ -44,9 +44,9 @@
padding: 0 0 0 0;
width: 774px;
}
.newsletter .container {
.container {
max-width: 100%;
padding: 32px 0 16px 0;
margin: 0;
}
@ -57,7 +57,7 @@
font-size: 24px;
line-height: 38px;
text-align: center;
color: #FFFFFF;
color: #ffffff;
border: none;
}
@ -100,11 +100,6 @@
height: auto !important;
}
@media (min-width: 375px) and (max-width: 1444px) {
.stack {
width: 40%;
}
}
.shippingTableHead {
display: grid;
margin-bottom: 15px;
@ -161,7 +156,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shippingTableCellDeliveryEstimate {
@ -174,7 +169,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shippingTableCellDeliveryPrice {
@ -187,7 +182,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shareContainer {
@ -211,7 +206,7 @@
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
@ -321,3 +316,9 @@
margin: auto;
margin: auto;
}
@media (min-width: 768px) and (max-width: 1024px) {
.productBrand--quickview {
justify-content: flex-start;
}
}

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

@ -47,7 +47,7 @@
text-transform: initial;
}
@media (min-width: 768px) and (max-width: 1024px) {
@media (min-width: 637px) and (max-width: 1024px) {
.listContainer {
display: flex;
flex-direction: column;

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

@ -20,5 +20,10 @@
.flexRowContent {
display: flex;
flex-direction: column;
.stretchChildrenWidth {
width: 100% !important;
}
}
}

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

@ -4,9 +4,6 @@
.product-identifier__separator {
display: none;
}
.product-identifier__value {
display: flex;
justify-content: end;
@ -17,3 +14,9 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
@media (min-width: 768px) and (max-width: 1024px) {
.product-identifier__value {
justify-content: flex-start;
}
}

11
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -8,3 +8,14 @@
display: flex;
justify-content: center;
}
.m3-richText {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #575757;
}

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

@ -1,7 +1,24 @@
// .sliderLayoutContainer--carousel {
// padding: ;
// }
.sliderLayoutContainer--carousel {
width: 100%;
padding: 0 16px 0 16px;
display: flex;
justify-content: center;
margin-bottom: 64px;
.paginationDotsContainer {
display: flex;
align-items: center;
}
.paginationDot {
background: black;
}
.paginationDot--isActive {
background: white;
border: 0.5px solid black;
}
}
@media (min-width:768px) and (max-width:1024px) {
.sliderLayoutContainer--carousel {

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

@ -1,6 +1,6 @@
.newsletter {
background: black;
border-bottom: 1px solid #FFFFFF;
border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
@ -33,26 +33,26 @@
padding: 0 0 0 0;
width: 774px;
}
}
.container {
max-width: 100%;
padding: 32px 0 16px 0;
margin: 0;
}
}
.label {
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #FFFFFF;
color: #ffffff;
border: none;
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
font-family:'Opens Sans';
font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
@ -66,7 +66,7 @@
}
.productDescriptionTitle {
font-family:'Opens Sans';
font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
@ -90,9 +90,13 @@
}
@media (min-width: 375px) and (max-width: 1444px) {
.stack {
width: 40%;
}
@media (min-width: 1898px) and (max-width: 2000px) {
// .carouselGaleryThumbs {
// margin-left: 28px;
// }
}
// estilização do frete
@ -104,7 +108,7 @@
}
.shippingTableHeadDeliveryName {
display: flex;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -113,7 +117,7 @@
}
.shippingTableHeadDeliveryEstimate {
display: flex;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -122,7 +126,7 @@
}
.shippingTableHeadDeliveryPrice {
display: flex;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -144,40 +148,40 @@
grid-area: t;
padding: 0;
margin-bottom: 15px;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shippingTableCellDeliveryEstimate {
grid-area: d;
padding: 0;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
.shareContainer {
@ -193,7 +197,7 @@
font-size: 0;
&::after {
content: "Ok";
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
@ -201,7 +205,7 @@
display: flex;
align-items: center;
color: #AFAFAF;
color: #afafaf;
}
}
}
@ -213,7 +217,7 @@
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@ -243,7 +247,7 @@
.productBrand--quickview {
display: flex;
justify-content: end;
font-family: 'Open Sans';
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
@ -254,7 +258,6 @@
//estilização do container de skus ( tamanhos e cores )
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -327,7 +330,10 @@
margin: auto;
}
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.productBrand--quickview{
justify-content: flex-start;
}
}

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

@ -38,7 +38,12 @@
}
}
@media (min-width:768px) and (max-width:1024px) {
@media (min-width:637px) and (max-width:1024px) {
// .container {
// display: block;
// flex-direction: column;
// }
.listContainer {
display: flex;
flex-direction: column;