diff --git a/gulpfile.js b/gulpfile.js index d9a6acc..6fe43f4 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -13,7 +13,7 @@ const paths = { }, img: { - all: 'src/assets/**', + all: 'src/assets/images/**', }, styles: { diff --git a/src/assets/arrowLeft.svg b/src/assets/images/arrowLeft.svg similarity index 100% rename from src/assets/arrowLeft.svg rename to src/assets/images/arrowLeft.svg diff --git a/src/assets/arrowRight.svg b/src/assets/images/arrowRight.svg similarity index 100% rename from src/assets/arrowRight.svg rename to src/assets/images/arrowRight.svg diff --git a/src/assets/images/img1-279.png b/src/assets/images/img1-279.png new file mode 100644 index 0000000..1fd95e5 Binary files /dev/null and b/src/assets/images/img1-279.png differ diff --git a/src/assets/img4.png b/src/assets/images/img1-544.png similarity index 100% rename from src/assets/img4.png rename to src/assets/images/img1-544.png diff --git a/src/assets/images/img1-992.png b/src/assets/images/img1-992.png new file mode 100644 index 0000000..1d183f9 Binary files /dev/null and b/src/assets/images/img1-992.png differ diff --git a/src/assets/images/img2-279.png b/src/assets/images/img2-279.png new file mode 100644 index 0000000..3068ce5 Binary files /dev/null and b/src/assets/images/img2-279.png differ diff --git a/src/assets/img2.png b/src/assets/images/img2-544.png similarity index 100% rename from src/assets/img2.png rename to src/assets/images/img2-544.png diff --git a/src/assets/images/img2-992.png b/src/assets/images/img2-992.png new file mode 100644 index 0000000..e17d8a8 Binary files /dev/null and b/src/assets/images/img2-992.png differ diff --git a/src/assets/images/img3-279.png b/src/assets/images/img3-279.png new file mode 100644 index 0000000..5dc02b1 Binary files /dev/null and b/src/assets/images/img3-279.png differ diff --git a/src/assets/img3.png b/src/assets/images/img3-544.png similarity index 100% rename from src/assets/img3.png rename to src/assets/images/img3-544.png diff --git a/src/assets/images/img3-992.png b/src/assets/images/img3-992.png new file mode 100644 index 0000000..f83a960 Binary files /dev/null and b/src/assets/images/img3-992.png differ diff --git a/src/assets/images/img4-279.png b/src/assets/images/img4-279.png new file mode 100644 index 0000000..87d4d8e Binary files /dev/null and b/src/assets/images/img4-279.png differ diff --git a/src/assets/img1.png b/src/assets/images/img4-544.png similarity index 100% rename from src/assets/img1.png rename to src/assets/images/img4-544.png diff --git a/src/assets/images/img4-992.png b/src/assets/images/img4-992.png new file mode 100644 index 0000000..7481a3b Binary files /dev/null and b/src/assets/images/img4-992.png differ diff --git a/src/scripts/components/TouristAttractions.js b/src/scripts/components/TouristAttractions.js index 12d6763..bde7a6d 100644 --- a/src/scripts/components/TouristAttractions.js +++ b/src/scripts/components/TouristAttractions.js @@ -2,22 +2,30 @@ export class TouristAttractions { constructor () { this.list = [ { - image: 'img1.png', + // image: 'img1-279.png', + // image: 'img1-544.png', + image: 'img1-992.png', titulo: 'Pão de Açucar', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - image: 'img2.png', + // image: 'img2-279.png', + // image: 'img2-544.png', + image: 'img2-992.png', titulo: 'Cristo Redentor', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - image: 'img3.png', + // image: 'img3-279.png', + // image: 'img3-544.png', + image: 'img3-992.png', titulo: 'Ilha Grande', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, { - image: 'img4.png', + // image: 'img4-279.png', + // image: 'img4-544.png', + image: 'img4-992.png', titulo: 'Centro Histórico de Paraty', description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.', }, @@ -28,6 +36,7 @@ export class TouristAttractions { this.events(); this.carrossel(); this.renderListItems(); + this.removeSlick(); } selectors () { @@ -70,10 +79,50 @@ export class TouristAttractions { } }; - addProperty (e) { - e.preventDefault(); - const spotImg = this.spanInput.children[0].src + renderListItems () { + let spotStructure = ''; + + this.list.forEach((i) => { + spotStructure += ` +
  • +
    + +
    +

    ${i.titulo}

    +

    ${i.description}

    +
    • `; + }); + + this.removeSlick(); + this.ulList.innerHTML = spotStructure; + this.carrossel(); + }; + + carrossel () { + if(window.screen.width > 1024) { + $('.wrapper-ul__cards').slick({ + dots: true, + infinite: true, + arrows: true, + slidesToShow: 4, + slidesToScroll: 1, + }) + + } + }; + + + removeSlick () { + if(window.screen.width > 1024) { + $('.wrapper-ul__cards').slick('unslick'); + } + }; + + addProperty (e) { + e.preventDefault(); + + const spotImg = this.spanInput.children[0].src const spotTitle = e.target['input-title'].value const spotDescription = e.target['input-description'].value @@ -87,57 +136,15 @@ export class TouristAttractions { this.list.push(spot); this.renderListItems(); this.resetInputs(); - }else { - alert('Preencha todos os campos') - } - }; - - renderListItems () { - let spotStructure = ''; - - this.list.forEach((i) => { - spotStructure += ` -
  • -
    - Imagem Turismo -
    -
    -

    ${i.titulo}

    -

    ${i.description}

    -
    -
    • `; - }); - this.removeSlick(); - this.ulList.innerHTML = spotStructure; - this.carrossel(); - }; - - carrossel () { - if(window.screen.width > 1024) { - $('.wrapper-ul__cards').slick({ - dots: true, - infinite: true, - arrows: true, - slidesToShow: 3, - slidesToScroll: 1, - variableWidth: true, - }) - - } - }; - - removeSlick () { - if(window.screen.width > 1024) { - $('.wrapper-ul__cards').slick('unslick'); } }; resetInputs () { this.inputTitle.value = ''; this.inputDescription.value = ''; - this.labelInput.style.border = ""; + this.labelInput.style.border = ''; this.spanInput.innerText = this.textSpanInput; - this.spanInput.style.border = ""; + this.spanInput.style.border = ''; }; diff --git a/src/styles/common/global.scss b/src/styles/common/global.scss new file mode 100644 index 0000000..7c3d374 --- /dev/null +++ b/src/styles/common/global.scss @@ -0,0 +1,9 @@ +.container-pai { + padding: 40px 130px 0; +} + +@media only screen and (max-width: 1024px) { + .container-pai { + padding: 40px 16px 0; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index c5012f4..fc235c4 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ @import "utils/variables.scss"; @import "utils/fonts.scss"; +@import "common/global.scss"; @import "common/reset.scss"; -@import "partials/form.scss"; +@import "partials/slick.scss"; +@import "partials/slick-theme.scss"; +@import "partials/form.scss"; +@import "partials/result.scss"; diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index 8d4ba94..b279581 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -1,47 +1,48 @@ @import "utils/fonts.scss"; -.container-h1-input { - padding: 40px 130px 0; + .page-titulo__tourist { font-family: "Poppins", sans-serif; font-style: normal; font-weight: 700; - font-size: 32px; + font-size: 64px; line-height: 120%; } .container-input { display: flex; margin: 40px 0 60px; - .wrapper-input__img label { - display: flex; - align-items: center; - justify-content: center; - color: $grey-500; - font-family: "Roboto", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.15px; - width: 343px; - height: 212px; + .wrapper-input__img { margin-right: 20px; - border: 2px solid $grey-200; - border-radius: 8px; - cursor: pointer; + + label { + display: flex; + align-items: center; + justify-content: center; + color: $grey-500; + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 48px; + letter-spacing: 0.15px; + width: 600px; + height: 400px; + border: 2px solid $grey-200; + border-radius: 8px; + cursor: pointer; + } } .input__span { display: flex; justify-content: center; align-items: center; - width: 343px; - height: 212px; + width: 600px; + height: 400px; } .wrapper-input__img input { display: none; - margin-right: 20px; } .wrapper-input__text { display: flex; @@ -49,8 +50,8 @@ .input-text__titulo { display: flex; - width: 328px; - height: 56px; + width: 575px; + height: 64px; margin-bottom: 20px; padding: 16px 16px 16px; border: 2px solid $grey-100; @@ -59,22 +60,22 @@ font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; - font-size: 16px; - line-height: 24px; + font-size: 32px; + line-height: 38px; letter-spacing: 0.15px; } .input-text__descricao { display: flex; - width: 417px; - height: 136px; + width: 725px; + height: 320px; margin-bottom: 16px; - padding: 40px 20px 72px; + padding: 40px 16.77px 222.87px; color: $grey-500; font-family: "Roboto", sans-serif; font-style: normal; font-weight: 400; - font-size: 16px; - line-height: 24px; + font-size: 32px; + line-height: 48px; letter-spacing: 0.15px; border: 2px solid $grey-100; border-radius: 8px; @@ -87,14 +88,14 @@ display: flex; align-items: center; justify-content: center; - width: 121px; - height: 56px; + width: 201px; + height: 80px; background: $red-500; color: $white-500; font-family: "Poppins", sans-serif; font-style: normal; font-weight: 700; - font-size: 16px; + font-size: 32px; border: 1px solid $red-500; border-radius: 8px; cursor: pointer; @@ -113,84 +114,132 @@ border-radius: 8px; object-fit: cover; } + +@media only screen and (width: 490px){ + .container-pai { + .container-h1-input { + .form__tourist-attractions { + .container-input { + width: 343px ; + .wrapper-input__img { + label { + width: 343px; + height: 212px; + } + } + .input__span { + width: 343px; + height: 212px; + } + .wrapper-input__text { + .input-text__titulo { + width: 340.91px; + height: 54px; + } + .input-text__descricao { + width: 340.91px; + height: 131.14px; + } + .wrapper-button-submit { + .button-submit__input{ + width: 343px; + height: 56px; + } + } + } + } + } + } + } } +@media only screen and (max-width: 1024px) { + .container-pai { + .container-h1-input { + .container-input { + flex-direction: column; + .wrapper-input__img { + margin: 0 0 17px; + label { + width: 100%; + height: 570px; + } + } + .input__span { + width: 100%; + height: 570px; + } + .wrapper-input__text { + .input-text__titulo { + width: 100%; + height: 54px; + } + .input-text__descricao { + width: 100%; + height: 131.14px; + } + .wrapper-button-submit { + .button-submit__input { + width: 100%; + height: 56px; + } + } -.container-cards { - padding: 0px 130px; + } + + } + } - .page-titulo__img__spot { - font-family: "Poppins", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 32px; - line-height: 120%; - margin-bottom: 38px; } - .wrapper-ul__cards { - display: flex; - align-items: center; +} - .slick-prev { - background: url('arrowLeft.svg') no-repeat !important; - height: 30px; - width: 13.64px; - left: -6.16%; - &::before { - display: none; - } + +@media only screen and (max-width: 2499px) { + + .container-h1-input { + .page-titulo__tourist { + font-size: 32px; } - - .slick-next { - background: url('arrowRight.svg') no-repeat center center !important; - height: 30px; - width: 13.64px; - right: -4.56%; - &::before { - display: none; - } - } - - .wrapper-cards__li { - width: 279px !important; - box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); - border-radius: 8px; - margin: 0 10.5px; - max-height: 424px; - - .result-card__img { - width: 100%; - border-radius: 8px; - height: 212px; - object-fit: cover; - } - .container__text { - padding: 24px; - overflow-y: scroll; - - .result-card__title { - font-family: 'Poppins', sans-serif; - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 28px; - color: $black-500; - margin-bottom: 8px; - width: 231px; - height: 60px; + .container-input { + .wrapper-input__img { + label { + width: 343px; + height: 212px; + font-size: 26px; + line-height: 24px; } - .result-card__description { - font-family: 'Roboto', sans-serif; - font-style: normal; - font-weight: 400; + } + .input__span { + width: 343px; + height: 212px; + font-size: 16px; + } + + .wrapper-input__text { + .input-text__titulo { + width: 328px; + height: 56px; font-size: 16px; line-height: 24px; - color: $grey-500; - height: 96px; - overflow-y: scroll; + } + .input-text__descricao { + width: 417px; + height: 136px; + font-size: 16px; + line-height: 24px; + padding: 40px 20px 72px; } + .wrapper-button-submit { + .button-submit__input { + width: 121px; + height: 56px; + font-size: 16px; + } + } } + + } } } diff --git a/src/styles/partials/result.scss b/src/styles/partials/result.scss new file mode 100644 index 0000000..1bff07a --- /dev/null +++ b/src/styles/partials/result.scss @@ -0,0 +1,167 @@ +.container-cards { + width: 100%; + margin-bottom: 165px; + + .page-titulo__img__spot { + font-family: "Poppins", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 64px; + line-height: 120%; + margin-bottom: 38px; + } + + .wrapper-ul__cards { + display: flex; + align-items: center; + width: 100%; + column-gap: 10.5px; + .slick-prev { + background: url('arrowLeft.svg') no-repeat center center !important; + height: 58px; + width: 26px; + left: -4.56%; + &::before { + display: none; + } + } + + .slick-next { + background: url('arrowRight.svg') no-repeat center center !important; + height: 30px; + width: 13.64px; + right: -4.56%; + &::before { + display: none; + } + } + .wrapper-cards__li { + display: flex; + flex-direction: column; + width: 100%; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08); + border-radius: 8px; + background-color: $white-500; + + + .result-card__img { + width: 100%; + border-radius: 8px; + object-fit: cover; + object-position: top; + } + .result-card__title { + font-family: 'Poppins', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 56px; + color: $black-500; + margin: 24px 24px 8px; + height: 120px; + overflow-wrap: anywhere; + } + .result-card__description { + font-family: 'Roboto', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 48px; + color: $grey-500; + overflow-y: scroll; + white-space: normal; + margin: 0 24px 24px; + height: 192px; + overflow-wrap: anywhere; + &::-webkit-scrollbar { + width: 4px; + } + &::-webkit-scrollbar-thumb { + background: $grey-500; + border-radius: 5px; + border: 1px solid $white-500; + } + } + } + } +} + +@media only screen and (max-width: 490px){ + +} + + + +@media only screen and (max-width: 1024px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + flex-direction: column; + row-gap: 24px; + column-gap: 0; + .wrapper-cards__li { + .result-card__description { + height: 24px; + } + } + } + } + } +} +@media only screen and (width: 1440px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .wrapper-cards__li { + width: 279px; + } + } + } + } +} + +@media only screen and (max-width: 2499px) { + .container-pai { + .container-cards { + .page-titulo__img__spot { + font-size: 32px; + } + .wrapper-ul__cards { + .slick-prev { + height: 30px; + width: 13.64px; + left: -4.56%; + } + .wrapper-cards__li { + .result-card__title { + font-size: 24px; + line-height: 28px; + height: 60px; + } + + .result-card__description { + font-size: 16px; + line-height: 24px; + height: 96px; + } + } + } + } + } +} +@media only screen and (width: 2500px) { + .container-pai { + .container-cards { + .wrapper-ul__cards { + .wrapper-cards__li { + width: 544px !important; + + } + } + } + } +} + + + + diff --git a/src/styles/partials/slick-theme.scss b/src/styles/partials/slick-theme.scss new file mode 100644 index 0000000..1ce2874 --- /dev/null +++ b/src/styles/partials/slick-theme.scss @@ -0,0 +1,218 @@ +@charset "UTF-8"; + +// Default Variables + +// Slick icon entity codes outputs the following +// "\2190" outputs ascii character "←" +// "\2192" outputs ascii character "→" +// "\2022" outputs ascii character "•" + +$slick-font-path: "./fonts/" !default; +$slick-font-family: "slick" !default; +$slick-loader-path: "./" !default; +$slick-arrow-color: white !default; +$slick-dot-color: black !default; +$slick-dot-color-active: $slick-dot-color !default; +$slick-prev-character: "\2190" !default; +$slick-next-character: "\2192" !default; +$slick-dot-character: "\2022" !default; +$slick-dot-size: 6px !default; +$slick-opacity-default: 0.75 !default; +$slick-opacity-on-hover: 1 !default; +$slick-opacity-not-active: 0.25 !default; + +@function slick-image-url($url) { + @if function-exists(image-url) { + @return image-url($url); + } + @else { + @return url($slick-loader-path + $url); + } +} + +@function slick-font-url($url) { + @if function-exists(font-url) { + @return font-url($url); + } + @else { + @return url($slick-font-path + $url); + } +} + +/* Slider */ + +.slick-list { + .slick-loading & { + background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; + } +} + +/* Icons */ +@if $slick-font-family == "slick" { + @font-face { + font-family: "slick"; + src: slick-font-url("slick.eot"); + src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg"); + font-weight: normal; + font-style: normal; + } +} + +/* Arrows */ + +.slick-prev, +.slick-next { + position: absolute; + display: block; + height: 20px; + width: 20px; + line-height: 0px; + font-size: 0px; + cursor: pointer; + background: transparent; + color: transparent; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + padding: 0; + border: none; + outline: none; + &:hover, &:focus { + outline: none; + background: transparent; + color: transparent; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &.slick-disabled:before { + opacity: $slick-opacity-not-active; + } + &:before { + font-family: $slick-font-family; + font-size: 20px; + line-height: 1; + color: $slick-arrow-color; + opacity: $slick-opacity-default; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } +} + +.slick-prev { + left: -25px; + [dir="rtl"] & { + left: auto; + right: -25px; + } + &:before { + content: $slick-prev-character; + [dir="rtl"] & { + content: $slick-next-character; + } + } +} + +.slick-next { + right: -25px; + [dir="rtl"] & { + left: -25px; + right: auto; + } + &:before { + content: $slick-next-character; + [dir="rtl"] & { + content: $slick-prev-character; + } + } +} + +/* Dots */ + +.slick-dotted.slick-slider { + margin-bottom: 30px; +} + +.slick-dots { + position: absolute; + bottom: -25px; + list-style: none; + display: inline-flex; + justify-content: center; + text-align: center; + align-items: center; + padding: 0; + margin: 0; + width: 100%; + gap: 12px; + li { + justify-content: center; + align-items: center; + position: relative; + display: inline-flex; + width: max-content; + padding: 0; + cursor: pointer; + button { + align-items: center; + border: 0; + background: transparent; + display: flex; + height: max-content; + width: max-content; + outline: none; + line-height: 0px; + font-size: 0px; + color: transparent; + cursor: pointer; + &:hover, &:focus { + outline: none; + &:before { + opacity: $slick-opacity-on-hover; + } + } + &:before { + display: flex; + align-items: center; + justify-content: center; + border-radius: 100%; + background-color: $grey-500; + top: 0; + left: 0; + content: ''; + width: 20px; + height: 20px; + text-align: center; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + &.slick-active button:before { + width: 27px; + height: 27px; + border: 1px solid $grey-500; + background: transparent; + } + } +} + +@media only screen and (max-width: 2499px) { + + .slick-dots { + li { + button { + &::before { + width: 10px; + height: 10px; + } + } + &.slick-active button:before { + width: 17px; + height: 17px; + } + } + } +} + + diff --git a/src/styles/partials/slick.scss b/src/styles/partials/slick.scss new file mode 100644 index 0000000..ad163a5 --- /dev/null +++ b/src/styles/partials/slick.scss @@ -0,0 +1,100 @@ +/* Slider */ + +.slick-slider { + position: relative; + display: block; + box-sizing: border-box; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} +.slick-list { + height: 432px; + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + + &:focus { + outline: none; + } + + &.dragging { + cursor: pointer; + cursor: hand; + } +} +.slick-slider .slick-track, +.slick-slider .slick-list { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track { + position: relative; + left: 0; + top: 0; + display: inline-flex; + column-gap: 10.5px; + + &:before, + &:after { + content: ""; + display: table; + } + + &:after { + clear: both; + } + + .slick-loading & { + visibility: hidden; + } +} +.slick-slide { + float: left; + height: 100%; + min-height: 1px; + [dir="rtl"] & { + float: right; + } + img { + display: block; + } + &.slick-loading img { + display: none; + } + + display: none; + + &.dragging img { + pointer-events: none; + } + + .slick-initialized & { + display: block; + } + + .slick-loading & { + visibility: hidden; + } + + .slick-vertical & { + display: block; + height: auto; + border: 1px solid transparent; + } +} +.slick-arrow.slick-hidden { + display: none; +} diff --git a/src/templates/index.html b/src/templates/index.html index 4edb22f..d91c497 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -4,46 +4,47 @@ - - + Tourist Attractions
    -
    -

    Adicionar um Ponto Turístico

    +
    +
    +

    Adicionar um Ponto Turístico

    -
    -
    -
    - - -
    + +
    +
    + + +
    -
    - - -
    - +
    + + +
    + +
    +
    -
    + + +
    - +
    +

    Pontos Turísticos

    -
    - -
    -

    Pontos Turísticos

    - -
      - -
      +
        +
        +