✨ Better attachment view page

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)
 

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>

pages/gallery/[id].vue

@@ -1,5 +1,15 @@
 <template>
-  <v-container class="content-container mx-auto">
+  <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>
+    </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" />
@@ -10,12 +20,6 @@
         </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">
@@ -52,18 +56,27 @@
         <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>
+    </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>