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

feat: Responsividade tablet finalizada

Browse Source
This commit is contained in:
José Carlos Lins 2023-01-24 23:11:24 -03:00
parent 364a9b2003
commit bcc7f9ec18
13 changed files with 202 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/components/description-section/index.tsx
View File

@ -12,7 +12,9 @@ export const DescriptionSection: FC = () => {
return (
<div className={styles.wrapperImageAndDescription}>
<img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
<div className={styles.containerImageProductDescriptionSection}>
<img className={styles.imageProductDescriptionSection} src={imageProduct} alt={imageProductAlt} />
</div>
<div className={styles.wrapperDescriptionSection}>
<h3 className={styles.descriptionSectionTitle}>Descrição do produto</h3>
<p className={styles.descriptionSectionParagraph}>{descriptionProduct}</p>

35
react/components/description-section/styles.css
View File

@ -1,12 +1,19 @@
.wrapperImageAndDescription{
display: flex;
display: grid;
gap: 32px;
grid-template-columns: 47.591% 1fr;
margin-left: 32px;
}
.containerImageProductDescriptionSection{
width: 100%;
height: 100%;
display: flex;
}
.imageProductDescriptionSection{
margin-left: 32px;
width: 632px;
height: 632px;
width: 100%;
height: 100%;
}
.descriptionSectionTitle{
@ -14,6 +21,10 @@
font-size: 24px;
line-height: 32px;
color: #575757;
height: 40px;
margin: 0;
margin-bottom: 8px;
}
.descriptionSectionParagraph{
@ -22,4 +33,20 @@
line-height: 22px;
color: #929292;
margin: 0;
}
@media screen and (max-width: 1024px) {
.wrapperImageAndDescription{
display: flex;
flex-direction: column;
margin-left: 0;
gap: 16px;
border-bottom: 1px solid #BFBFBF;
}
.descriptionSectionParagraph{
margin-bottom: 16px;
}
}

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

@ -159,7 +159,8 @@
"props": {
"blockClass": "container-slider-related-products-pdp",
"itemsPerPage": {
"desktop": 4
"desktop": 4,
"tablet": 3
}
}
},
@ -249,13 +250,15 @@
"blockClass": "product-images-pdp",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"showNavigationArrows": false,
"displayThumbnailsArrows": false,
"thumbnailsOrientation": "horizontal",
"showPaginationDots": false,
"thumbnailMaxHeight": 90
"thumbnailMaxHeight": 90,
"thumbnailVisibility": "visible"
}
},
"flex-layout.col#right-col": {

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

@ -54,3 +54,11 @@
.flexRowContent--container-related-products-pdp .stretchChildrenWidth {
width: 100% !important;
}
@media screen and (max-width: 1024px) {
.flexRow--container-product-main .flexRowContent--container-product-main {
display: flex;
flex-direction: column;
padding-top: 16px;
}
}

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

@ -22,3 +22,10 @@
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
margin-bottom: 24px;
}
}

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

@ -19,3 +19,9 @@
color: #575757;
margin: 0;
}
@media screen and (max-width: 1024px) {
.container--title-related-products {
margin-bottom: 24px;
}
}

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

@ -254,8 +254,6 @@
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
grid-area: frete;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
font-size: 0;
}
.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
@ -286,3 +284,42 @@
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
grid-area: prazo;
}
@media screen and (max-width: 1024px) {
.productNameContainer {
margin-top: 32px;
text-align: left;
}
}
@media screen and (max-width: 768px) {
.shippingContainer {
width: 100%;
grid-template-areas: "label button" "notCep notCep";
grid-template-columns: 83.4459% 1fr;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
padding: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
grid-area: label;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
padding: 0 16px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
display: none;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
top: 0;
margin-top: 8px;
}
.carouselGaleryThumbs--product-images-pdp {
display: block !important;
}
}

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

@ -47,3 +47,18 @@
.listContainer--container-list-tab-layout-pdp .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
color: #000000;
}
@media screen and (max-width: 1024px) {
.listContainer--container-list-tab-layout-pdp {
flex-direction: column;
padding: 0;
gap: 16px;
margin-bottom: 16px;
}
.listContainer--container-list-tab-layout-pdp .listItem {
width: max-content;
}
.listContainer--container-list-tab-layout-pdp .listItemActive {
border: 0;
}
}

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

@ -51,3 +51,13 @@
width: 100% !important;
}
}
@media screen and (max-width: 1024px) {
.flexRow--container-product-main{
.flexRowContent--container-product-main {
display: flex;
flex-direction: column;
padding-top: 16px;
}
}
}

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

@ -15,3 +15,10 @@
color: rgba(146, 146, 146, 0.48);
}
}
@media screen and (max-width: 1024px) {
.product-identifier--productReference{
justify-content: flex-start;
margin-bottom: 24px;
}
}

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

@ -12,3 +12,9 @@
margin: 0;
}
}
@media screen and (max-width: 1024px) {
.container--title-related-products{
margin-bottom: 24px;
}
}

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

@ -286,9 +286,6 @@
.shippingTableHeadDeliveryPrice{
grid-area: frete;
}
.shippingTableHeadDeliveryPrice{
font-size: 0;
&::after{
content: "FRETE";
@ -330,3 +327,50 @@
}
}
}
@media screen and (max-width: 1024px) {
.productNameContainer{
margin-top: 32px;
text-align: left;
}
}
@media screen and (max-width: 768px) {
.shippingContainer{
width: 100%;
grid-template-areas: "label button"
"notCep notCep";
grid-template-columns: 83.4459% 1fr;
:global(.vtex-address-form__postalCode){
padding: 0;
:global(.vtex-input){
grid-area: label;
:global(.vtex-input-prefix__group){
:global(.vtex-address-form-4-x-input){
padding: 0 16px;
&::placeholder{
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
}
:global(.vtex-input__suffix){
display: none;
}
}
}
:global(.vtex-address-form__postalCode-forgottenURL){
top: 0;
margin-top: 8px;
}
}
}
.carouselGaleryThumbs--product-images-pdp{
display: block !important;
}
}

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

@ -49,3 +49,20 @@
}
}
}
@media screen and (max-width: 1024px) {
.listContainer--container-list-tab-layout-pdp{
flex-direction: column;
padding: 0;
gap: 16px;
margin-bottom: 16px;
.listItem{
width: max-content;
}
.listItemActive{
border: 0;
}
}
}