feat(TouristAttractionsAutoJs): Aplica tamanho de tela no slick e estiliza arrows
This commit is contained in:
parent
f9b0dac146
commit
8a382ea17b
@ -13,7 +13,7 @@ const paths = {
|
||||
},
|
||||
|
||||
img: {
|
||||
all: 'src/assets/*.png',
|
||||
all: 'src/assets/**',
|
||||
},
|
||||
|
||||
styles: {
|
||||
|
||||
3
src/assets/arrowLeft.svg
Normal file
3
src/assets/arrowLeft.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 259 B |
|
Before Width: | Height: | Size: 259 B After Width: | Height: | Size: 259 B |
@ -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,16 +62,12 @@ 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) {
|
||||
@ -87,7 +77,6 @@ export class TouristAttractions {
|
||||
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,27 +105,21 @@ 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();
|
||||
|
||||
|
||||
};
|
||||
|
||||
carrossel () {
|
||||
|
||||
if(window.innerWidth >= 1024) {
|
||||
if(window.screen.width > 1024) {
|
||||
$('.wrapper-ul__cards').slick({
|
||||
dots: true,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
variableWidth: true,
|
||||
})
|
||||
|
||||
@ -149,8 +127,7 @@ export class TouristAttractions {
|
||||
};
|
||||
|
||||
removeSlick () {
|
||||
if(window.innerWidth >= 1024) {
|
||||
|
||||
if(window.screen.width > 1024) {
|
||||
$('.wrapper-ul__cards').slick('unslick');
|
||||
}
|
||||
};
|
||||
@ -158,9 +135,7 @@ export class TouristAttractions {
|
||||
resetInputs () {
|
||||
this.inputTitle.value = '';
|
||||
this.inputDescription.value = '';
|
||||
|
||||
this.labelInput.style.border = "";
|
||||
|
||||
this.spanInput.innerText = this.textSpanInput;
|
||||
this.spanInput.style.border = "";
|
||||
};
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
@import "utils/fonts.scss";
|
||||
|
||||
.container-h1-input {
|
||||
|
||||
padding: 40px 130px;
|
||||
padding: 40px 130px 0;
|
||||
|
||||
.page-titulo__tourist {
|
||||
font-family: "Poppins", sans-serif;
|
||||
@ -11,17 +10,14 @@
|
||||
font-size: 32px;
|
||||
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;
|
||||
@ -29,17 +25,13 @@
|
||||
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;
|
||||
@ -47,27 +39,22 @@
|
||||
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 0 16px 16px;
|
||||
padding: 16px 16px 16px;
|
||||
border: 2px solid $grey-100;
|
||||
border-radius: 8px;
|
||||
|
||||
color: $grey-500;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-style: normal;
|
||||
@ -76,16 +63,12 @@
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.15px;
|
||||
}
|
||||
|
||||
.input-text__descricao {
|
||||
display: flex;
|
||||
|
||||
width: 417px;
|
||||
height: 136px;
|
||||
|
||||
margin-bottom: 16px;
|
||||
padding: 40px 0px 72px 20px;
|
||||
|
||||
padding: 40px 20px 72px;
|
||||
color: $grey-500;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-style: normal;
|
||||
@ -93,11 +76,9 @@
|
||||
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;
|
||||
@ -106,33 +87,24 @@
|
||||
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 {
|
||||
background: $red-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-result {
|
||||
@ -141,6 +113,10 @@
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.container-cards {
|
||||
padding: 0px 130px;
|
||||
|
||||
.page-titulo__img__spot {
|
||||
font-family: "Poppins", sans-serif;
|
||||
@ -148,33 +124,49 @@
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.container-cards {
|
||||
padding:41px 63px;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 279px !important;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 8px;
|
||||
margin: 0 10.5px;
|
||||
.container-card__img {
|
||||
object-fit: cover;
|
||||
|
||||
border-radius: 8px;
|
||||
max-height: 424px;
|
||||
|
||||
.result-card__img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
height: 212px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.container__text {
|
||||
margin: 24px;
|
||||
padding: 24px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.result-card__title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
@ -183,11 +175,10 @@
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $black-500;
|
||||
|
||||
margin-bottom: 8px;
|
||||
width: 231px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.result-card__description {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-style: normal;
|
||||
@ -195,12 +186,11 @@
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: $grey-500;
|
||||
}
|
||||
height: 96px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,10 +4,9 @@
|
||||
<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>
|
||||
@ -18,34 +17,28 @@
|
||||
|
||||
<form class="form__tourist-attractions">
|
||||
<div class="container-input">
|
||||
|
||||
<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>
|
||||
</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">
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user