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

feat(Feature/TouristAttractionsAutoJs): Finaliza estilização

Browse Source
This commit is contained in:
William Simão Cavalcante 2022-11-25 21:59:44 -03:00
parent 94e6450b14
commit e1e3003ac5
10 changed files with 283 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/images/arrowLeftmaior.svg Normal file
View File

@ -0,0 +1,3 @@
<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

After

Width:  |  Height:  |  Size: 241 B

2
src/assets/images/arrowLeft.svg → src/assets/images/arrowLeftmenor.svg
View File

@ -1,3 +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"/>
<path d="M-1.85934e-05 14.6557L13.3144 29.4724L13.6447 27.1103L2.80736 14.6557L13.6447 2.36209L13.3144 -1.58741e-06L-1.85934e-05 14.6557Z" fill="#858585"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 B

After

Width:  |  Height:  |  Size: 259 B

3
src/assets/images/arrowRightmaior.svg Normal file
View File

@ -0,0 +1,3 @@
<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

After

Width:  |  Height:  |  Size: 242 B

0
src/assets/images/arrowRight.svg → src/assets/images/arrowRightmenor.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 259 B

After

Width:  |  Height:  |  Size: 259 B

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

@ -2,29 +2,21 @@ export class TouristAttractions {
constructor () {
this.list = [
{
// image: 'img1-279.png',
// image: 'img1-544.png',
image: 'img1-992.png',
titulo: 'Pão de Açucar',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
// image: 'img2-279.png',
// image: 'img2-544.png',
image: 'img2-992.png',
titulo: 'Cristo Redentor',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
// image: 'img3-279.png',
// image: 'img3-544.png',
image: 'img3-992.png',
titulo: 'Ilha Grande',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
},
{
// image: 'img4-279.png',
// image: 'img4-544.png',
image: 'img4-992.png',
titulo: 'Centro Histórico de Paraty',
description: 'Amet minim mollit non deserunt ullamco est sit aliqua dolor dosa amet sint. Velit officia consece duis enim velit mollit.',
@ -89,8 +81,10 @@ export class TouristAttractions {
<figure class="container-card__img">
<img class="result-card__img" src="${i.image}"/>
</figure>
<div class="container-texto">
<h3 class="result-card__title">${i.titulo}</h3>
<p class="result-card__description">${i.description}</p>
</div>
</li>`;
});
@ -111,8 +105,6 @@ export class TouristAttractions {
}
};
removeSlick () {
if(window.screen.width > 1024) {
$('.wrapper-ul__cards').slick('unslick');

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

@ -115,7 +115,7 @@
object-fit: cover;
}
@media only screen and (width: 490px){
@media only screen and (width: 375px){
.container-pai {
.container-h1-input {
.form__tourist-attractions {
@ -152,6 +152,43 @@
}
}
}
@media only screen and (max-width: 490px) {
.container-pai {
.container-h1-input {
.form__tourist-attractions {
.container-input {
.wrapper-input__img {
label {
width: 100%;
height: 212px;
}
}
.input__span {
width: 100%px;
height: 212px;
}
.wrapper-input__text {
.input-text__titulo {
width: 100%px;
height: 54px;
}
.input-text__descricao {
width: 100%px;
height: 131.14px;
}
.wrapper-button-submit {
.button-submit__input{
width: 100%px;
height: 56px;
}
}
}
}
}
}
}
}
@media only screen and (max-width: 1024px) {
.container-pai {
.container-h1-input {

246
src/styles/partials/result.scss
View File

@ -17,20 +17,12 @@
width: 100%;
column-gap: 10.5px;
.slick-prev {
background: url('arrowLeft.svg') no-repeat center center !important;
height: 58px;
width: 26px;
left: -4.56%;
&::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;
}
@ -49,16 +41,31 @@
border-radius: 8px;
object-fit: cover;
object-position: top;
display: block;
}
.container-texto {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 24px 24px;
overflow-y: scroll;
height: 100% !important;
&::-webkit-scrollbar {
width: 0;
}
&::-webkit-scrollbar-thumb {
background: $grey-500;
border-radius: 5px;
border: 1px solid $white-500;
}
.result-card__title {
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 56px;
color: $black-500;
margin: 24px 24px 8px;
height: 120px;
margin-bottom: 8px;
height: fit-content;
overflow-wrap: anywhere;
}
.result-card__description {
@ -66,40 +73,82 @@
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 48px;
color: $grey-500;
overflow-y: scroll;
white-space: normal;
margin: 0 24px 24px;
height: 192px;
overflow-wrap: anywhere;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: $grey-500;
border-radius: 5px;
border: 1px solid $white-500;
}
}
}
}
}
@media only screen and (max-width: 490px){
}
@media only screen and (max-width: 1024px) {
@media only screen and (width: 375px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.wrapper-cards__li {
width: 343px;
.container-texto {
.result-card__title {
height: fit-content;
}
.result-card__description {
height: 72px;
}
}
}
}
}
}
}
@media only screen and (max-width: 490px) {
.container-pai {
.container-cards {
.page-titulo__img__spot {
font-size: 32px;
}
.wrapper-ul__cards {
flex-direction: column;
row-gap: 24px;
column-gap: 0;
.wrapper-cards__li {
width: 100%;
height: 400px;
.result-card__img {
height: 212px;
}
.container-texto {
height: 140px;
.result-card__title {
font-size: 24px;
height: fit-content;
line-height: 28px !important;
}
.result-card__description {
height: 72px;
font-size: 16px;
line-height: 24px;
}
}
}
}
}
}
}
@media only screen and (width: 1024px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.wrapper-cards__li {
.container-texto {
.result-card__title {
height: fit-content;
}
.result-card__description {
height: 24px;
}
@ -107,20 +156,57 @@
}
}
}
}
}
@media only screen and (width: 1440px) {
@media only screen and (min-width: 491px) and (max-width: 1024px) {
.container-pai {
.container-cards {
.page-titulo__img__spot {
font-size: 32px;
}
.wrapper-ul__cards {
flex-direction: column;
row-gap: 24px;
column-gap: 0;
.wrapper-cards__li {
width: 279px;
width: 100%;
height: 710px;
.result-card__img {
height: 570px !important;
}
.container-texto {
height: 92px;
.result-card__title {
font-size: 24px;
height: fit-content;
}
.result-card__description {
height: 100%;
font-size: 16px;
line-height: 24px;
}
}
}
}
}
}
}
@media only screen and (max-width: 2499px) {
@media only screen and (width: 1440px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.wrapper-cards__li {
width: 544px;
}
}
}
}
}
@media only screen and (min-width: 1025px) and ( max-width: 2499px) {
.container-pai {
.container-cards {
.page-titulo__img__spot {
@ -128,17 +214,24 @@
}
.wrapper-ul__cards {
.slick-prev {
height: 30px;
width: 13.64px;
left: -4.56%;
background: url('arrowLeftmenor.svg') no-repeat center center !important;
left: -6.16%;
}
.slick-next {
background: url('arrowRightmenor.svg') no-repeat center center !important;
right: -6.16%;
}
.wrapper-cards__li {
height: 424px;
.result-card__img {
height: 212px !important ;
}
.container-texto {
.result-card__title {
font-size: 24px;
line-height: 28px;
height: 60px;
line-height: 24px;
height: fit-content;
}
.result-card__description {
font-size: 16px;
line-height: 24px;
@ -148,14 +241,69 @@
}
}
}
}
}
@media only screen and (width: 1920px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.slick-prev {
background: url('arrowLeftmenor.svg') no-repeat center center !important;
left: -4.16%;
}
.slick-next {
background: url('arrowRightmenor.svg') no-repeat center center !important;
right: -4.16%;
}
}
}
}
}
@media only screen and (width: 2500px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.wrapper-cards__li {
width: 544px !important;
width: 279px !important;
}
}
}
}
}
@media only screen and (min-width: 2500px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.slick-prev {
background: url('arrowLeftmaior.svg') no-repeat center center !important;
left: -3.5%;
width: 26px;
height: 58px;
}
.slick-next {
background: url('arrowRightmaior.svg') no-repeat center center !important;
right: -3.5%;
width: 26px;
height: 58px;
}
.wrapper-cards__li {
height: 768px;
.result-card__img {
height: 400px !important;
}
.container-texto {
height: 320px;
.result-card__title {
line-height: 56px;
}
.result-card__description {
line-height: 48px;
}
}
}
}
}
@ -163,5 +311,23 @@
}
@media only screen and (min-width: 2850px) {
.container-pai {
.container-cards {
.wrapper-ul__cards {
.slick-prev {
background: url('arrowLeftmaior.svg') no-repeat center center !important;
left: -2.5%;
width: 26px;
height: 58px;
}
.slick-next {
background: url('arrowRightmaior.svg') no-repeat center center !important;
right: -2.5%;
width: 26px;
height: 58px;
}
}
}
}
}

6
src/styles/partials/slick-theme.scss
View File

@ -189,6 +189,7 @@ $slick-opacity-not-active: 0.25 !default;
}
}
&.slick-active button:before {
bottom: 21px;
width: 27px;
height: 27px;
border: 1px solid $grey-500;
@ -196,6 +197,11 @@ $slick-opacity-not-active: 0.25 !default;
}
}
}
@media only screen and (min-width: 2501px) {
.slick-dots {
bottom: -40px;
}
}
@media only screen and (max-width: 2499px) {

2
src/styles/partials/slick.scss
View File

@ -15,7 +15,7 @@
-webkit-tap-highlight-color: transparent;
}
.slick-list {
height: 432px;
height: 100%;
position: relative;
overflow: hidden;
display: block;

2
src/templates/index.html
View File

@ -4,8 +4,6 @@
<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" 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-theme.css"/> -->
<link rel="stylesheet" href="main.css">
<title>Tourist Attractions</title>
</head>