- {currentPhoto.location.region}, {currentPhoto.location.country.name}
-
+
+ {#each photos as photo, index}
+
+
{photo.name}
+
+ {photo.location.name}, {photo.location.country.name}
+
+
+ {/each}
{#if viewer}
-
{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}
+
{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}
{/if}
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index e1d9e2a..b01fbea 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -185,53 +185,49 @@
/*
** Information
*/
- &__information {
+ &__infos {
position: relative;
z-index: 3;
+ // Locations
+ &--locations {
+ position: relative;
+ overflow: hidden;
+ min-height: 128px;
+ }
+
// Location
&--location {
+ $distance: 40%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ opacity: 0;
text-align: center;
+ transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
+ will-change: transform, opacity;
+ margin-top: 32px;
- .street {
- width: 100%;
- 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 (sm) {
+ margin-top: pxVW(80);
}
+ @include breakpoint (xl) {
+ margin-top: 72px;
+ }
+
+ &.prev {
+ transform: translateY(-$distance);
+ }
+ &.active {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ &.next {
+ transform: translateY($distance);
+ }
+
+ // State
.state {
margin-top: 6px;
}