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

24
src/organisms/Carousel.svelte
View File

@@ -159,17 +159,23 @@
{/if} {/if}
</div> </div>
<div class="carousel__information"> <div class="carousel__infos">
<div class="carousel__information--location style-location"> <div class="carousel__infos--locations">
<p class="street"> {#each photos as photo, index}
{currentPhoto.name} <div class="carousel__infos--location style-location"
</p> class:prev={photo === prevPhoto}
<p class="state style-caps style-caps--transparent"> class:active={photo === currentPhoto}
{currentPhoto.location.region}, {currentPhoto.location.country.name} class:next={photo === nextPhoto}
</p> >
<p class="street">{photo.name}</p>
<p class="state style-caps style-caps--transparent">
{photo.location.name}, {photo.location.country.name}
</p>
</div>
{/each}
</div> </div>
{#if viewer} {#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} {/if}
</div> </div>

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

@@ -185,53 +185,49 @@
/* /*
** Information ** Information
*/ */
&__information { &__infos {
position: relative; position: relative;
z-index: 3; z-index: 3;
// Locations
&--locations {
position: relative;
overflow: hidden;
min-height: 128px;
}
// Location // Location
&--location { &--location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
text-align: center; text-align: center;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
margin-top: 32px;
.street { @include breakpoint (sm) {
width: 100%; margin-top: pxVW(80);
position: relative;
margin-top: 32px;
height: 30px;
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
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);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
}
} }
@include breakpoint (xl) {
margin-top: 72px;
}
&.prev {
transform: translateY(-$distance);
}
&.active {
transform: translateY(0);
opacity: 1;
}
&.next {
transform: translateY($distance);
}
// State
.state { .state {
margin-top: 6px; margin-top: 6px;
} }