forked from M3-Academy/challenge-vtex-io
desenvolvimento #5
@ -11,9 +11,9 @@ os Requisitos cobrados serão:
|
||||
|
||||
- HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
|
||||
|
||||
- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ {c}
|
||||
- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c}
|
||||
|
||||
- HACK 1. BreadCrumb;
|
||||
- [x] 1. BreadCrumb;
|
||||
|
||||
- HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
|
||||
|
||||
@ -22,6 +22,8 @@ os Requisitos cobrados serão:
|
||||
- HACK 4. prateleira de produtos,
|
||||
|
||||
- HACK 5. Newsletter.
|
||||
|
||||
- HACK dados_do_produto_e_de_compra-ao_lado_das_imagens
|
||||
}
|
||||
|
||||
|
||||
|
@ -1,15 +1,6 @@
|
||||
{
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
"example-component",
|
||||
"product-specification-group#table",
|
||||
"shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
"children": ["html#breadcrumb", "condition-layout.product#availability"]
|
||||
},
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
@ -53,7 +44,7 @@
|
||||
"paddingTop": 7,
|
||||
"paddingBottom": 7
|
||||
},
|
||||
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
|
||||
"children": ["flex-layout.col#stack"]
|
||||
},
|
||||
|
||||
"stack-layout": {
|
||||
@ -80,7 +71,8 @@
|
||||
"children": ["stack-layout"],
|
||||
"props": {
|
||||
"width": "60%",
|
||||
"rowGap": 0
|
||||
"rowGap": 10,
|
||||
"blockClass": "StackLayout"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#product-image": {
|
||||
@ -90,8 +82,10 @@
|
||||
"props": {
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"phone": "auto"
|
||||
},
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false,
|
||||
"displayThumbnailsArrows": false,
|
||||
"thumbnailsOrientation": "horizontal"
|
||||
}
|
||||
|
@ -9,6 +9,14 @@
|
||||
/* Grid breakpoints */
|
||||
.container {
|
||||
padding: 0 40px 16px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 96rem;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
.container {
|
||||
padding: 0 0 0 10.67%;
|
||||
}
|
||||
}
|
||||
.container .term, .container .termArrow {
|
||||
display: none;
|
||||
|
@ -39,10 +39,70 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.newsletter {
|
||||
background: black;
|
||||
.carouselContainer {
|
||||
padding: 0 40px 0;
|
||||
}
|
||||
.carouselContainer .productImage {
|
||||
max-width: 85.238%;
|
||||
}
|
||||
@media screen and (min-width: 156.25em) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 904px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 296px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 23.375em) {
|
||||
.carouselContainer .productImage {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.carouselContainer .productImage .productImageTag- {
|
||||
max-height: 100% !important;
|
||||
margin-bottom: 1em;
|
||||
align-self: stretch;
|
||||
}
|
||||
.carouselContainer .productImage .productImageTag--main {
|
||||
border-radius: 8px;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs {
|
||||
flex-direction: row;
|
||||
display: block;
|
||||
height: max-content;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
width: max-content !important;
|
||||
background: white;
|
||||
margin-right: 1em;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
.carouselGaleryThumbs .productImagesThumb {
|
||||
width: 30% !important;
|
||||
}
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb .figure {
|
||||
width: 100%;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb .figure--video {
|
||||
min-height: 90px;
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
|
||||
border-radius: 8px;
|
||||
min-height: 5.54em;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em) {
|
||||
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
|
||||
min-height: 4.9em;
|
||||
}
|
||||
}
|
||||
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
|
||||
border-radius: 8px;
|
||||
width: 90px;
|
||||
}
|
@ -1,6 +1,11 @@
|
||||
.container{
|
||||
padding: 0 40px 16px;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 96rem;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
padding: 0 0 0 10.67%;
|
||||
}
|
||||
.term,.termArrow{
|
||||
display: none;
|
||||
}
|
||||
|
@ -44,10 +44,60 @@
|
||||
}
|
||||
}
|
||||
|
||||
.newsletter{
|
||||
background: black;
|
||||
.carouselContainer{
|
||||
padding: 0 40px 0;
|
||||
.productImage{
|
||||
max-width:85.238%;
|
||||
@media screen and (min-width: 156.25em){
|
||||
min-width: 904px;
|
||||
max-width:100%;
|
||||
}
|
||||
@media screen and (max-width: 64.0625em){
|
||||
min-width: 296px;
|
||||
max-width:100%;
|
||||
}
|
||||
@media screen and (max-width: 23.375em){
|
||||
min-width: 0;
|
||||
max-width:100%;
|
||||
}
|
||||
.productImageTag-{
|
||||
max-height: 100% !important;
|
||||
margin-bottom: 1em;
|
||||
align-self: stretch;
|
||||
&-main{
|
||||
border-radius: 8px;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.carouselGaleryThumbs{
|
||||
display: block;
|
||||
height: max-content;
|
||||
.productImagesThumb{
|
||||
width: max-content !important;
|
||||
background:white;
|
||||
margin-right: 1em;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
width: 30% !important;
|
||||
}
|
||||
.figure{
|
||||
width: 100%;
|
||||
&--video{
|
||||
min-height: 90px;
|
||||
.thumbImg{
|
||||
border-radius: 8px;
|
||||
min-height: 5.54em;
|
||||
@media screen and (max-width: 64.0625em){
|
||||
min-height: 4.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.thumbImg{
|
||||
border-radius: 8px;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.carouselGaleryThumbs{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user