flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Rewrite some classes

Browse Source
This commit is contained in:
Félix Péault
2020-02-29 10:47:46 +01:00
parent 4d8493e407
commit fd45ce1731
2 changed files with 50 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/organisms/Carousel.svelte
View File

@@ -159,17 +159,23 @@
{/if}
</div>
<div class="carousel__information">
<div class="carousel__information--location style-location">
<p class="street">
{currentPhoto.name}
</p>
<div class="carousel__infos">
<div class="carousel__infos--locations">
{#each photos as photo, index}
<div class="carousel__infos--location style-location"
class:prev={photo === prevPhoto}
class:active={photo === currentPhoto}
class:next={photo === nextPhoto}
>
<p class="street">{photo.name}</p>
<p class="state style-caps style-caps--transparent">
{currentPhoto.location.region}, {currentPhoto.location.country.name}
{photo.location.name}, {photo.location.country.name}
</p>
</div>
{/each}
</div>
{#if viewer}
<p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
<p class="carousel__infos--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
{/if}
</div>

40
src/style/organisms/_carousel.scss
View File

@@ -185,19 +185,29 @@
/*
** Information
*/
&__information {
&__infos {
position: relative;
z-index: 3;
// Locations
&--locations {
position: relative;
overflow: hidden;
min-height: 128px;
}
// Location
&--location {
text-align: center;
.street {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
position: relative;
opacity: 0;
text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
height: 30px;
@include breakpoint (sm) {
margin-top: pxVW(80);
@@ -206,20 +216,6 @@
margin-top: 72px;
}
span {
$distance: 40%;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
white-space: nowrap;
transform: translateY(-$distance);
opacity: 0;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
&.prev {
transform: translateY(-$distance);
}
@@ -230,8 +226,8 @@
&.next {
transform: translateY($distance);
}
}
}
// State
.state {
margin-top: 6px;
}