feat(TouristAttractions): Automatiza sass
This commit is contained in:
parent
19f35863d9
commit
ff228b5d3a
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -0,0 +1,13 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
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
|
||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
15
gulpfile.js
Normal file
15
gulpfile.js
Normal file
@ -0,0 +1,15 @@
|
||||
const { src, dest, watch } = require('gulp');
|
||||
const sass = require('gulp-sass')(require('sass'));
|
||||
|
||||
function styles() {
|
||||
return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
|
||||
|
||||
};
|
||||
|
||||
|
||||
function sentinel () {
|
||||
watch('src/styles/*.scss', {ignoreInitial: false}, styles);
|
||||
}
|
||||
|
||||
|
||||
exports.sentinel = sentinel;
|
||||
7804
package-lock.json
generated
Normal file
7804
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "challenge-tourist-attractions-williamsimao",
|
||||
"version": "1.0.0",
|
||||
"description": "Projeto m3Academmy",
|
||||
"main": "js.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "gulp sentinel"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.ecommercetools.com.br/WilliamSimao/challenge-tourist-attractions-WilliamSimao.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-sass": "^5.1.0",
|
||||
"sass": "^1.56.1"
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
<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="style.css">
|
||||
<link rel="stylesheet" href="../dist/main.css">
|
||||
|
||||
<title>Tourist Attractions</title>
|
||||
</head>
|
||||
@ -16,11 +16,9 @@
|
||||
|
||||
<form class="form__tourist-attractions">
|
||||
<div class="container-input">
|
||||
|
||||
|
||||
<div class="wrapper-input__img">
|
||||
<label class="label-input" for="input__img">
|
||||
<!-- <span class="span__img">
|
||||
</span> -->
|
||||
</label>
|
||||
|
||||
<input id="input__img" type="file" data-test="input-image">
|
||||
@ -29,14 +27,14 @@
|
||||
<div class="wrapper-input__text">
|
||||
<input name="input-title" class="input-text__titulo" type="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>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -49,7 +47,7 @@
|
||||
<div class="container-cards__wrapper">
|
||||
|
||||
<ul class="wrapper-ul__cards"></ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -57,7 +55,7 @@
|
||||
|
||||
</main>
|
||||
|
||||
<script src="js.js"></script>
|
||||
<script src="../src/scripts/js.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@ -7,7 +7,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const textLabelInput = "Imagem";
|
||||
labelInput.innerText = textLabelInput;
|
||||
|
||||
const form = document.querySelector('.form__tourist-attractions');
|
||||
const form = document.querySelector('.form__tourist-attractions');
|
||||
const ulList = document.querySelector('.wrapper-ul__cards');
|
||||
|
||||
const inputTitle = document.querySelector('.input-text__titulo');
|
||||
@ -34,16 +34,16 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
|
||||
labelInput.innerText = "";
|
||||
labelInput.style.border = "none";
|
||||
|
||||
|
||||
|
||||
}else {
|
||||
labelInput.innerText = textLabelInput;
|
||||
labelInput.style.border = "";
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
//----------------------------------------------------------
|
||||
@ -61,18 +61,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
|
||||
if (spotImg != '' && spotTitle != '' && spotDescription != '') {
|
||||
|
||||
|
||||
const spot = {
|
||||
image: spotImg.src,
|
||||
titulo: spotTitle,
|
||||
description: spotDescription,
|
||||
};
|
||||
|
||||
|
||||
list.push(spot);
|
||||
|
||||
renderListItems();
|
||||
resetInputs();
|
||||
|
||||
|
||||
}else {
|
||||
alert('Preencha todos os campos')
|
||||
}
|
||||
@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
spotStructure += `
|
||||
<li class="wrapper-cards__li">
|
||||
|
||||
<div class="result-card__img">
|
||||
<div class="result-card__img">
|
||||
<img class="result-card__img" src="${i.image}" alt="Imagem Turismo" />
|
||||
</div>
|
||||
|
||||
@ -110,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
labelInput.innerText = textLabelInput;
|
||||
labelInput.style.border = "";
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
5
src/styles/common/reset.scss
Normal file
5
src/styles/common/reset.scss
Normal file
@ -0,0 +1,5 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
7
src/styles/main.scss
Normal file
7
src/styles/main.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@import "utils/variables.scss";
|
||||
@import "utils/fonts.scss";
|
||||
|
||||
@import "common/reset.scss";
|
||||
|
||||
@import "partials/form.scss";
|
||||
|
||||
146
src/styles/partials/form.scss
Normal file
146
src/styles/partials/form.scss
Normal file
@ -0,0 +1,146 @@
|
||||
@import "utils/fonts.scss";
|
||||
|
||||
.container-h1-input {
|
||||
|
||||
padding: 40px 130px;
|
||||
|
||||
.page-titulo__tourist {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
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 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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: $red-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.img-result {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.page-titulo__img__spot {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
2
src/styles/utils/fonts.scss
Normal file
2
src/styles/utils/fonts.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
|
||||
13
src/styles/utils/variables.scss
Normal file
13
src/styles/utils/variables.scss
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
//colors
|
||||
|
||||
$white-500: #ffffff;
|
||||
|
||||
|
||||
$grey-100: #d6d6d6;
|
||||
$grey-200: #e5e5e5;
|
||||
$grey-500: #858585;
|
||||
|
||||
|
||||
$red-500: #ff5a5f;
|
||||
$red-700: #e93137;
|
||||
146
style.css
146
style.css
@ -1,146 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Arimo&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@700&family=Roboto&display=swap");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container-h1-input {
|
||||
padding: 40px 130px;
|
||||
}
|
||||
|
||||
.page-titulo__tourist {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
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: #858585;
|
||||
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 #e5e5e5;
|
||||
border-radius: 8px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wrapper-input__img input {
|
||||
display: none;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.img-result {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.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;
|
||||
border: 2px solid #d6d6d6;
|
||||
border-radius: 8px;
|
||||
|
||||
color: #858585;
|
||||
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 0px 72px 20px;
|
||||
|
||||
color: #858585;
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.15px;
|
||||
|
||||
border: 2px solid #d6d6d6;
|
||||
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: #ff5a5f;
|
||||
|
||||
color: #ffffff;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
|
||||
border: 1px solid #ff5a5f;
|
||||
border-radius: 8px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-submit__input:hover {
|
||||
background: #e93137;
|
||||
}
|
||||
|
||||
.page-titulo__img__spot {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user