Skip to content

Commit

Permalink
Merge pull request #26 from frontend-park-mail-ru/pre-show-fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikita-hub000
Nikita-hub000 authored Nov 9, 2024
2 parents e45fc55 + bbffc8b commit be6da7e
Show file tree
Hide file tree
Showing 35 changed files with 1,010 additions and 630 deletions.
42 changes: 24 additions & 18 deletions components/AdCard/AdCard.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<div class='ad-card' id='card-{{id}}'>
<div class='housing-card' id='card-{{id}}'>
<!-- ID is used for js not styles -->
<img class='ad_card__img1' src='{{images.[0].path}}' alt='Ad card image' />
<div class='ad-card__image-pagination-div'>
<!-- Здесь будут кружочки -->
<!-- <div class="circle-full"></div>-->
<!-- <div class="circle-empty"></div>-->
<div class='housing-card__main-img-container'>
<img
class='housing-card__main-img js-main-img'
src='{{images.[0].path}}'
alt='Housing card image'
/>
<div class='housing-card__image-pagination-div js-pagination-div'>
<!-- Здесь будут кружочки -->
<!-- <div class="circle-full"></div>-->
<!-- <div class="circle-empty"></div>-->
</div>
</div>

<button class='ad-card__button'>
<button class='housing-card__like-button js-like-button'>
<svg
width='43'
height='43'
Expand Down Expand Up @@ -67,22 +73,22 @@
</svg>
</button>

<div class='ad-card__info'>
<div class='ad-card__location'>
<p class='ad-card__p1'>{{cityName}}</p>
<p class='ad-card__p2'>{{address}}</p>
<a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
<div class='housing-card__info'>
<div class='housing-card__location'>
<p class='housing-card__city'>{{cityName}}</p>
<p class='housing-card__address'>{{address}}</p>
<a href='{{onMap}}' class='housing-card__href'>Показать на карте</a>
</div>
<div class='ad-card__author-info'>
<div class='housing-card__author-info'>
<img
class='ad-card__img2'
class='housing-card__avatar'
src='{{author.avatar}}'
alt='User avatar'
/>
<p>{{author.name}}</p>
<div class='ad-card__score-container'>
<img class='ad-card__img3' src='/star.png' alt='star' />
<span class='ad-card__score'>{{author.rating}}</span>
<p class='housing-card__author-name'>{{author.name}}</p>
<div class='housing-card__rating-container'>
<img class='housing-card__star' src='/star.png' alt='star' />
<span class='housing-card__rating'>{{author.rating}}</span>
</div>
</div>
</div>
Expand Down
288 changes: 172 additions & 116 deletions components/AdCard/AdCard.scss
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,172 @@
.ad-card {
display: flex;
flex-direction: column;
min-width: 343px;
max-width: 343px;
min-height: 400px;
max-height: 400px;
border-radius: 20px;
border: 1px #000 solid;
overflow: hidden;
position: relative;
cursor: pointer;
}

.ad-card__button {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
background-color: unset;
border: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}

.ad-card__img3 {
max-width: 16px;
max-height: 16px;
}

.ad_card__img1 {
min-width: 100%;
max-width: 100%;
min-height: 290px;
max-height: 290px;
object-fit: cover;
}

.ad-card__location {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}

.ad-card__p1 {
font-size: 20px;
margin: 0;
}

.ad-card__p2 {
font-size: 16px;
font-style: italic;
margin: 0;
}

.ad-card__author-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}

.ad-card__img2 {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}

.ad-card__info {
background-color: white;
height: 110px;
display: flex;
justify-content: space-around;
}

.ad-card__score {
font-style: italic;
}

.ad-card__href {
color: #808080;
font-size: 14px;
position: relative;
bottom: -10px;
}

.ad-card__image-pagination-div {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
position: absolute;
bottom: 115px;
height: 10px;
width: 100%;
gap: 5px;
}

.ad-card__circle {
border-radius: 50%;
width: 7px;
height: 7px;
background: #fff;
}

.ad-card__circle--fill {
background: #ffa552;
}
.housing-card {
display: flex;
flex-direction: column;
max-width: 343px;
min-width: 0;
aspect-ratio: 343/400;
border-radius: 12px;
border: 1px #a8a5a5 solid;
overflow: hidden;
position: relative;
cursor: pointer;

transition: box-shadow 0.3s;

&:hover {
box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

&__rating-container {
display: flex;
gap: 3px;
align-items: center;
}

&__main-img-container {
position: relative;
width: 100%;
height: 290px;
min-height: 0;
max-height: 290px;
}

&__main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

&__image-pagination-div {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
position: absolute;
bottom: 0px;
height: 10px;
width: 100%;
gap: 5px;
}

&__info {
background-color: white;
min-height: 40px;
height: 110px;
display: flex;
justify-content: space-around;
}

&__like-button {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50%;
background-color: unset;
border: none;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}

&__star {
max-width: 16px;
max-height: 16px;
}

&__location {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}

&__city {
font-size: 20px;
margin: 0;
}

&__address {
font-size: 16px;
font-style: italic;
margin: 0;
}

&__author-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
}

&__avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}

&__href {
color: #808080;
font-size: 14px;
position: relative;
bottom: -10px;
}

&__circle {
border-radius: 50%;
width: 7px;
height: 7px;
background: #fff;
}

&__circle--fill {
background: #ffa552;
}
}

@media screen and (max-width: 900px) {
.housing-card {
&__city {
font-size: 15px;
}
&__address {
width: 100%;
font-size: 13px;
}

&__location {
gap: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

&__href {
display: none;
}

&__avatar {
width: 20px;
height: 20px;
}

&__author-name {
font-size: 15px;
}

&__star {
width: 11px;
}
&__rating {
font-size: 12px;
}
}
}
Loading

0 comments on commit be6da7e

Please sign in to comment.