feat(TouristAttractionsAutoJs): Aplica tamanho de tela no slick e estiliza arrows

gulpfile.js

@@ -13,7 +13,7 @@ const paths = {
     },
 
     img: {
-       all: 'src/assets/*.png',
+       all: 'src/assets/**',
     },
 
     styles: {

src/assets/arrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="30" viewBox="0 0 14 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-1.84423e-05 14.6557L13.3144 29.4724L13.6447 27.1103L2.80736 14.6557L13.6447 2.36209L13.3144 -1.93095e-06L-1.84423e-05 14.6557Z" fill="#858585"/>
+</svg>

src/scripts/components/TouristAttractions.js

@@ -35,16 +35,11 @@ export class TouristAttractions {
         this.spanInput = document.querySelector('.input__span');
         this.textSpanInput = "Imagem";
         this.spanInput.innerText = this.textSpanInput;
-
         this.labelInput = document.querySelector('.label-input')
-
         this.form = document.querySelector('.form__tourist-attractions');
         this.ulList = document.querySelector('.wrapper-ul__cards');
-
         this.inputTitle = document.querySelector('.input-text__titulo');
         this.inputDescription = document.querySelector('.input-text__descricao');
-
-
     }
 
     events () {
@@ -57,7 +52,6 @@ export class TouristAttractions {
         const inputTarget = i.target;
         const file = inputTarget.files[0];
         if (file) {
-
             const reader = new FileReader();
             reader.addEventListener('load', (e) => {
                 const readerTarget = e.target;
@@ -68,26 +62,21 @@ export class TouristAttractions {
                 this.labelInput.style.border = "none";
                 this.spanInput.appendChild(img);
             });
-
             reader.readAsDataURL(file);
             i.target.value = '';
-
-
         }else {
             this.spanInput.innerText = this.textSpanInput;
             this.labelInput.style.border = "";
         }
-
     };
 
-         addProperty (e) {
+    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
 
-
         if (spotImg != '' && spotTitle != '' && spotDescription != '') {
 
             const spot = {
@@ -95,17 +84,12 @@ export class TouristAttractions {
                 titulo: spotTitle,
                 description: spotDescription,
             };
-
-
             this.list.push(spot);
             this.renderListItems();
             this.resetInputs();
-
         }else {
             alert('Preencha todos os campos')
         }
-
-
     };
 
     renderListItems () {
@@ -121,49 +105,40 @@ export class TouristAttractions {
             <h3 class="result-card__title">${i.titulo}</h3>
             <p class="result-card__description">${i.description}</p>
             </div>
-                    </li>
+            </li>`;
-                    `;
+        });
-                });
+        this.removeSlick();
-
+        this.ulList.innerHTML = spotStructure;
-
+        this.carrossel();
-            this.removeSlick();
+    };
-            this.ulList.innerHTML = spotStructure;
-            this.carrossel();
-
-
-        };
-
-            carrossel () {
-
-                if(window.innerWidth >= 1024) {
-                $('.wrapper-ul__cards').slick({
-                    dots: true,
-                    infinite: true,
-                    slidesToShow: 3,
-                    slidesToScroll: 1,
-                    arrows: true,
-                    variableWidth: true,
-                })
-
-             }
-            };
-
-            removeSlick () {
-                if(window.innerWidth >= 1024) {
-
-                    $('.wrapper-ul__cards').slick('unslick');
-                }
-            };
-
-            resetInputs () {
-                this.inputTitle.value = '';
-                this.inputDescription.value = '';
-
-                this.labelInput.style.border = "";
-
-                this.spanInput.innerText = this.textSpanInput;
-                this.spanInput.style.border = "";
-            };
 
+    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.spanInput.innerText = this.textSpanInput;
+        this.spanInput.style.border = "";
+    };
+
+
+}

src/styles/partials/form.scss

@@ -1,8 +1,7 @@
 @import "utils/fonts.scss";
 
 .container-h1-input {
-
+    padding: 40px 130px 0;
-    padding: 40px 130px;
 
     .page-titulo__tourist {
         font-family: "Poppins", sans-serif;
@@ -10,64 +9,15 @@
         font-weight: 700;
         font-size: 32px;
         line-height: 120%;
-      }
+    }
-
+        .container-input {
-      .container-input {
-        display: flex;
-
-        margin: 40px 0 60px;
-
-        .wrapper-input__img label {
             display: flex;
-            align-items: center;
+            margin: 40px 0 60px;
-            justify-content: center;
 
-            color: $grey-500;
+            .wrapper-input__img label {
-            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;
-
-            margin-right: 20px;
-            border: 2px solid $grey-200;
-            border-radius: 8px;
-
-            cursor: pointer;
-          }
-
-          .input__span {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 343px;
-            height: 212px;
-        }
-
-          .wrapper-input__img input {
-            display: none;
-            margin-right: 20px;
-          }
-
-          .wrapper-input__text {
-            display: flex;
-            flex-direction: column;
-
-            .input-text__titulo {
                 display: flex;
-
+                align-items: center;
-                width: 328px;
+                justify-content: center;
-                height: 56px;
-
-                margin-bottom: 20px;
-                padding: 16px 0 16px 16px;
-                border: 2px solid $grey-100;
-                border-radius: 8px;
-
                 color: $grey-500;
                 font-family: "Roboto", sans-serif;
                 font-style: normal;
@@ -75,132 +25,172 @@
                 font-size: 16px;
                 line-height: 24px;
                 letter-spacing: 0.15px;
-              }
+                width: 343px;
-
+                height: 212px;
-              .input-text__descricao {
+                margin-right: 20px;
-                display: flex;
+                border: 2px solid $grey-200;
-
-                width: 417px;
-                height: 136px;
-
-                margin-bottom: 16px;
-                padding: 40px 0px 72px 20px;
-
-                color: $grey-500;
-                font-family: "Roboto", sans-serif;
-                font-style: normal;
-                font-weight: 400;
-                font-size: 16px;
-                line-height: 24px;
-                letter-spacing: 0.15px;
-
-                border: 2px solid $grey-100;
                 border-radius: 8px;
-              }
+                cursor: pointer;
-
+            }
-              .wrapper-button-submit {
+            .input__span {
                 display: flex;
-                justify-content: end;
+                justify-content: center;
+                align-items: center;
+                width: 343px;
+                height: 212px;
+            }
+            .wrapper-input__img input {
+                display: none;
+                margin-right: 20px;
+            }
+            .wrapper-input__text {
+                display: flex;
+                flex-direction: column;
+
+                .input-text__titulo {
+                    display: flex;
+                    width: 328px;
+                    height: 56px;
+                    margin-bottom: 20px;
+                    padding: 16px 16px 16px;
+                    border: 2px solid $grey-100;
+                    border-radius: 8px;
+                    color: $grey-500;
+                    font-family: "Roboto", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 24px;
+                    letter-spacing: 0.15px;
+                }
+                .input-text__descricao {
+                    display: flex;
+                    width: 417px;
+                    height: 136px;
+                    margin-bottom: 16px;
+                    padding: 40px 20px 72px;
+                    color: $grey-500;
+                    font-family: "Roboto", sans-serif;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 24px;
+                    letter-spacing: 0.15px;
+                    border: 2px solid $grey-100;
+                    border-radius: 8px;
+                }
+                .wrapper-button-submit {
+                    display: flex;
+                    justify-content: end;
 
                     .button-submit__input {
                         display: flex;
                         align-items: center;
                         justify-content: center;
-
                         width: 121px;
                         height: 56px;
-
                         background: $red-500;
-
                         color: $white-500;
                         font-family: "Poppins", sans-serif;
                         font-style: normal;
                         font-weight: 700;
                         font-size: 16px;
-
                         border: 1px solid $red-500;
                         border-radius: 8px;
-
                         cursor: pointer;
 
-
+                        &:hover {
-                            &:hover {
+                            background: $red-700;
-                                background: $red-700;
+                        }
-                            }
                     }
-              }
+                }
+            }
+        }
 
-
+    .img-result {
-          }
-
-      }
-
-      .img-result {
         width: 100%;
         height: 100%;
         border-radius: 8px;
         object-fit: cover;
-      }
+    }
+}
 
-      .page-titulo__img__spot {
+.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;
 
-    .container-cards {
+        .slick-prev {
-        padding:41px 63px;
+            background: url('arrowLeft.svg') no-repeat !important;
+            height: 30px;
+            width: 13.64px;
+            left: -6.16%;
+            &::before {
+                display: none;
+            }
+        }
 
-        .wrapper-ul__cards {
+        .slick-next {
-            display: flex;
+            background: url('arrowRight.svg') no-repeat center center !important;
+            height: 30px;
+            width: 13.64px;
+            right: -4.56%;
+            &::before {
+                display: none;
+            }
+        }
 
-            .wrapper-cards__li {
+        .wrapper-cards__li {
-                width: 279px;
+            width: 279px !important;
-                box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
+            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;
-                margin: 0 10.5px;
+                height: 212px;
-                .container-card__img {
+                object-fit: cover;
-                    object-fit: cover;
+            }
+            .container__text {
+                padding: 24px;
+                overflow-y: scroll;
 
-                    border-radius: 8px;
+                .result-card__title {
-
+                    font-family: 'Poppins', sans-serif;
-                    .result-card__img {
+                    font-style: normal;
-                        width: 100%;
+                    font-weight: 700;
-                    }
+                    font-size: 24px;
+                    line-height: 28px;
+                    color: $black-500;
+                    margin-bottom: 8px;
+                    width: 231px;
+                    height: 60px;
                 }
-
+                .result-card__description {
-                .container__text {
+                    font-family: 'Roboto', sans-serif;
-                    margin: 24px;
+                    font-style: normal;
-
+                    font-weight: 400;
-                    .result-card__title {
+                    font-size: 16px;
-                        font-family: 'Poppins', sans-serif;
+                    line-height: 24px;
-                        font-style: normal;
+                    color: $grey-500;
-                        font-weight: 700;
+                    height: 96px;
-                        font-size: 24px;
+                    overflow-y: scroll;
-                        line-height: 28px;
-                        color: $black-500;
-
-                        margin-bottom: 8px;
-                        width: 231px;
-                    }
-
-                    .result-card__description {
-                        font-family: 'Roboto', sans-serif;
-                        font-style: normal;
-                        font-weight: 400;
-                        font-size: 16px;
-                        line-height: 24px;
-                        color: $grey-500;
-                    }
                 }
 
-
             }
-
-
         }
     }
+}

src/templates/index.html

@@ -4,50 +4,43 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
-    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
-
+    <link rel="stylesheet" href="main.css">
     <title>Tourist Attractions</title>
 </head>
 <body>
     <main>
 
         <div class="container-h1-input">
-        <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
+            <h1 class="page-titulo__tourist" data-test="title-form">Adicionar um Ponto Turístico</h1>
-
-        <form class="form__tourist-attractions">
-            <div class="container-input">
-
-                <div class="wrapper-input__img">
-                    <label class="label-input" for="input__img">
-                        <span class="input__span"></span>
-                    </label>
 
+            <form class="form__tourist-attractions">
+                <div class="container-input">
+                    <div class="wrapper-input__img">
+                        <label class="label-input" for="input__img" tabIndex="0">
+                            <span class="input__span"></span>
+                        </label>
                     <input id="input__img" type="file" accept="image/*" data-test="input-image">
-                </div>
-
-                <div class="wrapper-input__text">
-                    <input name="input-title" class="input-text__titulo" type="text" accept="text/*" placeholder="Titulo" data-test="input-titulo">
-                    <input name="input-description" class="input-text__descricao" type="text" placeholder="Descrição" data-test="input-descrição">
-
-                    <div class="wrapper-button-submit">
-                        <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
                     </div>
 
+                    <div class="wrapper-input__text">
+                        <input name="input-title" class="input-text__titulo" type="text" accept="text" placeholder="Titulo" data-test="input-titulo">
+                        <input name="input-description" class="input-text__descricao" type="text" accept="text" placeholder="Descrição" data-test="input-descrição">
+                        <div class="wrapper-button-submit">
+                            <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
+                        </div>
+                    </div>
                 </div>
+            </form>
 
 
-            </div>
-        </form>
-
-            <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
-
         </div>
 
         <div class="container-cards">
+            <h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
 
-                <ul class="wrapper-ul__cards"></ul>
+            <ul class="wrapper-ul__cards"></ul>
 
         </div>