Merge pull request #533 from photonia-io/homepage-improvements

Homepage improvements
photonia-io · Apr 23, 2023 · eb0b49d · eb0b49d
2 parents c36b395 + a0b3e59
commit eb0b49d
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 48 deletions.
diff --git 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/homepage/most-used-tags.vue b/app/javascript/homepage/most-used-tags.vue
@@ -1,15 +1,14 @@
 <template>
-  <div>
-    <h2 class="title is-3">Most used tags</h2>
-    <div class="field is-grouped is-grouped-multiline">
-      <TagWithCount
-        v-for="tag in tags"
-        :tag="tag"
-        :key="tag.id"
-      />
-    </div>
-    <router-link :to="{ name: 'tags-index' }" class="button">See tags page...</router-link>
+  <h2 class="title is-3 mb-2">Most used tags</h2>
+  <hr class="mt-0 mb-3"/>
+  <div class="field is-grouped is-grouped-multiline">
+    <TagWithCount
+      v-for="tag in tags"
+      :tag="tag"
+      :key="tag.id"
+    />
   </div>
+  <router-link :to="{ name: 'tags-index' }" class="button">See tags page...</router-link>
 </template>
 
 <script>

diff --git a/app/javascript/homepage/random-photos.vue b/app/javascript/homepage/random-photos.vue
@@ -1,5 +1,6 @@
 <template>
-  <h1 class="title is-3">Random Photos</h1>
+  <h2 class="title is-3 mb-2">Random Photos</h2>
+  <hr class="mt-0 mb-3"/>
   <div class="columns is-variable is-multiline">
     <div
       v-for="photo in photos"

diff --git 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>