Merge pull request #477 from photonia-io/better-portrait-photos

Better display for portrait photos
photonia-io · Apr 8, 2023 · ac50f8d · ac50f8d
2 parents dead07d + 6d1814c
commit ac50f8d
Show file tree

Hide file tree

Showing 19 changed files with 399 additions and 342 deletions.
diff --git a/app/graphql/graphql_query_collection.rb b/app/graphql/graphql_query_collection.rb
@@ -133,6 +133,7 @@ class GraphqlQueryCollection
           name
           description
           largeImageUrl: imageUrl(type: "large")
+          extralargeImageUrl: imageUrl(type: "extralarge")
           dateTaken
           importedAt
           previousPhoto {

diff --git a/app/graphql/types/photo_type.rb b/app/graphql/types/photo_type.rb
@@ -16,9 +16,12 @@ class PhotoType < Types::BaseObject
     field :machine_tags, [TagType], 'Machine (Rekognition) tags', null: true
     field :name, String, 'Title of the photo', null: false
     field :next_photo, PhotoType, 'Next photo', null: true
+    field :width, Integer, 'Width of the photo in pixels', null: true
+    field :height, Integer, 'Height of the photo in pixels', null: true
     field :previous_photo, PhotoType, 'Previous photo', null: true
-    field :user_tags, [TagType], 'User (non-Rekognition) tags', null: true
+    field :ratio, Float, 'Ratio of the photo', null: true
     field :rekognition_label_model_version, String, 'Rekognition label model version', null: true
+    field :user_tags, [TagType], 'User (non-Rekognition) tags', null: true
 
     field :image_url, String, null: false do
       description 'URL of the image'
@@ -67,5 +70,13 @@ def image_url(type:)
     def rekognition_label_model_version
       @object.rekognition_response['label_model_version'].presence || ''
     end
+
+    def width
+      @object.pixel_width
+    end
+
+    def height
+      @object.pixel_height
+    end
   end
 end
diff --git a/app/javascript/albums/index.vue b/app/javascript/albums/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Albums</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Albums</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <AlbumItem

diff --git a/app/javascript/albums/show.vue b/app/javascript/albums/show.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Album: {{ album.title }}</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Album: {{ album.title }}</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <PhotoItem

diff --git a/app/javascript/app.vue b/app/javascript/app.vue
@@ -1,11 +1,7 @@
 <template>
   <div>
     <Navigation></Navigation>
-    <section class="section pt-5">
-      <div class="container is-dark">
-        <RouterView></RouterView>
-      </div>
-    </section>
+    <RouterView></RouterView>
     <Footer></Footer>
   </div>
 </template>

diff --git a/app/javascript/footer.vue b/app/javascript/footer.vue
@@ -1,10 +1,25 @@
 <template>
-  <footer class="footer">
+  <footer class="footer mt-5">
     <div class="content has-text-centered">
       <p>
         Photos &copy; <a href="https://www.rusiczki.net">János Rusiczki</a>
       </p>
       <p>
+        <router-link :to="{ name: 'tags-index' }">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-tags"></i></span>
+            <span>Tags</span>
+          </span>
+        </router-link>
+        &middot;
+        <a>
+          About
+        </a>
+        &middot;
+        <a>
+          Contact
+        </a>
+        &middot;
         Powered by <a href="https://github.com/janosrusiczki/photonia">Photonia</a>
       </p>
     </div>

diff --git a/app/javascript/homepage/index.vue b/app/javascript/homepage/index.vue
@@ -1,10 +1,30 @@
 <template>
   <div>
-    <div class="block">
-      <LatestPhoto
-        v-if="result && result.latestPhoto"
-        :photo="result.latestPhoto"
-      />
+    <div class="container">
+      <h1 class="title mt-5 mb-1"></h1>
+    </div>
+    <DisplayHero
+      v-if="!loading"
+      :photo="result.latestPhoto"
+    />
+    <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="is-hidden-touch mt-1 mb-4">
     <div class="block">
@@ -23,6 +43,8 @@
         </div>
       </div>
     </div>
+
+    </div>
   </div>
 </template>
 
@@ -32,11 +54,11 @@
   import { useTitle } from 'vue-page-title'
 
   // components
-  import LatestPhoto from './latest-photo.vue'
+  import DisplayHero from '../photos/display-hero.vue'  
   import RandomPhoto from './random-photo.vue'
   import MostUsedTags from './most-used-tags.vue'
 
   useTitle('')
 
-  const { result } = useQuery(gql`${gql_queries.homepage_index}`)
+  const { result, loading } = useQuery(gql`${gql_queries.homepage_index}`)
 </script>
diff --git a/app/javascript/navigation.vue b/app/javascript/navigation.vue
@@ -23,65 +23,62 @@
       >
         <div class="navbar-start">
           <router-link :to="{ name: 'photos-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-image"></i></span>
-            <span>Photos</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-image"></i></span>
+              <span>Photos</span>
+            </span>
           </router-link>
 
           <router-link :to="{ name: 'albums-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-book"></i></span>
-            <span>Albums</span>
-          </router-link>
-
-          <router-link :to="{ name: 'tags-index' }" class="navbar-item">
-            <span class="icon"><i class="fas fa-tag"></i></span>
-            <span>Tags</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-book"></i></span>
+              <span>Albums</span>
+            </span>
           </router-link>
 
           <router-link
             v-if="userStore.signedIn"
             :to="{ name: 'photos-upload' }"
             class="navbar-item"
           >
-            <span class="icon"><i class="fas fa-upload"></i></span>
-            <span>Upload</span>
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-upload"></i></span>
+              <span>Upload</span>
+            </span>
           </router-link>          
 
-          <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link">
-              More
-            </a>
-            <div class="navbar-dropdown">
-              <a class="navbar-item">
-                About
-              </a>
-              <a class="navbar-item">
-                Contact
-              </a>
-              <hr class="navbar-divider">
-              <!-- <%= link_to 'Upload', new_photo_path, class: 'navbar-item' %> -->
-              <router-link
-                v-if="userStore.signedIn"
-                :to="{ name: 'users-settings' }"
-                class="navbar-item"
-              >
-                Settings
-              </router-link>
-              <router-link
-                v-if="userStore.signedIn"
-                :to="{ name: 'users-sign-out' }"
-                class="navbar-item"
-              >
-                Sign Out
-              </router-link>
-              <router-link
-                v-if="!userStore.signedIn"
-                :to="{ name: 'users-sign-in' }"
-                class="navbar-item"
-              >
-                Sign In
-              </router-link>
-            </div>
-          </div>
+          <router-link
+            v-if="userStore.signedIn"
+            :to="{ name: 'users-settings' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-cog"></i></span>
+              <span>Settings</span>
+            </span>
+          </router-link>
+
+          <router-link
+            v-if="userStore.signedIn"
+            :to="{ name: 'users-sign-out' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-sign-out-alt"></i></span>
+              <span>Sign Out</span>
+            </span>
+          </router-link>
+
+          <router-link
+            v-if="!userStore.signedIn"
+            :to="{ name: 'users-sign-in' }"
+            class="navbar-item"
+          >
+            <span class="icon-text">
+              <span class="icon"><i class="fas fa-sign-in-alt"></i></span>
+              <span>Sign In</span>
+            </span>
+          </router-link>
         </div>
 
         <div class="navbar-end">

diff --git a/app/javascript/photos/display-hero.vue b/app/javascript/photos/display-hero.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="hero is-dark mb-4">
+    <div class="hero-body pt-5 pb-4" style="text-align: center;">
+      <div id="image-wrapper">
+        <img :src="photo.extralargeImageUrl" />
+        <div
+          v-if="photo.labels"
+          class="labels"
+        >
+          <DisplayLabel
+            v-for="label in photo.labels"
+            :label="label"
+            :highlighted="labelHighlights[label.id]"
+            :key="label.id"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, onMounted, onUnmounted } from 'vue'
+  import DisplayLabel from './display-label.vue'
+
+  const props = defineProps({
+    photo: {
+      type: Object,
+      required: true
+    },
+    labelHighlights: {
+      type: Object,
+      required: false
+    }
+  })
+</script>
+
+<style scoped>
+  #image-wrapper {
+    margin: 0 auto;
+    display: inline-block;
+    position: relative;
+  }
+
+  #image-wrapper > img {
+    max-height: calc(100vh - 300px);
+    min-height: 400px;
+    width: 100%;
+    border-radius: 2px;
+    object-fit: contain;
+    display: block;
+  }
+  #image-wrapper > .labels {
+  }
+</style>
diff --git a/app/javascript/photos/display.vue b/app/javascript/photos/display.vue
diff --git a/app/javascript/photos/index.vue b/app/javascript/photos/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h1 class="title">Photos</h1>
+  <div class="container">
+    <h1 class="title mt-5 mb-0">Photos</h1>
     <hr class="is-hidden-touch mt-2 mb-4">
     <div class="columns is-1 is-variable is-multiline">
       <PhotoItem