From c220698f84fccf2156621b12edc85af475c2fc1d Mon Sep 17 00:00:00 2001 From: devartes Date: Wed, 23 Nov 2022 07:45:25 -0300 Subject: [PATCH] =?UTF-8?q?style:=20removendo=20c=C3=B3digo=20desnecess?= =?UTF-8?q?=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .editorconfig | 18 ++++---- src/assets/svgs/left arrow big.svg | 3 -- src/assets/svgs/right arrow big.svg | 3 -- src/scripts/components/form.js | 20 ++++---- src/styles/partials/container.scss | 3 -- src/styles/partials/form.scss | 20 ++++---- src/styles/partials/slider.scss | 72 ++++++++++++----------------- src/styles/utils/variables.scss | 13 ++++++ src/templates/index.html | 6 +-- 9 files changed, 76 insertions(+), 82 deletions(-) delete mode 100644 src/assets/svgs/left arrow big.svg delete mode 100644 src/assets/svgs/right arrow big.svg diff --git a/.editorconfig b/.editorconfig index 3b76e68..9e434d8 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,13 +1,13 @@ # EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file -# root = true +root = true -# [*] -# indent_style = space -# indent_size = 4 -# end_of_line = lf -# charset = utf-8 -# trim_trailing_whitespace = true -# insert_final_newline = true -# max_line_length = 100 +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +max_line_length = 100 diff --git a/src/assets/svgs/left arrow big.svg b/src/assets/svgs/left arrow big.svg deleted file mode 100644 index 94c5dc4..0000000 --- a/src/assets/svgs/left arrow big.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svgs/right arrow big.svg b/src/assets/svgs/right arrow big.svg deleted file mode 100644 index 3632b66..0000000 --- a/src/assets/svgs/right arrow big.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/scripts/components/form.js b/src/scripts/components/form.js index e11c97c..ef456cc 100644 --- a/src/scripts/components/form.js +++ b/src/scripts/components/form.js @@ -66,10 +66,10 @@ export class Form { addItemToList(event) { event.preventDefault(); - const itemImage = this.imagePreview[0].children[0].src; + const itemImage = this.imagePreview[0].children[0].src; const itemTitle = event.target["titleInput"].value; const itemDescription = event.target["descriptionText"].value; - + if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") { const item = { src: itemImage, @@ -88,7 +88,7 @@ export class Form { } this.resetInputs(); } - + } renderListItems() { @@ -97,20 +97,24 @@ export class Form { this.list.forEach(function (item) { itemsSlider += `
  • -
    -

    ${item.title}

    -
    ${item.description}
    +
    + +

    ${item.title}

    +
    + ${item.description} +
    +
    • `; }); this.slider.innerHTML = itemsSlider; } - addSlick () { + addSlick () { $(".slider-list").slick({ infinite: true, slidesToShow: 4, - slidesToScroll: 1, + slidesToScroll: 4, variableWidth: true, arrows: true, dots: true, diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss index 1937533..33d1966 100644 --- a/src/styles/partials/container.scss +++ b/src/styles/partials/container.scss @@ -6,21 +6,18 @@ margin: 40px auto; } -$breakpoint-desk: 2500px; @media (min-width: $breakpoint-desk) { .container { width: 89.533%; } } -$breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { .container { width: 96.87%; } } -$breakpoint-mobile: 375px; @media (max-width: $breakpoint-mobile) { .container { width: 91.441%; diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss index 81267fd..5b90f4c 100644 --- a/src/styles/partials/form.scss +++ b/src/styles/partials/form.scss @@ -55,14 +55,15 @@ form { z-index: 1; opacity: 0; } - & img { - object-fit: cover; - width: 100%; - height: 100%; - transition: opacity 0.25s ease-in-out; - opacity: 1; - &[src=""] { - opacity: 0; + & label { + & span { + & img { + object-fit: cover; + width: 100%; + height: 100%; + left: 0; + top: 0; + } } } } @@ -111,7 +112,6 @@ form { position: absolute; } -$breakpoint-desk: 2500px; @media (min-width: $breakpoint-desk) { h1 { font-size: 64px; @@ -174,7 +174,6 @@ $breakpoint-desk: 2500px; } } -$breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { form { width: 100%; @@ -223,7 +222,6 @@ $breakpoint-tablet: 1024px; } } -$breakpoint-mobile: 375px; @media (max-width: $breakpoint-mobile) { form { height: 500.3px; diff --git a/src/styles/partials/slider.scss b/src/styles/partials/slider.scss index 0587c1d..55871d8 100644 --- a/src/styles/partials/slider.scss +++ b/src/styles/partials/slider.scss @@ -48,7 +48,7 @@ h2 { } } & figcaption { - padding: 0 24px 0 24px; + margin: 0 24px 0 24px; font-weight: 400; font-size: 16px; line-height: 24px; @@ -67,23 +67,32 @@ h2 { } } -.slick-prev, -.slick-next { - cursor: pointer; -} .slick-prev { + background: url("svgs/right arrow.svg") no-repeat center center !important; + border: none; left: -40.36px; - &:before { - content: url("svgs/right arrow.svg"); - } + font-size: 0; + background-size: 13.64px 29.47px; + width: 13.64px; + height: 29.47px; } .slick-next { + background: url("svgs/left arrow.svg") no-repeat center center !important; + border: none; + font-size: 0; + background-size: 13.64px 29.47px; right: -40.36px; - &:before { - content: url("svgs/left arrow.svg"); - } + width: 13.64px; + height: 29.47px; +} + + + +.slick-prev:before, .slick-next:before { + font-size: 0; + opacity: unset; } .slick-dots li { @@ -118,7 +127,6 @@ h2 { opacity: unset; } -$breakpoint-desk: 2500px; @media (min-width: $breakpoint-desk) { h2 { font-size: 64px; @@ -155,18 +163,19 @@ $breakpoint-desk: 2500px; .slick-prev { left: -70px; - &:before { - content: url("svgs/left arrow big.svg"); - } + width: 26px; + height: 58px; + background-size: 26px 58px !important; } .slick-next { right: -70px; - &:before { - content: url("svgs/right arrow big.svg"); - } + width: 26px; + height: 58px; + background-size: 26px 58px !important; } + .slick-dots li button:before { font-size: 20.01px; } @@ -177,7 +186,6 @@ $breakpoint-desk: 2500px; } } -$breakpoint-tablet: 1024px; @media (max-width: $breakpoint-tablet) { .slider-container { margin-top: 60px; @@ -213,7 +221,7 @@ $breakpoint-tablet: 1024px; color: $title-item-list-color; } & figcaption { - padding: 0 24px 24px 24px; + margin: 0 24px 24px 24px; &::-webkit-scrollbar { display: none; } @@ -226,33 +234,13 @@ $breakpoint-tablet: 1024px; .slick-dots li button { display: none; } - .slick-track { - max-width: 100%; - margin-top: 0; - display: flex; - flex-direction: column; - transform: translate3d(0, 0, 0) !important; - } .slick-list { - max-width: 100%; + width: 100%; } - .slick-prev { - left: 0; - &:before { - display: none; - } - } - .slick-next { - right: 0; - &:before { - display: none; - } - } } -$breakpoint-mobile: 375px; @media (max-width: $breakpoint-mobile) { .slider-container { margin-top: 40.7px; @@ -269,7 +257,7 @@ $breakpoint-mobile: 375px; color: $title-item-list-color; } & figcaption { - padding: 0 24px 24px 24px; + margin: 0 24px 24px 24px; &::-webkit-scrollbar { display: none; } diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss index b3e68da..37e6803 100644 --- a/src/styles/utils/variables.scss +++ b/src/styles/utils/variables.scss @@ -13,3 +13,16 @@ $title-item-list-color: #333333; $description-item-list-color: #858585; $slider-ellipse-color: #858585; $slider-content-shadow-color: #00000014; + +// Breakpoint + +$breakpoint-desk: 2500px; +$breakpoint-medium-desk: "@media (max-width: 2499) and (min-width: 1440px)"; +$breakpoint-tablet: 1024px; +$breakpoint-mobile: 490px; + + +//tablet 1024px até 491px +// mobile 490px ate 280px +// desk 1025px até 2499px +// desk 4k > 2500px diff --git a/src/templates/index.html b/src/templates/index.html index 1d24e68..e72bd19 100644 --- a/src/templates/index.html +++ b/src/templates/index.html @@ -18,12 +18,12 @@

    Adicionar um Ponto Turístico

    -
    +
    - +
    @@ -38,7 +38,7 @@

    Pontos Turísticos

    -
      +