added genres to details view

frontend/src/components/Details/BackgroundHeader.vue

@@ -23,12 +23,12 @@ const style = reactive({
   height: "330px",
   "-webkit-filter": "blur(3px)",
   filter: "blur(3px)",
-  transform: "scale(7)",
+  transform: "scale(8)",
 });
 </script>
 
 <template>
-  <v-card>
+  <v-card rounded="0">
     <v-img :src="imgSrc" :lazy-src="imgSrcLazy" :style="style" />
   </v-card>
 </template>

frontend/src/components/Details/DetailsInfo.vue

@@ -62,13 +62,27 @@ const downloadStore = storeDownload();
       <span>Tags</span>
     </v-col>
     <v-col>
-      <v-chip-group class="pt-0">
-        <v-chip v-for="tag in rom.tags" :key="tag" class="bg-chip" label>
-          {{ tag }}
-        </v-chip>
-      </v-chip-group>
+      <v-chip v-for="tag in rom.tags" :key="tag" class="bg-chip mr-1" label>
+        {{ tag }}
+      </v-chip>
     </v-col>
   </v-row>
+  <v-row v-if="rom.genres.length > 0" class="align-center py-2" no-gutters>
+    <v-col cols="3" sm="2" xl="1">
+      <span>Genres</span>
+    </v-col>
+    <v-col>
+      <v-chip
+        v-for="tag in rom.genres"
+        :key="tag"
+        class="bg-chip mr-1 mt-1"
+        label
+      >
+        {{ tag }}
+      </v-chip>
+    </v-col>
+  </v-row>
+  <v-divider class="ma-2" />
   <v-row class="py-3" no-gutters>
     <v-col class="text-caption">
       <p>{{ rom.summary }}</p>

frontend/src/components/Details/Title.vue

@@ -2,21 +2,23 @@
 import PlatformIcon from "@/components/Platform/PlatformIcon.vue";
 import { regionToEmoji, languageToEmoji } from "@/utils";
 import type { RomSchema, PlatformSchema } from "@/__generated__/"
+import { useDisplay } from "vuetify";
 
 defineProps<{ rom: RomSchema, platform: PlatformSchema }>();
+const { smAndDown } = useDisplay();
 </script>
 <template>
-  <v-row class="text-white text-shadow" no-gutters>
-    <v-col cols="12" class="text-h5 font-weight-bold px-1">
+  <v-row class="text-white text-shadow" :class="{'text-center': smAndDown}" no-gutters>
+    <v-col cols="12" class="text-h5 font-weight-bold">
       <span>{{ rom.name }}</span>
     </v-col>
     <v-col cols="12">
       <v-chip
-        class="font-italic px-3 my-2"
+        class="font-italic my-2 pl-4"
         :to="{ name: 'platform', params: { platform: platform.id } }"
       >
         {{ platform.name }}
-        <v-avatar :rounded="0" size="40" class="ml-2 pa-2">
+        <v-avatar :rounded="0" size="40" class="ml-2 py-2">
           <platform-icon :key="platform.slug" :slug="platform.slug" />
         </v-avatar>
       </v-chip>

frontend/src/components/Game/Card/Cover.vue

@@ -114,11 +114,11 @@ function onTouchEnd() {
             <v-list-item>{{ rom.name || rom.file_name }}</v-list-item>
           </div>
         </v-expand-transition>
-        <v-chip-group class="ml-2 pt-0 text-shadow position-absolute flags">
+        <v-row no-gutters class="px-1">
           <v-chip
             v-if="rom.regions.filter((i: string) => i).length > 0"
             :title="`Regions: ${rom.regions.join(', ')}`"
-            class="bg-chip px-2 py-3"
+            class="bg-chip mr-1 mt-1"
             density="compact"
           >
             <span class="px-1" v-for="region in rom.regions">
@@ -128,7 +128,7 @@ function onTouchEnd() {
           <v-chip
             v-if="rom.languages.filter((i: string) => i).length > 0"
             :title="`Languages: ${rom.languages.join(', ')}`"
-            class="bg-chip px-2 py-3"
+            class="bg-chip mr-1 mt-1"
             density="compact"
           >
             <span class="px-1" v-for="language in rom.languages">
@@ -138,12 +138,12 @@ function onTouchEnd() {
           <v-chip
             v-if="rom.siblings && rom.siblings.length > 0"
             :title="`${rom.siblings.length + 1} versions`"
-            class="bg-chip px-2 py-3"
+            class="bg-chip mr-1 mt-1"
             density="compact"
           >
             +{{ rom.siblings.length }}
           </v-chip>
-        </v-chip-group>
+        </v-row>
         <v-icon
           v-show="isHoveringTop && showSelector"
           @click="onSelectRom"
@@ -168,11 +168,4 @@ function onTouchEnd() {
   bottom: 0.2rem;
   right: 0.2rem;
 }
-.flags {
-  bottom: -0.25rem;
-  left: 0;
-}
-.text-shadow {
-  text-shadow: 1px 1px 3px #000000, 0 0 3px #000000;
-}
 </style>

frontend/src/services/api/filter.ts

@@ -0,0 +1,10 @@
+import api from "@/services/api/index";
+
+export const stateApi = api;
+
+async function getFilters(): Promise<{ data: { genres: string[] } }> {
+  return api.get("/filters");
+}
+export default {
+  getFilters,
+};

frontend/src/views/Details/Base.vue

@@ -98,6 +98,7 @@ watch(
 
     <v-row
       :class="{
+        'mx-12': mdAndUp,
         'justify-center': smAndDown,
       }"
       no-gutters
@@ -108,9 +109,6 @@ watch(
           'cover-lg': mdAndUp,
           'cover-xs': smAndDown,
         }"
-        cols="12"
-        md="6"
-        lg="6"
       >
         <cover :rom="rom" />
         <action-bar class="mt-2" :rom="rom" />
@@ -118,25 +116,30 @@ watch(
       </v-col>
       <v-col
         cols="12"
-        md="6"
-        lg="6"
-        class="px-6"
+        sm="12"
+        md="7"
+        lg="7"
+        xl="8"
+        class="px-5"
         :class="{
-          'mr-16 info-lg': mdAndUp,
+          'info-lg': mdAndUp,
           'info-xs': smAndDown,
         }"
       >
-        <v-row
+        <v-col
+          cols="12"
+          sm="12"
+          md="6"
+          lg="5"
+          xl="6"
+          class="px-0"
           :class="{
-            'position-absolute title-lg mr-16': mdAndUp,
+            'position-absolute title-lg': mdAndUp,
             'justify-center': smAndDown,
           }"
-          no-gutters
         >
-          <v-col cols="12">
-            <title-info :rom="rom" :platform="platform" />
-          </v-col>
-        </v-row>
+          <title-info :rom="rom" :platform="platform" />
+        </v-col>
         <v-row
           :class="{
             'justify-center': smAndDown,
@@ -187,6 +190,9 @@ watch(
           </v-col>
         </v-row>
       </v-col>
+      <!-- <v-divider vertical v-if="mdAndUp" />
+      <v-col class="extra-info px-5 bg-primary">
+      </v-col> -->
     </v-row>
   </template>
 
@@ -206,15 +212,20 @@ watch(
 }
 .cover-lg {
   margin-top: -230px;
-  margin-left: 110px;
-}
-.cover-xs {
-  margin-top: -280px;
 }
 .title-lg {
   margin-top: -190px;
 }
+.cover-xs {
+  margin-top: -280px;
+}
 .info-xs {
   margin-top: 60px;
 }
+.extra-info {
+  margin-top: -230px;
+  z-index: 0;
+}
+.extra-info-xs {
+}
 </style>