WilliamSimao/challenge-tourist-attractions-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-11-23 18:35:45 -03:00
parent f9b0dac146
commit 8a382ea17b
6 changed files with 191 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

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

3
src/assets/arrowLeft.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

0
src/assets/setaDi.svg → src/assets/arrowRight.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 B

After

Width:  |  Height:  |  Size: 259 B

35
src/scripts/components/TouristAttractions.js
View File

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

92
src/styles/partials/form.scss
View File

@ -1,8 +1,7 @@
@import "utils/fonts.scss"; @import "utils/fonts.scss";
.container-h1-input { .container-h1-input {
padding: 40px 130px 0;
padding: 40px 130px;
.page-titulo__tourist { .page-titulo__tourist {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
@ -11,17 +10,14 @@
font-size: 32px; font-size: 32px;
line-height: 120%; line-height: 120%;
} }
.container-input { .container-input {
display: flex; display: flex;
margin: 40px 0 60px; margin: 40px 0 60px;
.wrapper-input__img label { .wrapper-input__img label {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: $grey-500; color: $grey-500;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-style: normal; font-style: normal;
@ -29,17 +25,13 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
width: 343px; width: 343px;
height: 212px; height: 212px;
margin-right: 20px; margin-right: 20px;
border: 2px solid $grey-200; border: 2px solid $grey-200;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
} }
.input__span { .input__span {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -47,27 +39,22 @@
width: 343px; width: 343px;
height: 212px; height: 212px;
} }
.wrapper-input__img input { .wrapper-input__img input {
display: none; display: none;
margin-right: 20px; margin-right: 20px;
} }
.wrapper-input__text { .wrapper-input__text {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.input-text__titulo { .input-text__titulo {
display: flex; display: flex;
width: 328px; width: 328px;
height: 56px; height: 56px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 16px 0 16px 16px; padding: 16px 16px 16px;
border: 2px solid $grey-100; border: 2px solid $grey-100;
border-radius: 8px; border-radius: 8px;
color: $grey-500; color: $grey-500;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-style: normal; font-style: normal;
@ -76,16 +63,12 @@
line-height: 24px; line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
} }
.input-text__descricao { .input-text__descricao {
display: flex; display: flex;
width: 417px; width: 417px;
height: 136px; height: 136px;
margin-bottom: 16px; margin-bottom: 16px;
padding: 40px 0px 72px 20px; padding: 40px 20px 72px;
color: $grey-500; color: $grey-500;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-style: normal; font-style: normal;
@ -93,11 +76,9 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
border: 2px solid $grey-100; border: 2px solid $grey-100;
border-radius: 8px; border-radius: 8px;
} }
.wrapper-button-submit { .wrapper-button-submit {
display: flex; display: flex;
justify-content: end; justify-content: end;
@ -106,33 +87,24 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 121px; width: 121px;
height: 56px; height: 56px;
background: $red-500; background: $red-500;
color: $white-500; color: $white-500;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
border: 1px solid $red-500; border: 1px solid $red-500;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $red-700; background: $red-700;
} }
} }
} }
} }
} }
.img-result { .img-result {
@ -141,6 +113,10 @@
border-radius: 8px; border-radius: 8px;
object-fit: cover; object-fit: cover;
} }
}
.container-cards {
padding: 0px 130px;
.page-titulo__img__spot { .page-titulo__img__spot {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
@ -148,33 +124,49 @@
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
line-height: 120%; line-height: 120%;
margin-bottom: 38px;
} }
}
.container-cards {
padding:41px 63px;
.wrapper-ul__cards { .wrapper-ul__cards {
display: flex; 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;
}
}
.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 { .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; border-radius: 8px;
margin: 0 10.5px; margin: 0 10.5px;
.container-card__img { max-height: 424px;
object-fit: cover;
border-radius: 8px;
.result-card__img { .result-card__img {
width: 100%; width: 100%;
border-radius: 8px;
height: 212px;
object-fit: cover;
} }
}
.container__text { .container__text {
margin: 24px; padding: 24px;
overflow-y: scroll;
.result-card__title { .result-card__title {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
@ -183,11 +175,10 @@
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $black-500; color: $black-500;
margin-bottom: 8px; margin-bottom: 8px;
width: 231px; width: 231px;
height: 60px;
} }
.result-card__description { .result-card__description {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-style: normal; font-style: normal;
@ -195,12 +186,11 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
color: $grey-500; color: $grey-500;
} height: 96px;
overflow-y: scroll;
} }
}
} }
} }
}
}

19
src/templates/index.html
View File

@ -4,10 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="//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> <title>Tourist Attractions</title>
</head> </head>
<body> <body>
@ -18,34 +17,28 @@
<form class="form__tourist-attractions"> <form class="form__tourist-attractions">
<div class="container-input"> <div class="container-input">
<div class="wrapper-input__img"> <div class="wrapper-input__img">
<label class="label-input" for="input__img"> <label class="label-input" for="input__img" tabIndex="0">
<span class="input__span"></span> <span class="input__span"></span>
</label> </label>
<input id="input__img" type="file" accept="image/*" data-test="input-image"> <input id="input__img" type="file" accept="image/*" data-test="input-image">
</div> </div>
<div class="wrapper-input__text"> <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-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"> <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"> <div class="wrapper-button-submit">
<button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button> <button class="button-submit__input" type="submit" data-test="button-submit">Adicionar</button>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
<h1 data-test="title-list" class="page-titulo__img__spot">Pontos Turísticos</h1>
</div> </div>
<div class="container-cards"> <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>