anacarolinaduartecavalcante/challenge-tourist-attractions-ana-carolina-duarte-cavalcante
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: removendo código desnecessário

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-11-23 07:45:25 -03:00
parent 94f3dedaec
commit c220698f84
9 changed files with 76 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.editorconfig
View File

@ -1,13 +1,13 @@
# EditorConfig is awesome: https://EditorConfig.org # EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file # top-most EditorConfig file
# root = true root = true
# [*] [*]
# indent_style = space indent_style = space
# indent_size = 4 indent_size = 4
# end_of_line = lf end_of_line = lf
# charset = utf-8 charset = utf-8
# trim_trailing_whitespace = true trim_trailing_whitespace = true
# insert_final_newline = true insert_final_newline = true
# max_line_length = 100 max_line_length = 100

3
src/assets/svgs/left arrow big.svg
View File

@ -1,3 +0,0 @@
<svg width="26" height="58" viewBox="0 0 26 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.25454e-06 28.8415L25.3707 58L26 53.3516L5.34947 28.8415L26 4.64845L25.3707 -3.2965e-08L4.25454e-06 28.8415Z" fill="#858585"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 241 B

3
src/assets/svgs/right arrow big.svg
View File

@ -1,3 +0,0 @@
<svg width="27" height="59" viewBox="0 0 27 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.6445 29.631L1.27388 0.472534L0.64453 5.12098L21.295 29.631L0.644519 53.8241L1.27387 58.4725L26.6445 29.631Z" fill="#858585"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 242 B

20
src/scripts/components/form.js
View File

@ -66,10 +66,10 @@ export class Form {
addItemToList(event) { addItemToList(event) {
event.preventDefault(); 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 itemTitle = event.target["titleInput"].value;
const itemDescription = event.target["descriptionText"].value; const itemDescription = event.target["descriptionText"].value;
if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") { if (itemTitle !== "" && itemDescription !== "" && itemImage !== "") {
const item = { const item = {
src: itemImage, src: itemImage,
@ -88,7 +88,7 @@ export class Form {
} }
this.resetInputs(); this.resetInputs();
} }
} }
renderListItems() { renderListItems() {
@ -97,20 +97,24 @@ export class Form {
this.list.forEach(function (item) { this.list.forEach(function (item) {
itemsSlider += ` itemsSlider += `
<li class="slider-content" data-test="container-item-list"> <li class="slider-content" data-test="container-item-list">
<figure><img src="${item.src}" alt="" data-test="image-item-list"/></figure> <figure>
<h3 data-test="title-item-list">${item.title}</h3> <img src="${item.src}" alt="" data-test="image-item-list"/>
<figcaption data-test="description-item-list">${item.description}</figcaption> <h3 data-test="title-item-list">${item.title}</h3>
<figcaption data-test="description-item-list">
${item.description}
</figcaption>
</figure>
</li> </li>
`; `;
}); });
this.slider.innerHTML = itemsSlider; this.slider.innerHTML = itemsSlider;
} }
addSlick () { addSlick () {
$(".slider-list").slick({ $(".slider-list").slick({
infinite: true, infinite: true,
slidesToShow: 4, slidesToShow: 4,
slidesToScroll: 1, slidesToScroll: 4,
variableWidth: true, variableWidth: true,
arrows: true, arrows: true,
dots: true, dots: true,

3
src/styles/partials/container.scss
View File

@ -6,21 +6,18 @@
margin: 40px auto; margin: 40px auto;
} }
$breakpoint-desk: 2500px;
@media (min-width: $breakpoint-desk) { @media (min-width: $breakpoint-desk) {
.container { .container {
width: 89.533%; width: 89.533%;
} }
} }
$breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.container { .container {
width: 96.87%; width: 96.87%;
} }
} }
$breakpoint-mobile: 375px;
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {
.container { .container {
width: 91.441%; width: 91.441%;

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

@ -55,14 +55,15 @@ form {
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
} }
& img { & label {
object-fit: cover; & span {
width: 100%; & img {
height: 100%; object-fit: cover;
transition: opacity 0.25s ease-in-out; width: 100%;
opacity: 1; height: 100%;
&[src=""] { left: 0;
opacity: 0; top: 0;
}
} }
} }
} }
@ -111,7 +112,6 @@ form {
position: absolute; position: absolute;
} }
$breakpoint-desk: 2500px;
@media (min-width: $breakpoint-desk) { @media (min-width: $breakpoint-desk) {
h1 { h1 {
font-size: 64px; font-size: 64px;
@ -174,7 +174,6 @@ $breakpoint-desk: 2500px;
} }
} }
$breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
form { form {
width: 100%; width: 100%;
@ -223,7 +222,6 @@ $breakpoint-tablet: 1024px;
} }
} }
$breakpoint-mobile: 375px;
@media (max-width: $breakpoint-mobile) { @media (max-width: $breakpoint-mobile) {
form { form {
height: 500.3px; height: 500.3px;

72
src/styles/partials/slider.scss
View File

@ -48,7 +48,7 @@ h2 {
} }
} }
& figcaption { & figcaption {
padding: 0 24px 0 24px; margin: 0 24px 0 24px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -67,23 +67,32 @@ h2 {
} }
} }
.slick-prev,
.slick-next {
cursor: pointer;
}
.slick-prev { .slick-prev {
background: url("svgs/right arrow.svg") no-repeat center center !important;
border: none;
left: -40.36px; left: -40.36px;
&:before { font-size: 0;
content: url("svgs/right arrow.svg"); background-size: 13.64px 29.47px;
} width: 13.64px;
height: 29.47px;
} }
.slick-next { .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; right: -40.36px;
&:before { width: 13.64px;
content: url("svgs/left arrow.svg"); height: 29.47px;
} }
.slick-prev:before, .slick-next:before {
font-size: 0;
opacity: unset;
} }
.slick-dots li { .slick-dots li {
@ -118,7 +127,6 @@ h2 {
opacity: unset; opacity: unset;
} }
$breakpoint-desk: 2500px;
@media (min-width: $breakpoint-desk) { @media (min-width: $breakpoint-desk) {
h2 { h2 {
font-size: 64px; font-size: 64px;
@ -155,18 +163,19 @@ $breakpoint-desk: 2500px;
.slick-prev { .slick-prev {
left: -70px; left: -70px;
&:before { width: 26px;
content: url("svgs/left arrow big.svg"); height: 58px;
} background-size: 26px 58px !important;
} }
.slick-next { .slick-next {
right: -70px; right: -70px;
&:before { width: 26px;
content: url("svgs/right arrow big.svg"); height: 58px;
} background-size: 26px 58px !important;
} }
.slick-dots li button:before { .slick-dots li button:before {
font-size: 20.01px; font-size: 20.01px;
} }
@ -177,7 +186,6 @@ $breakpoint-desk: 2500px;
} }
} }
$breakpoint-tablet: 1024px;
@media (max-width: $breakpoint-tablet) { @media (max-width: $breakpoint-tablet) {
.slider-container { .slider-container {
margin-top: 60px; margin-top: 60px;
@ -213,7 +221,7 @@ $breakpoint-tablet: 1024px;
color: $title-item-list-color; color: $title-item-list-color;
} }
& figcaption { & figcaption {
padding: 0 24px 24px 24px; margin: 0 24px 24px 24px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
@ -226,33 +234,13 @@ $breakpoint-tablet: 1024px;
.slick-dots li button { .slick-dots li button {
display: none; display: none;
} }
.slick-track {
max-width: 100%;
margin-top: 0;
display: flex;
flex-direction: column;
transform: translate3d(0, 0, 0) !important;
}
.slick-list { .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) { @media (max-width: $breakpoint-mobile) {
.slider-container { .slider-container {
margin-top: 40.7px; margin-top: 40.7px;
@ -269,7 +257,7 @@ $breakpoint-mobile: 375px;
color: $title-item-list-color; color: $title-item-list-color;
} }
& figcaption { & figcaption {
padding: 0 24px 24px 24px; margin: 0 24px 24px 24px;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }

13
src/styles/utils/variables.scss
View File

@ -13,3 +13,16 @@ $title-item-list-color: #333333;
$description-item-list-color: #858585; $description-item-list-color: #858585;
$slider-ellipse-color: #858585; $slider-ellipse-color: #858585;
$slider-content-shadow-color: #00000014; $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

6
src/templates/index.html
View File

@ -18,12 +18,12 @@
<main> <main>
<section class="container"> <section class="container">
<h1 data-test="title-form">Adicionar um Ponto Turístico</h1> <h1 data-test="title-form">Adicionar um Ponto Turístico</h1>
<form class="form" runat="server"> <form class="form">
<div class="form-container"> <div class="form-container">
<div class="form-inputs"> <div class="form-inputs">
<div class="input-image-container" data-test="input-image"> <div class="input-image-container" data-test="input-image">
<label for="filearea"><span class="image"></span></label> <label for="filearea"><span class="image"></span></label>
<input type="file" accept="image/*" class="input-image-content" name="filearea" id="inputImage" /> <input type="file" accept="image/*" class="input-image-content" name="filearea" id="inputImage" />
</div> </div>
<div class="form-input-descricao"> <div class="form-input-descricao">
<input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/> <input id="titleInput" type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title"/>
@ -38,7 +38,7 @@
<div class="slider-container"> <div class="slider-container">
<h2 data-test="title-list">Pontos Turísticos</h2> <h2 data-test="title-list">Pontos Turísticos</h2>
<div class="slider"> <div class="slider">
<ul class="slider-list" id="slider-content"> <ul class="slider-list" id="slider-content">
</ul> </ul>
</div> </div>
</div> </div>