From 6eba9683e01bd22aaa8a0bfc9573b691ca1150fb Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Sat, 25 Mar 2023 02:30:39 +0100
Subject: [PATCH] some UI tweaks

---
 frontend/src/components/Navigation.vue  |  4 ++--
 frontend/src/components/RomDetails.vue  | 15 ++++++++-------
 frontend/src/components/RomsGallery.vue | 15 ++++++++++-----
 frontend/src/plugins/vuetify.js         |  1 +
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Navigation.vue b/frontend/src/components/Navigation.vue
index 352447412..3af7e300c 100644
--- a/frontend/src/components/Navigation.vue
+++ b/frontend/src/components/Navigation.vue
@@ -122,9 +122,9 @@ getPlatforms()
         <!-- App bar - Platforms drawer toggle -->
         <v-app-bar-nav-icon title="toggle platforms drawer" @click="drawer = !drawer" class="hidden-lg-and-up ml-1" rounded="0"/>
         <!-- App bar - Platform title - desktop -->
-        <v-toolbar-title class="text-h6 align-center justify-center d-none d-sm-flex ml-4"/>
+        <v-toolbar-title class="text-h6 align-center justify-center d-none d-lg-flex ml-4"/>
         <!-- App bar - Platform title - mobile -->
-        <v-toolbar-title class="text-h6 align-center d-sm-none ml-2">
+        <v-toolbar-title class="text-h6 align-center d-lg-none ml-2">
             <v-avatar class="mr-3" :rounded="0"><v-img :src="'/assets/platforms/'+currentPlatform.slug+'.png'"></v-img></v-avatar>
         </v-toolbar-title>
         <!-- App bar - Scan progress bar -->
diff --git a/frontend/src/components/RomDetails.vue b/frontend/src/components/RomDetails.vue
index 7e4176530..ca0295b58 100644
--- a/frontend/src/components/RomDetails.vue
+++ b/frontend/src/components/RomDetails.vue
@@ -159,16 +159,17 @@ async function deleteRom() {
     
     <v-divider class="mt-10 mb-10 border-opacity-75"/>
 
-    <v-dialog v-model="dialogSearchRom" scroll-strategy="none" width="auto" :scrim="false">
+    <v-dialog v-model="dialogSearchRom" :elevation="0" scroll-strategy="none" width="auto" :scrim="false">
         <v-card max-width="600">
-            <v-toolbar title="IGDB results:" class="pr-4"/>
             <v-list rounded="0" class="pa-0">
-                <div class="d-flex justify-center"><v-progress-circular v-show="searching" :width="2" :size="20" class="pa-3 ma-3" indeterminate/></div>
+                <div class="d-flex justify-center">
+                    <v-progress-circular v-show="searching" :width="2" :size="20" class="pa-3 ma-3" indeterminate/>
+                </div>
                 <v-row v-show="!searching" class="pa-4">
                     <v-col v-for="rom in matchedRoms">
                         <v-hover v-slot="{isHovering, props}">
-                            <v-card v-bind="props" :class="{'on-hover': isHovering}" :elevation="isHovering ? 20 : 3" min-width="100" max-width="140">
-                                <v-img v-bind="props" src="https://images.igdb.com/igdb/image/upload/t_cover_big/co68ag.png" cover/>
+                            <v-card @click="changeRom(rom)" v-bind="props" :class="{'on-hover': isHovering}" :elevation="isHovering ? 20 : 3" min-width="100" max-width="140">
+                                <v-img v-bind="props" :src="rom.url_cover" cover/>
                                 <v-card-text>
                                     <v-row class="pa-2">{{ rom.name }}</v-row>
                                 </v-card-text>
@@ -181,11 +182,11 @@ async function deleteRom() {
     </v-dialog>
 
     <v-dialog v-model="dialogEditRom" scroll-strategy="none" width="auto" :scrim="false">
-        <v-card max-width="600">
+        <v-card max-width="600" min-width="340">
             <v-toolbar :title="'Editing '+rom.filename" class="pl-2 pr-8"/>
             <v-card-text class="pt-5">
                 <v-form @submit.prevent class="ma-4">
-                    <v-text-field @keyup.enter="editRom()" v-model="romNewName" label="File name" variant="outlined"  required/>
+                    <v-text-field @keyup.enter="editRom()" v-model="romNewName" label="File name" variant="outlined" required/>
                     <v-file-input @keyup.enter="editRom()" label="Custom cover" prepend-inner-icon="mdi-image" prepend-icon="" variant="outlined" disabled/>
                     <v-btn type="submit" @click="editRom()" class="mt-2" block>Apply</v-btn>
                 </v-form>
diff --git a/frontend/src/components/RomsGallery.vue b/frontend/src/components/RomsGallery.vue
index c5cbce09c..922233809 100644
--- a/frontend/src/components/RomsGallery.vue
+++ b/frontend/src/components/RomsGallery.vue
@@ -62,7 +62,7 @@ onMounted(() => { if(localStorage.getItem('currentPlatform')){ getRoms(JSON.pars
     <v-row>
         <v-col v-for="rom in romsFiltered" cols="6" xs="6" sm="3" md="3" lg="2">
             <v-hover v-slot="{isHovering, props}">
-                <v-card v-bind="props" :class="{'on-hover': isHovering}" :elevation="isHovering ? 20 : 3">
+                <v-card @click="selectRom(rom)" v-bind="props" :class="{'on-hover': isHovering}" :elevation="isHovering ? 20 : 3">
                     <v-hover v-slot="{ isHovering, props }" open-delay="800">
                         <v-img v-bind="props" :src="rom.path_cover_l+'?reload='+forceImgReload" :lazy-src="rom.path_cover_s+'?reload='+forceImgReload" cover>
                             <template v-slot:placeholder>
@@ -75,7 +75,6 @@ onMounted(() => { if(localStorage.getItem('currentPlatform')){ getRoms(JSON.pars
                                 <v-list-item>{{ rom.filename }}</v-list-item>
                                 </div>
                             </v-expand-transition>
-                            <v-btn @click="selectRom(rom)" class="d-flex align-center justify-center fill-height" color="transparent" block/>
                         </v-img>
                         <v-card-text>
                             <v-row>
@@ -88,9 +87,15 @@ onMounted(() => { if(localStorage.getItem('currentPlatform')){ getRoms(JSON.pars
             </v-hover>
         </v-col>
     </v-row>
-
-    <v-dialog v-model="gettingRoms" scroll-strategy="none" width="auto" :scrim="false">
-        <v-progress-circular :width="3" :size="70" indeterminate/>
+        
+    <v-dialog v-model="gettingRoms" scroll-strategy="none" width="auto" :scrim="false">        
+        <v-card>
+            <v-list class="pa-0">
+                <div class="d-flex justify-center">
+                    <v-progress-circular :width="3" :size="30" class="pa-3 ma-3" indeterminate/>
+                </div>
+            </v-list>
+        </v-card>                               
     </v-dialog>
 
     <v-dialog v-model="noRoms" scroll-strategy="none" width="auto" :scrim="false">
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index f9752f9ac..c258c925b 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -28,6 +28,7 @@ export default createVuetify({
           primary: '#212121',
           secondary: '#BDBDBD',
           toolbar: '#212121',
+          background: '#212121'
         }
       }
     }