Simon/romm
1
0
Fork 0
mirror of https://github.com/rommapp/romm.git synced 2026-07-01 08:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

some UI tweaks

Browse Source
This commit is contained in:
zurdi zurdo
2023-03-25 02:30:39 +01:00
parent 751d53c0d4
commit 6eba9683e0
4 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Navigation.vue
View File

@@ -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 -->

15
frontend/src/components/RomDetails.vue
View File

@@ -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>

15
frontend/src/components/RomsGallery.vue
View File

@@ -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">

1
frontend/src/plugins/vuetify.js
View File

@@ -28,6 +28,7 @@ export default createVuetify({
primary: '#212121',
secondary: '#BDBDBD',
toolbar: '#212121',
background: '#212121'
}
}
}