From 8c81925dcac2b32aff8cb7c5bfc7613eb626063b Mon Sep 17 00:00:00 2001 From: Leonardo Date: Fri, 10 Feb 2023 14:04:56 -0300 Subject: [PATCH] feat: faz o site para telas de 1024px --- react/components/Html/styles.css | 158 +++++++++++++++++++++++++-- store/blocks/home/home.jsonc | 2 +- store/blocks/pdp/product.jsonc | 94 ++++++++++++---- styles/css/vtex.breadcrumb.css | 50 +-------- styles/css/vtex.condition-layout.css | 11 +- styles/css/vtex.flex-layout.css | 6 - 6 files changed, 227 insertions(+), 94 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 28f23ff..1bb92b5 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,14 +1,27 @@ [class*="productImageTag--main"] { - object-fit: none; + object-fit: none !important; + width: 98.225% !important; + height: 100% !important; + max-height: 664px !important; } [class*="flexRow--button-cart"] :global(.vtex-button) { background-color: black; border-color: black; - width: 97.952%; height: 49px; } +[class*="flexRow--button-cart"] { + background-color: black; + border-color: black; + width: 73.464%; + height: 49px; + position: relative; + bottom: 72px; + left: 148px; + margin-left: 5px; +} + [class*="numeric-stepper__minus-button__text"] { position: absolute !important; left: 50%; @@ -62,6 +75,11 @@ height: 46px; } +[class*="skuSelectorContainer"] { + display: flex; + flex-direction: column-reverse; +} + [class*="skuSelectorSubcontainer--cor"] :global(.vtex-store-components-3-x-skuSelectorName) { font-size: 0; @@ -179,6 +197,20 @@ margin-left: 32px; } +[class*="vtex-address-form__postalCode"] :global(.vtex-input__label) { + font-size: 0; +} + +[class*="vtex-address-form__postalCode"] :global(.vtex-input__label)::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + content: "CALCULAR FRETE:"; +} + [class*="vtex-address-form__postalCode-forgottenURL"] :global(.pointer) { color: black; text-decoration: underline; @@ -208,7 +240,7 @@ } [class*="listContainer"] { - justify-content: space-between; + justify-content: space-around; color: black; background-color: transparent; border-bottom: 1px solid #bfbfbf; @@ -331,7 +363,7 @@ content: "ENTREGA"; position: relative; right: 500%; - top: -30px; + top: -23px; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -344,7 +376,7 @@ content: "FRETE"; position: relative; right: 329%; - top: -52px; + top: -45px; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -357,7 +389,7 @@ content: "PRAZO"; position: relative; right: 108%; - top: -72px; + top: -67px; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -476,7 +508,115 @@ } [class*="container--home"] { - width: 94.44%; - margin-right: auto; - margin-left: auto; + margin: 0 40px; +} + +[class*="agenciamagma-store-theme-5-x-html--shipping"] { + position: relative; + bottom: 77px; + margin-top: 16px; +} + +[class*="thumbImg--product-images"] { + width: 90px; + height: 90px; + gap: 16px; + display: flex; +} + +[class*="productDescriptionText"] + :global(.vtex-store-components-3-x-container) { + margin: 0 !important; +} + +[class*="vtex-store-components-3-x-container"] { + margin: 0 40px; +} + +@media (max-width: 1024px) { + [class*="listContainer"] { + flex-direction: column; + } + + [class*="vtex-store-components-3-x-container"] + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + } + + [class*="vtex-flex-layout-0-x-stretchChildrenWidth"] { + width: 100% !important; + } + + [class*="productNameContainer"] { + text-align: start !important; + } + + [class*="product-identifier__value"] { + text-align: start !important; + position: unset !important; + } + + [class*="productImageTag"] { + max-height: none !important; + width: 100% !important; + margin: auto !important; + } + + [class*="ph5-m"] { + padding-left: 0 !important; + padding-right: 0 !important; + } + [class*="vtex-store-components-3-x-container"] { + margin: 0 40px; + } + + [class*="flexRow--button-cart"] { + width: 85.382%; + } + + [class*="productDescriptionContainer"] { + margin-left: 0px; + } + + [class*="agenciamagma-store-theme-5-x-html--shipping"] { + position: relative !important; + bottom: 75.5px !important; + margin-top: 16px !important; + } + + [class*="agenciamagma-store-theme-5-x-html--shipping"] { + position: relative !important; + bottom: 75.5px !important; + margin-top: 16px !important; + } + + [class*="productDescriptionText"] + :global(.vtex-store-components-3-x-container) { + margin: 0 !important; + } + + [class*="listContainer"] { + border-top: 1px solid #bfbfbf; + } + [class*="listItemActive"] :global(.vtex-button) { + border-bottom: none; + } + [class*="imageNormal"] { + width: 291.4px; + height: 291.4px; + } + + [class*="listItem"] :global(.vtex-button):hover { + border-bottom: none; + } + + [data-testid="product-description"] { + position: relative; + bottom: 125px; + } + + [class*="thumbImg--product-images"] { + gap: 0px; + } } diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..685a5e3 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -66,7 +66,7 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "fullWidth": false, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d2e901b..c1d5510 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,9 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#home", + "html#product-description", "rich-text#textproducts", - "list-context.product-list#demo1", + "list-context.product-list#produtos", "rich-text#textnewsletter", "newsletter", "product-questions-and-answers" @@ -47,8 +47,13 @@ "product-summary-price" ] }, - "list-context.product-list#demo1": { + "list-context.product-list#produtos": { "blocks": ["product-summary.shelf#demo1"], + "children": ["html#slider"] + }, + + "html#slider": { + "props": { "testId": "product-summary-list" }, "children": ["slider-layout#demo-products"] }, @@ -70,12 +75,17 @@ }, "flex-layout.row#description": { "props": { + "width": { + "tablet": "100%" + }, "marginBottom": 7 }, "children": ["image#tab", "product-description"] }, "condition-layout.product#availability": { "props": { + "blockClass": "produtoHome", + "id": "produtoHome", "conditions": [ { "subject": "isProductAvailable" @@ -122,11 +132,12 @@ } }, "flex-layout.row#product-image": { - "props": {}, + "props": { "blockClass": "product-images" }, "children": ["html#product-images"] }, "product-images": { "props": { + "blockClass": "product-images", "contentType": "images", "showNavigationArrows": false, "showPaginationDots": false, @@ -139,13 +150,17 @@ } }, + "html#shipping-simulator": { + "props": { + "blockClass": "shipping", + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "html#product-images": { "props": { - "thumbnailsOrientation": "horizontal", - "tag": "section", - "infinite": "true", - "preventHorizontalStretch": "true", - "verticalAlign": "bottom", + "blockClass": "product-images", "testId": "product-images" }, "children": ["product-images"] @@ -158,33 +173,55 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "html#codigo", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments#m3-academy", - "ProductContext", - "sku-selector", + "html#product-installments", + "html#pix", + "html#sku-selector", + "html#product-quantity", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" ] }, + "html#sku-selector": { + "props": { "testId": "sku-selector" }, + "children": ["sku-selector"] + }, + + "html#pix": { + "props": { "testId": "pix-price", "blockClass": "pix" }, + "children": ["ProductContext"] + }, + + "html#product-installments": { + "props": { "testId": "product-installments" }, + "children": ["product-installments"] + }, + "image#tab": { "props": { "src": "assets/img-sapato.png" } }, - "tab-layout#home": { + "tab-layout": { "children": ["tab-list#home", "tab-content#home"], "props": { "blockClass": "home", "defaultActiveTabId": "home1" } }, + + "html#product-description": { + "props": { "testId": "product-description" }, + "children": ["tab-layout"] + }, + "tab-list#home": { "children": [ "tab-list.item#home1", @@ -270,7 +307,7 @@ } }, - "product-installments#m3-academy": { + "product-installments": { "props": { "installmentsCriteria": "max-quantity-without-interest", "markers": ["discount", "vezes"], @@ -283,6 +320,11 @@ "props": { "marginBottom": 3 }, + "children": ["html#product-name"] + }, + + "html#product-name": { + "props": { "testId": "product-name" }, "children": ["vtex.store-components:product-name"] }, @@ -300,11 +342,15 @@ "marginBottom": 7, "blockClass": "button-cart" }, - "children": ["product-quantity", "html#add-to-cart-button"] + "children": ["html#add-to-cart-button"] }, "product-quantity": { - "props": { "width": "25%" } + "props": {} + }, + "html#product-quantity": { + "props": { "testId": "product-quantity" }, + "children": ["product-quantity"] }, "html#add-to-cart-button": { @@ -334,11 +380,17 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "html#codigo", + "flex-layout.row#availability", + "sku-selector" ] }, + + "html#codigo": { + "props": { "blockClass": "codigo", "testId": "product-code" }, + "children": ["product-identifier.product"] + }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index d0bd1f3..76faa63 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -1,52 +1,8 @@ .homeIcon { - visibility: hidden; + display: none; } - -.arrow--1 { - visibility: hidden; - content: ""; -} - -.arrow--1::after { - visibility: visible; +.homeLink::after { content: "Home"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; -} - -.link--2 { - visibility: hidden; - content: ""; -} - -.link--2::after { - visibility: visible; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - content: "Sapatos"; -} - -.term { - visibility: hidden; -} - -.term::after { - visibility: visible; - content: "Sandálias"; - font-family: "Open Sans"; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; position: relative; - right: 230px; + bottom: 2px; } diff --git a/styles/css/vtex.condition-layout.css b/styles/css/vtex.condition-layout.css index 234303d..139597f 100644 --- a/styles/css/vtex.condition-layout.css +++ b/styles/css/vtex.condition-layout.css @@ -1,11 +1,2 @@ -@media screen and (max-width: 1024px) { - .flexRowContent { - display: flex; - flex-direction: column; - } -} -.flexRowContent { - margin-right: 40px; - margin-left: 40px; -} + diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 274fbca..93c753d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -3,12 +3,6 @@ padding: 0 0.5rem; } -@media screen and (max-width: 1024px) { - .flexRowContent { - display: flex; - flex-direction: column; - } -} @media screen and (min-width: 40em) { .flexRowContent--menu-link,