From 6693acb24a39c9577a62c151ac3b8f98ca783649 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Fri, 4 Oct 2024 20:21:01 +0800
Subject: [PATCH] :sparkles: Better attachment view page

---
 components/attachment/Renderer.vue |   4 +-
 layouts/minimal.vue                |  24 ++++++
 pages/gallery/[id].vue             | 121 ++++++++++++++---------------
 3 files changed, 86 insertions(+), 63 deletions(-)
 create mode 100644 layouts/minimal.vue

diff --git a/components/attachment/Renderer.vue b/components/attachment/Renderer.vue
index 796fd59..58535ec 100644
--- a/components/attachment/Renderer.vue
+++ b/components/attachment/Renderer.vue
@@ -18,7 +18,7 @@
     </v-row>
   </v-sheet>
   <v-img v-else-if="item.mimetype.split('/')[0] == 'image'" :src="getAttachmentUrl(item.rid)" :alt="item.alt"
-         class="w-full h-full" cover />
+         class="w-full h-full" :cover="!props.noCover" />
   <video v-else-if="item.mimetype.split('/')[0] == 'video'" :src="getAttachmentUrl(item.rid)" class="w-full h-full"
          controls @click.stop />
   <v-sheet v-else color="rgba(0, 0, 0, .4)" height="calc(100% + 24px)" class="p-5">
@@ -49,7 +49,7 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
 
-const props = defineProps<{ item: any }>()
+const props = defineProps<{ item: any, noCover?: boolean }>()
 
 const item = computed(() => props.item)
 
diff --git a/layouts/minimal.vue b/layouts/minimal.vue
new file mode 100644
index 0000000..0633fd3
--- /dev/null
+++ b/layouts/minimal.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-system-bar flat color="primary" class="px-5 flex justify-center">
+    <v-btn icon="mdi-arrow-left" variant="text" color="white" size="x-small" class="mt-[2px]" @click="goBack" />
+    <h2 class="mt-1">Solsynth LLC</h2>
+
+    <v-spacer />
+  </v-system-bar>
+
+  <v-main>
+    <slot />
+  </v-main>
+</template>
+
+<script setup lang="ts">
+const router = useRouter()
+
+function goBack() {
+  if (window.history.length > 0) {
+    router.go(-1)
+  } else {
+    navigateTo("/")
+  }
+}
+</script>
diff --git a/pages/gallery/[id].vue b/pages/gallery/[id].vue
index ac0a41a..91cd05e 100644
--- a/pages/gallery/[id].vue
+++ b/pages/gallery/[id].vue
@@ -1,69 +1,82 @@
 <template>
-  <v-container class="content-container mx-auto">
-    <div class="mt-3 mb-4.5 mx-[2.5ch] flex flex-row gap-4 items-center">
-      <nuxt-link :to="`/users/${attachment.account?.name}`">
-        <v-avatar :image="attachment.account?.avatar" />
-      </nuxt-link>
-      <div class="flex flex-col">
-        <span class="text-xs">Uploaded by</span>
-        <span>{{ attachment.account?.nick }} <span class="text-xs">@{{ attachment.account?.name }}</span></span>
+  <v-row class="h-[calc(100vh-24px)]" no-gutters>
+    <v-col cols="12" md="8">
+      <div class="h-full w-full flex justify-center items-center" :class="isMediumScreen ? 'flex-row' : 'flex-col'">
+        <div class="flex-grow-1 w-full">
+          <attachment-renderer :item="attachment" no-cover />
+        </div>
+        <v-divider v-if="isMediumScreen" vertical />
+        <v-divider v-else />
       </div>
-    </div>
-
-    <h2 class="section-header">Preview</h2>
-    <v-card class="mb-5">
-      <attachment-renderer :item="attachment" />
-    </v-card>
-
-    <h2 class="section-header">Metadata</h2>
-    <v-card class="mb-5">
-      <v-card-text class="flex flex-col gap-4">
-        <div class="flex flex-col" v-if="attachment?.alt">
-          <span class="text-xs font-bold">Alternative</span>
-          <span class="text-truncate">{{ attachment?.alt }}</span>
-        </div>
+    </v-col>
+    <v-col cols="12" md="4" class="px-5 pt-3">
+      <div class="mt-3 mb-4.5 mx-[2.5ch] flex flex-row gap-4 items-center">
+        <nuxt-link :to="`/users/${attachment.account?.name}`">
+          <v-avatar :image="attachment.account?.avatar" />
+        </nuxt-link>
         <div class="flex flex-col">
-          <span class="text-xs font-bold">Original File Name</span>
-          <span class="text-truncate">{{ attachment?.name }}</span>
+          <span class="text-xs">Uploaded by</span>
+          <span>{{ attachment.account?.nick }} <span class="text-xs">@{{ attachment.account?.name }}</span></span>
         </div>
-        <div class="flex flex-col">
-          <span class="text-xs font-bold">Size</span>
-          <span>{{ formatBytes(attachment?.size) }}</span>
-        </div>
-        <div class="flex flex-col" v-if="attachment?.metadata?.ratio">
-          <span class="text-xs font-bold">Aspect Ratio</span>
-          <span>
+      </div>
+
+      <v-card class="mb-5">
+        <v-card-text class="flex flex-col gap-4">
+          <div class="flex flex-col" v-if="attachment?.alt">
+            <span class="text-xs font-bold">Alternative</span>
+            <span class="text-truncate">{{ attachment?.alt }}</span>
+          </div>
+          <div class="flex flex-col">
+            <span class="text-xs font-bold">Original File Name</span>
+            <span class="text-truncate">{{ attachment?.name }}</span>
+          </div>
+          <div class="flex flex-col">
+            <span class="text-xs font-bold">Size</span>
+            <span>{{ formatBytes(attachment?.size) }}</span>
+          </div>
+          <div class="flex flex-col" v-if="attachment?.metadata?.ratio">
+            <span class="text-xs font-bold">Aspect Ratio</span>
+            <span>
             {{ attachment?.metadata?.width }}x{{ attachment?.metadata?.height }}
             {{ attachment?.metadata?.ratio.toFixed(2) }}
           </span>
-        </div>
-        <div class="flex flex-col" v-if="attachment?.mimetype">
-          <span class="text-xs font-bold">Mimetype</span>
-          <span>{{ attachment?.mimetype }}</span>
-        </div>
-        <div class="flex flex-col">
-          <span class="text-xs font-bold">Raw Data</span>
-          <v-code class="font-mono mt-1">{{ JSON.stringify(attachment.metadata, null, 4) }}</v-code>
-        </div>
-      </v-card-text>
-    </v-card>
+          </div>
+          <div class="flex flex-col" v-if="attachment?.mimetype">
+            <span class="text-xs font-bold">Mimetype</span>
+            <span>{{ attachment?.mimetype }}</span>
+          </div>
+          <div class="flex flex-col">
+            <span class="text-xs font-bold">Raw Data</span>
+            <v-code class="font-mono mt-1">{{ JSON.stringify(attachment.metadata, null, 4) }}</v-code>
+          </div>
+        </v-card-text>
+      </v-card>
 
-    <div class="text-xs text-grey flex flex-col mx-[2.5ch]">
-      <span>Solar Network Attachment Web Preview</span>
-      <span>Powered by <a class="underline" target="_blank" href="https://git.solsynth.dev/Hydrogen/Paperclip">Hydrogen.Paperclip</a></span>
-    </div>
-  </v-container>
+      <div class="text-xs text-grey flex flex-col mx-[2.5ch]">
+        <span>Solar Network Attachment Web Preview</span>
+        <span>Powered by <a class="underline" target="_blank" href="https://git.solsynth.dev/Hydrogen/Paperclip">Hydrogen.Paperclip</a></span>
+      </div>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from "vuetify"
+
 const route = useRoute()
 const config = useRuntimeConfig()
 
 const firstImage = ref<string | null>()
 const firstVideo = ref<string | null>()
 
+const isMediumScreen = useDisplay().mdAndUp
+
 const { data: attachment } = await useFetch<any>(`${config.public.solarNetworkApi}/cgi/uc/attachments/${route.params.id}/meta`)
 
+definePageMeta({
+  layout: "minimal",
+})
+
 if (!attachment.value) {
   throw createError({
     statusCode: 404,
@@ -117,17 +130,3 @@ function formatBytes(bytes: number, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 </script>
-
-<style scoped>
-.content-container {
-  max-width: 70ch !important;
-}
-
-.section-header {
-  margin-left: 2.5ch;
-  margin-right: 2.5ch;
-  margin-bottom: 8px;
-
-  @apply text-lg;
-}
-</style>