From a0b3e594a882914644c9cf6611520ca317a5bae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A1nos=20Rusiczki?= <janos.rusiczki@gmail.com>
Date: Sun, 23 Apr 2023 12:56:23 +0300
Subject: [PATCH] Integrate photo title on the hero for homepage

---
 app/javascript/homepage/index.vue      | 49 +++++++--------------
 app/javascript/photos/display-hero.vue | 59 ++++++++++++++++++++++++--
 2 files changed, 71 insertions(+), 37 deletions(-)

diff --git a/app/javascript/homepage/index.vue b/app/javascript/homepage/index.vue
index bb6d7d87..8c5d02bc 100644
--- a/app/javascript/homepage/index.vue
+++ b/app/javascript/homepage/index.vue
@@ -2,46 +2,27 @@
   <DisplayHero
     v-if="!loading"
     :photo="result.latestPhoto"
+    isHomepage="true"
   />
   <section class="section-pt-pb-0">
     <div class="container">
-      <div
-      v-if="!loading"
-      class="level mt-3"
-    >
-      <div class="level-left">
-        <span class="title is-5">
-          Latest photo:
-          <router-link :to="{ name: 'photos-show', params: { id: result.latestPhoto.id } }">
-            {{ result.latestPhoto.name }}
-          </router-link>
-        </span>
-      </div>
-      <div class="level-right">
-        <router-link :to="{ name: 'photos-index' }" class="button">
-          See all photos...
-        </router-link>
-      </div>
-    </div>
-    <hr class="mt-1 mb-4">
-    <div class="block">
-      <div class="columns">
-        <div class="column is-half">
-          <RandomPhotos
-            v-if="result && result.randomPhotos"
-            :photos="result.randomPhotos"
-          />
-        </div>
-        <div class="column is-half">
-          <MostUsedTags
-            v-if="result && result.mostUsedTags"
-            :tags="result.mostUsedTags"
-          />
+      <div class="block">
+        <div class="columns">
+          <div class="column is-half">
+            <RandomPhotos
+              v-if="result && result.randomPhotos"
+              :photos="result.randomPhotos"
+            />
+          </div>
+          <div class="column is-half">
+            <MostUsedTags
+              v-if="result && result.mostUsedTags"
+              :tags="result.mostUsedTags"
+            />
+          </div>
         </div>
       </div>
     </div>
-
-    </div>
   </section>
 </template>
 
diff --git a/app/javascript/photos/display-hero.vue b/app/javascript/photos/display-hero.vue
index 1a5847c6..4b919c92 100644
--- a/app/javascript/photos/display-hero.vue
+++ b/app/javascript/photos/display-hero.vue
@@ -2,7 +2,16 @@
   <div class="hero is-dark mb-3">
     <div class="hero-body pt-4 pb-4" style="text-align: center;">
       <div id="image-wrapper">
-        <img :src="photo.extralargeImageUrl" />
+        <router-link
+          v-if="isHomepage"
+          :to="{ name: 'photos-show', params: { id: photo.id } }"
+        >
+          <img :src="photo.extralargeImageUrl" />
+        </router-link>
+        <img
+          v-else
+          :src="photo.extralargeImageUrl"
+        />
         <div
           v-if="photo.labels"
           class="labels"
@@ -14,13 +23,32 @@
             :key="label.id"
           />
         </div>
+        <div
+          v-if="isHomepage"
+          class="overlay"
+        >
+          <div class="level p-2">
+            <div class="level-left pl-3">
+              <p class="is-size-4">
+                Latest photo:
+                <router-link :to="{ name: 'photos-show', params: { id: photo.id } }">
+                  {{ photo.name }}
+                </router-link>
+              </p>
+            </div>
+            <div class="level-right has-text-right pr-3">
+              <router-link :to="{ name: 'photos-index' }" class="button">
+                See all photos...
+              </router-link>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { computed, ref, onMounted, onUnmounted } from 'vue'
   import DisplayLabel from './display-label.vue'
 
   const props = defineProps({
@@ -31,6 +59,11 @@
     labelHighlights: {
       type: Object,
       required: false
+    },
+    isHomepage: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   })
 </script>
@@ -42,7 +75,7 @@
     position: relative;
   }
 
-  #image-wrapper > img {
+  #image-wrapper img {
     max-height: calc(100vh - 150px);
     width: 100%;
     border-radius: 2px;
@@ -64,4 +97,24 @@
 
   #image-wrapper > .labels {
   }
+
+  .overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  // #image-wrapper > .overlay {
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 100%;
+  //   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  // }
 </style>