From d4122000ed2558b77c293cb8e7aeafb0b8e78df0 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Fri, 2 Feb 2024 13:33:50 +0100
Subject: [PATCH] add extra info section to details

---
 frontend/src/components/Details/ExtraInfo.vue |  7 ++++
 .../src/components/Details/SourceTable.vue    |  4 +--
 frontend/src/components/Drawer/Base.vue       |  2 +-
 frontend/src/components/Drawer/Header.vue     |  4 +--
 frontend/src/views/Details/Base.vue           | 32 +++++++++++++------
 frontend/src/views/Login.vue                  |  2 +-
 6 files changed, 34 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/Details/ExtraInfo.vue

diff --git a/frontend/src/components/Details/ExtraInfo.vue b/frontend/src/components/Details/ExtraInfo.vue
new file mode 100644
index 000000000..0c981468e
--- /dev/null
+++ b/frontend/src/components/Details/ExtraInfo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import type { Rom } from "@/stores/roms";
+
+defineProps<{ rom: Rom }>();
+</script>
+<template>
+</template>
diff --git a/frontend/src/components/Details/SourceTable.vue b/frontend/src/components/Details/SourceTable.vue
index ab52c5a7d..86d0e764a 100644
--- a/frontend/src/components/Details/SourceTable.vue
+++ b/frontend/src/components/Details/SourceTable.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import type { Rom } from "@/stores/roms";
-import { useDisplay } from "vuetify";
 
 defineProps<{ rom: Rom }>();
-const { mdAndUp } = useDisplay();
 </script>
 
 <template>
-  <div rounded="0" class="table" v-if="mdAndUp">
+  <div rounded="0" class="table">
     <v-row
       v-if="rom.igdb_id"
       class="align-center justify-center pa-2"
diff --git a/frontend/src/components/Drawer/Base.vue b/frontend/src/components/Drawer/Base.vue
index 8912d0bd8..a44a48655 100644
--- a/frontend/src/components/Drawer/Base.vue
+++ b/frontend/src/components/Drawer/Base.vue
@@ -36,7 +36,7 @@ onMounted(() => {});
   <v-navigation-drawer
     v-model="drawer"
     :rail="rail"
-    width="270"
+    width="220"
     rail-width="70"
     elevation="0"
   >
diff --git a/frontend/src/components/Drawer/Header.vue b/frontend/src/components/Drawer/Header.vue
index d52292722..d8ec26612 100644
--- a/frontend/src/components/Drawer/Header.vue
+++ b/frontend/src/components/Drawer/Header.vue
@@ -4,13 +4,13 @@ import RailBtn from "@/components/Drawer/RailBtn.vue";
 defineProps<{ rail: boolean }>();
 </script>
 <template>
-  <v-list-item :class="{ 'ml-8': !rail, 'ml-0': rail }" class="my-2">
+  <v-list-item :class="{ 'ml-1': !rail, 'ml-0': rail }" class="my-2">
     <template v-slot:prepend>
       <router-link :to="{ name: 'dashboard' }">
         <v-avatar :rounded="0" :size="rail ? 40 : 60"
           ><v-img src="/assets/isotipo.svg"
         /></v-avatar>
-        <v-avatar v-if="!rail" :rounded="0" size="60" class="ml-3"
+        <v-avatar v-if="!rail" :rounded="0" size="60" class="ml-3 mt-1"
           ><v-img src="/assets/logotipo.svg"
         /></v-avatar>
       </router-link>
diff --git a/frontend/src/views/Details/Base.vue b/frontend/src/views/Details/Base.vue
index 7c50941bf..2abbb6bf1 100644
--- a/frontend/src/views/Details/Base.vue
+++ b/frontend/src/views/Details/Base.vue
@@ -8,6 +8,7 @@ import { useDisplay } from "vuetify";
 import type { EnhancedRomSchema, PlatformSchema } from "@/__generated__";
 import ActionBar from "@/components/Details/ActionBar.vue";
 import SourceTable from "@/components/Details/SourceTable.vue";
+import ExtraInfo from "@/components/Details/ExtraInfo.vue";
 import BackgroundHeader from "@/components/Details/BackgroundHeader.vue";
 import Cover from "@/components/Details/Cover.vue";
 import DetailsInfo from "@/components/Details/DetailsInfo.vue";
@@ -27,8 +28,8 @@ import romApi from "@/services/api/rom";
 const route = useRoute();
 const rom = ref<EnhancedRomSchema>();
 const platform = ref<PlatformSchema>();
-const tab = ref<"details" | "saves" | "screenshots" | "emulation">("details");
-const { smAndDown, mdAndUp } = useDisplay();
+const tab = ref<"details" | "saves" | "states" | "extrainfo" | "sources" | "screenshots" | "emulation">("details");
+const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const showEmulation = ref(false);
 emitter?.on("showEmulation", () => {
@@ -112,7 +113,7 @@ watch(
       >
         <cover :rom="rom" />
         <action-bar class="mt-2" :rom="rom" />
-        <source-table class="mt-2" :rom="rom" />
+        <source-table class="mt-2" :rom="rom" v-if="mdAndUp" />
       </v-col>
       <v-col
         cols="12"
@@ -141,9 +142,7 @@ watch(
           <title-info :rom="rom" :platform="platform" />
         </v-col>
         <v-row
-          :class="{
-            'justify-center': smAndDown,
-          }"
+          class="justify-center"
           no-gutters
         >
           <v-tabs
@@ -155,6 +154,8 @@ watch(
             <v-tab value="details" rounded="0">Details</v-tab>
             <v-tab value="saves" rounded="0">Saves</v-tab>
             <v-tab value="states" rounded="0">States</v-tab>
+            <v-tab v-if="mdAndDown" value="extrainfo" rounded="0">Extra info</v-tab>
+            <v-tab v-if="smAndDown" value="sources" rounded="0">Sources</v-tab>
             <v-tab value="screenshots" rounded="0">Screenshots</v-tab>
           </v-tabs>
           <v-tabs
@@ -178,6 +179,12 @@ watch(
               <v-window-item value="states">
                 <states :rom="rom" />
               </v-window-item>
+              <v-window-item v-if="mdAndDown" value="extrainfo">
+                <extra-info :rom="rom" />
+              </v-window-item>
+              <v-window-item v-if="mdAndDown" value="sources">
+                <source-table :rom="rom" />
+              </v-window-item>
               <v-window-item value="screenshots">
                 <screenshots :rom="rom" />
               </v-window-item>
@@ -190,9 +197,13 @@ watch(
           </v-col>
         </v-row>
       </v-col>
-      <!-- <v-divider vertical v-if="mdAndUp" />
-      <v-col class="extra-info px-5 bg-primary">
-      </v-col> -->
+      <template v-if="lgAndUp">
+        <v-col class="extra-info">
+          <v-card class="translucent">
+            <extra-info :rom="rom" />
+          </v-card>
+        </v-col>
+      </template>
     </v-row>
   </template>
 
@@ -226,6 +237,7 @@ watch(
   margin-top: -230px;
   z-index: 0;
 }
-.extra-info-xs {
+.translucent{
+  background-color: rgba(15, 15, 15, 0.5);
 }
 </style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 5ce535b3d..3b2ce259b 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -126,6 +126,6 @@ onBeforeMount(async () => {
   background-size: cover;
 }
 #card {
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(15, 15, 15, 0.5);
 }
 </style>