feat: add clicked effect on Photo viewer nav buttons + fade on name

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -224,14 +224,14 @@
          */
         const animation = timeline([
             // First photo
-            ['.photo-page__picture.is-1', {
+            ['.picture.is-1', {
                 y: [24, 0],
                 opacity: [0, 1],
             }, {
                 duration: 0.9,
             }],
             // Other photos
-            ['.photo-page__picture:not(.is-1)', {
+            ['.picture:not(.is-1)', {
                 x: ['-15%', '0%'],
                 opacity: [0, 1],
             }, {
@@ -241,13 +241,13 @@
             }],
 
             // Prev/Next buttons
-            ['.photo-page__controls .prev', {
+            ['.controls .prev button', {
                 x: [-16, 0],
                 opacity: [0, 1],
             }, {
                 at: 0.45,
             }],
-            ['.photo-page__controls .next', {
+            ['.controls .next button', {
                 x: [16, 0],
                 opacity: [0, 1],
             }, {
@@ -255,7 +255,7 @@
             }],
 
             // Infos
-            ['.photo-page__info > *', {
+            ['.info > *', {
                 y: [24, 0],
                 opacity: [0, 1],
             }, {
@@ -264,7 +264,7 @@
             }],
 
             // Index
-            ['.photo-page__index', {
+            ['.index', {
                 opacity: [0, 1],
             }, {
                 at: 0.6,
@@ -272,7 +272,7 @@
                 duration: 0.9,
             }],
             // Fly each number
-            ['.photo-page__index .char', {
+            ['.index .char', {
                 y: ['300%', 0],
             }, {
                 at: 1.1,
@@ -306,7 +306,7 @@
 
 <main class="photo-page">
     <div class="container grid">
-        <p class="photo-page__notice text-label">Tap for fullscreen</p>
+        <p class="notice text-label">Tap for fullscreen</p>
 
         <ButtonCircle
             tag="a"
@@ -320,15 +320,15 @@
             </svg>
         </ButtonCircle>
 
-        <div class="photo-page__carousel">
+        <div class="carousel">
             <div
-                class="photo-page__images"
+                class="images"
                 use:swipe
                 onswipe={handleSwipe}
                 ontap={toggleFullscreen}
             >
                 {#each visiblePhotos as { id, image, title }, index (id)}
-                    <div class="photo-page__picture is-{currentIndex === 0 ? index + 1 : index}">
+                    <div class="picture is-{currentIndex === 0 ? index + 1 : index}">
                         <Image
                             class="photo {image.width / image.height < 1.475 ? 'not-landscape' : ''}"
                             id={image.id}
@@ -344,24 +344,32 @@
                     </div>
                 {/each}
 
-                <div class="photo-page__controls">
+                <nav class="controls">
-                    <ButtonCircle class="prev shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} onclick={goToPrevious}>
+                    <div class="prev" class:is-disabled={!canGoNext}>
+                        <ButtonCircle class="shadow-box-dark" label="Previous" disabled={!canGoNext} clone={true} onclick={goToPrevious}>
                             <IconArrow color="pink" flip={true} />
                         </ButtonCircle>
-                    <ButtonCircle class="next shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
+                    </div>
+                    <div class="next" class:is-disabled={!canGoPrev}>
+                        <ButtonCircle class="shadow-box-dark" label="Next" disabled={!canGoPrev} clone={true} onclick={goToNext}>
                             <IconArrow color="pink" />
                         </ButtonCircle>
                     </div>
+                </nav>
 
-
-                <div class="photo-page__index title-index">
                 <div class="index title-index">
                     <SplitText text={padZero(currentPhotoIndex)} mode="chars" />
                 </div>
             </div>
 
-            <div class="photo-page__info">
+            <div class="info">
-                <h1 class="title-medium">{currentPhoto.title}</h1>
+                <div class="name">
+                    {#key currentPhoto}
+                        <h1 class="title-medium" in:fade={{ duration: 250, delay: 250 }} out:fade={{ duration: 250 }}>
+                            {currentPhoto.title}
+                        </h1>
+                    {/key}
+                </div>
 
                 <div class="detail text-info">
                     <a href="/{data.location.country.slug}/{data.location.slug}" data-sveltekit-noscroll>
@@ -386,7 +394,7 @@
     {#if isFullscreen}
         <div
             bind:this={fullscreenEl}
-            class="photo-page__fullscreen"
+            class="fullscreen"
             onclick={toggleFullscreen}
             in:fade={{ easing: quartOut, duration: 1000 }}
             out:fade={{ easing: quartOut, duration: 1000, delay: 300 }}

apps/website/src/style/pages/_viewer.scss

@@ -6,6 +6,38 @@
     align-items: center;
     overflow: hidden;
 
+    // Close button
+    :global(.close) {
+        --offset: 16px;
+        position: fixed !important;
+        z-index: 2;
+        top: var(--offset);
+        right: var(--offset);
+
+        @include bp (sm) {
+            --offset: clamp(20px, 3vw, 40px);
+        }
+
+        :global(svg) {
+            max-width: 14px;
+            max-height: 14px;
+
+            @include bp (md) {
+                max-width: 20px;
+                max-height: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            :global(svg) {
+                transform: rotate3d(0, 0, 1, 90deg) !important;
+                transition-duration: 1.2s;
+            }
+        }
+    }
+}
+
 .container {
     position: relative;
     width: 100%;
@@ -17,7 +49,7 @@
 }
 
 // Carousel
-    &__carousel {
+.carousel {
     position: absolute;
     top: 0;
     left: 50%;
@@ -44,7 +76,7 @@
 }
 
 // Images
-    &__images {
+.images {
     position: relative;
     width: 100%;
     margin: auto auto 0;
@@ -52,7 +84,7 @@
     touch-action: none;
 }
 
-    &__picture {
+.picture {
     --opacity: 1;
     --scale: 0.6;
     --rotate: 0deg;
@@ -220,7 +252,7 @@
 }
 
 // Infos
-    &__info {
+.info {
     bottom: 0;
     margin-top: auto;
     margin-bottom: 40px;
@@ -239,7 +271,11 @@
         align-items: baseline;
     }
 
+    .name {
+        display: grid;
+    }
     h1 {
+        grid-area: 1 / -1 / 1 / -1;
         color: $color-secondary;
         font-size: clamp(#{rem(18px)}, 5.5vw, #{rem(28px)});
         line-height: 1.1;
@@ -290,7 +326,7 @@
 }
 
 // Index
-    &__index {
+.index {
     position: absolute;
     z-index: 1;
     left: 50%;
@@ -322,7 +358,7 @@
 }
 
 // Controls
-    &__controls {
+.controls {
     display: none;
 
     @include bp (md) {
@@ -337,12 +373,19 @@
         pointer-events: none;
     }
 
-        :global(button) {
+    div {
+        transition: transform 0.3s var(--ease-quart);
         pointer-events: auto;
 
+        // State: Shrink down when clicking
+        &:not(.is-disabled):active {
+            transform: scale(0.9);
+        }
+    }
+
     // Prev button
-            &:first-child {
+    .prev :global(button) {
-                & > :global(*:nth-child(2)) {
+        :global(> *:nth-child(2)) {
             transform: translate3d(100%, -50%, 0) rotate(180deg);
         }
 
@@ -357,7 +400,9 @@
         }
     }
 
-            // Hover
+    // State: Hover
+    :global(button) {
+        // Common button styles
         &:not([disabled]):hover {
             background-color: $color-secondary;
             color: #fff;
@@ -370,7 +415,7 @@
 }
 
 // Fullscreen viewer
-    &__fullscreen {
+.fullscreen {
     position: absolute;
     z-index: 102;
     top: 0;
@@ -419,7 +464,7 @@
 }
 
 // Notice
-    &__notice {
+.notice {
     position: absolute;
     top: 16px;
     left: 20px;
@@ -430,35 +475,3 @@
         display: none;
     }
 }
-
-    // Close button
-    :global(.close) {
-        --offset: 16px;
-        position: fixed !important;
-        z-index: 2;
-        top: var(--offset);
-        right: var(--offset);
-
-        @include bp (sm) {
-            --offset: clamp(20px, 3vw, 40px);
-        }
-
-        :global(svg) {
-            max-width: 14px;
-            max-height: 14px;
-
-            @include bp (md) {
-                max-width: 20px;
-                max-height: 20px;
-            }
-        }
-
-        // Hover
-        &:hover {
-            :global(svg) {
-                transform: rotate3d(0, 0, 1, 90deg) !important;
-                transition-duration: 1.2s;
-            }
-        }
-    }
-}