Merge pull request #4 from aSouchereau/layout-fix

Layout fix

src/components/Pages/Gallery.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import {useAlbum} from "@/composables/api/Album.ts";
-  import AlbumThumb from "@/components/Content/AlbumThumb.vue";
+  import {useAlbum} from "@/composables/api/Album.ts";
+  import AlbumThumb from "@/components/Utility/AlbumThumb.vue";
   import {Router, useRouter} from "vue-router";
   import Loader from "@/components/Utility/Loader.vue";
   import {watch} from "vue";
   import {useHead} from "@unhead/vue";
+  import Lightbox from "@/components/Utility/Lightbox.vue";
+  import MasonryWall from "@yeger/vue-masonry-wall";
 
   const galleryAlbum = import.meta.env.VITE_GALLERY_ALBUM_ID;
   useHead({
@@ -20,15 +22,65 @@ import {useAlbum} from "@/composables/api/Album.ts";
       router.push('/404');
     }
   });
+
+  let photos: Photo[] = [];
+
+  watch(data, (data) => {
+    data.photos.forEach((photo: any) => {
+      let date = new Date(photo.created_at);
+      photos.push({
+        id: photo.id,
+        albumId: data.id,
+        thumb: photo.size_variants.small.url,
+        caption: `${photo.description ?? ""}<span class="copy-notice">Image &copy; ${date.getFullYear()} Alex Souchereau. All Rights Reserved.</span>`,
+        src: photo.size_variants.medium2x?.url ?? photo.size_variants.medium?.url ?? photo.size_variants.small2x?.url ?? photo.size_variants.small.url,
+      });
+    });
+  });
+
 </script>
 
 <template>
   <div v-if="isFetching" class="loader-container">
     <Loader />
   </div>
-  <div v-else-if="isFinished" class="albums-container container">
-    <div v-for="album in data.albums" :key="album.id" :id="'album' + album.id">
-      <AlbumThumb :album-id="album.id" :title="album.title" :thumb-url="album.thumb ? album.thumb.thumb : null"/>
+  <div v-else-if="isFinished" class="container">
+    <h2>Gallery</h2>
+    <div class="albums-container">
+      <div v-for="album in data.albums" :key="album.id" :id="'album' + album.id">
+        <AlbumThumb :album-id="album.id" :title="album.title" :thumb-url="album.thumb ? album.thumb.thumb : null"/>
+      </div>
+    </div>
+    <div v-if="photos" class="photos-container">
+      <Lightbox id="gallery-wrapper"
+                :options="{
+      contentClick: false,
+      Thumbs: {
+        type: 'classic'
+      },
+      Toolbar: {
+        display: {
+          left: [ 'infobar'],
+          middle: [],
+          right: ['slideshow', 'thumbs', 'close'],
+        }
+      }
+    }">
+        <MasonryWall :items="photos" :ssr-columns="1" :column-width="250" :gap="10">
+          <template #default="{ item }">
+            <li class="gallery-item">
+              <a
+                  :href="item.src"
+                  :data-fancybox="item.albumId"
+                  :data-caption="item.caption"
+                  :data-slug="item.id">
+                <img :src="item.thumb" :alt="item.caption">
+              </a>
+            </li>
+          </template>
+        </MasonryWall>
+
+      </Lightbox>
     </div>
   </div>
 </template>
@@ -40,6 +92,14 @@ import {useAlbum} from "@/composables/api/Album.ts";
     grid-auto-rows: 15rem;
     row-gap: 1rem;
     column-gap: 1rem;
+    margin-bottom: 3rem;
+  }
+
+  li {
+    list-style: none;
+  }
+  img {
+    width: 100%;
   }
 
   @media only screen

src/components/Pages/Index/FeaturedSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Carousel from "@/components/Content/Carousel.vue";
+import Carousel from "@/components/Utility/Carousel.vue";
 import {useAlbum} from "@/composables/api/Album";
 import {watch} from "vue";
 
@@ -13,7 +13,7 @@ watch(data, (data) => {
     photos.push({
       id: photo.id,
       albumId: photo.album_id,
-      thumb: photo.size_variants.small.url,
+      thumb: photo.size_variants.small2x.url,
       src: photo.size_variants.medium2x?.url ?? photo.size_variants.medium?.url ?? photo.size_variants.small2x?.url ?? photo.size_variants.small.url,
       caption: `${photo.description ?? ""}<span class="copy-notice">Image &copy; ${date.getFullYear()} Alex Souchereau. All Rights Reserved.</span>`,
     })

src/components/Pages/Index/HeroSection.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ActionButton from "@/components/Content/ActionButton.vue";
+import ActionButton from "@/components/Utility/ActionButton.vue";
 import {ref, watch} from "vue";
 import {useAlbum} from "@/composables/api/Album.ts";
 

src/components/Content/Carousel.vue → src/components/Utility/Carousel.vue

@@ -5,7 +5,7 @@ const { Carousel } = pkg;
 import "@fancyapps/ui/dist/carousel/carousel.css";
 
 import {onMounted, onUnmounted, ref} from "vue";
-import ActionButton from "@/components/Content/ActionButton.vue";
+import ActionButton from "@/components/Utility/ActionButton.vue";
 
 const props = defineProps({
   options: Object,
@@ -26,17 +26,14 @@ onUnmounted(() => {
   carousel = null;
 });
 
-function navigateToImage(destination: string) {
-console.log(destination);
-}
-
 </script>
 
 <template>
   <div class="f-carousel" ref="container" id="cardSlider">
     <div class="f-carousel__viewport">
-      <div class="f-carousel__slide" v-for="photo in props.photos" :key="photo.id" @click="navigateToImage('/album/' + photo.albumId + '#' + photo.id)">
-        <img :src="photo.thumb" :alt="photo.caption">
+      <div class="f-carousel__slide" v-for="photo in props.photos" :key="photo.id">
+<!--        <img :src="photo.thumb" :alt="photo.caption">-->
+        <div class="img-body" :style="`background-image: url('${photo.thumb}')`"></div>
         <div class="img-nav">
           <ActionButton :destination="'/album/' + photo.albumId + '#' + photo.id" class="view-btn">View</ActionButton>
         </div>
@@ -46,6 +43,12 @@ console.log(destination);
 </template>
 
 <style scoped>
+.img-body {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+}
+
 .img-nav {
   position: absolute;
   visibility: hidden;
@@ -74,6 +77,7 @@ console.log(destination);
 }
 
 #cardSlider {
+  --f-carousel-slide-height: 30rem;
   --f-carousel-spacing: 16px;
   --f-carousel-slide-padding: 0;
 
@@ -104,6 +108,8 @@ console.log(destination);
   #cardSlider {
     --f-button-prev-pos: -4rem;
     --f-button-next-pos: -4rem;
+
+    --f-carousel-slide-height: 23rem;
   }
 }
 </style>