mirror of
https://github.com/romancm/gamebrary
synced 2024-11-23 19:53:14 +00:00
misc improvements
This commit is contained in:
parent
77037844bb
commit
c4b9478bef
10 changed files with 73 additions and 90 deletions
|
@ -3,34 +3,34 @@
|
|||
<div>
|
||||
<portal v-if="user" to="headerActions">
|
||||
<b-button-group class="mr-2">
|
||||
<b-button @click="$bus.$emit('ADD_GAME', game.id)">
|
||||
<b-button variant="light" @click="$bus.$emit('ADD_GAME', game.id)">
|
||||
<i class="fa-solid fa-plus fa-fw" />
|
||||
Add to list
|
||||
<span class="d-none d-lg-inline">Add to list</span>
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
|
||||
<b-button variant="light" :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-tags fa-fw" />
|
||||
Tags
|
||||
<span class="d-none d-lg-inline">Tags</span>
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
|
||||
<b-button variant="light" :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-bars-progress fa-fw" />
|
||||
Track progress
|
||||
<span class="d-none d-lg-inline">Track progress</span>
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
|
||||
<b-button variant="light" :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-note-sticky fa-fw" />
|
||||
Notes
|
||||
<span class="d-none d-lg-inline">Notes</span>
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
|
||||
<b-button variant="light" :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-newspaper fa-fw" />
|
||||
News
|
||||
<span class="d-none d-lg-inline">News</span>
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
|
||||
<b-button variant="light" :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-photo-film fa-fw" />
|
||||
Images / Videos
|
||||
<span class="d-none d-lg-inline">Images / Videos</span>
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</portal>
|
||||
|
|
|
@ -22,11 +22,10 @@
|
|||
|
||||
<router-link
|
||||
v-if="user"
|
||||
variant="primary"
|
||||
class="mr-1"
|
||||
:to="{ name: 'settings' }"
|
||||
>
|
||||
<b-avatar size="38" rounded variant="info" :src="user.photoURL" />
|
||||
<b-avatar size="38" rounded :src="user.photoURL" />
|
||||
</router-link>
|
||||
|
||||
<b-button
|
||||
|
|
|
@ -1,13 +1,6 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<!-- TODO: use PEGI/ESRB logos -->
|
||||
<!-- <pre>{{ AGE_RATING_SYSTEMS }}</pre> -->
|
||||
<!-- <div>
|
||||
<b-card v-for="rating in AGE_RATING_SYSTEMS" :key="rating.name">
|
||||
<pre class="text-dark">{{ rating }}</pre>
|
||||
</b-card>
|
||||
</div> -->
|
||||
|
||||
<b-form-group label="Game rating system:">
|
||||
<b-form-select
|
||||
v-model="gameRatingSystem"
|
||||
|
|
|
@ -6,6 +6,8 @@
|
|||
@selected="selected"
|
||||
/>
|
||||
|
||||
<!-- TODO: sort by metadata.timeCreated -->
|
||||
|
||||
<div class="wallpapers">
|
||||
<b-card
|
||||
:img-src="wallpaper.url"
|
||||
|
@ -14,7 +16,7 @@
|
|||
overlay
|
||||
footer-class="p-2"
|
||||
tag="article"
|
||||
v-for="wallpaper in wallpapers"
|
||||
v-for="wallpaper in sortedWallpapers"
|
||||
:key="wallpaper.name"
|
||||
@click="openPreview(wallpaper)"
|
||||
>
|
||||
|
@ -60,8 +62,8 @@
|
|||
</template>
|
||||
</b-card>
|
||||
</div>
|
||||
<!-- <b-card
|
||||
v-for="wallpaper in wallpapers"
|
||||
<b-card
|
||||
v-for="wallpaper in sortedWallpapers"
|
||||
:key="wallpaper.name"
|
||||
class="mb-2"
|
||||
body-class="wallpaper-card p-2"
|
||||
|
@ -75,7 +77,7 @@
|
|||
@click="openPreview(wallpaper)"
|
||||
/>
|
||||
|
||||
</b-card> -->
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -102,6 +104,12 @@ export default {
|
|||
|
||||
computed: {
|
||||
...mapState(['wallpapers']),
|
||||
|
||||
sortedWallpapers() {
|
||||
const wallpapers = this.wallpapers;
|
||||
|
||||
return wallpapers.reverse();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
<template lang="html">
|
||||
<div class="auth-page d-flex align-items-start">
|
||||
<b-container>
|
||||
<portal to="headerTitle">
|
||||
Login
|
||||
</portal>
|
||||
|
||||
<b-alert
|
||||
class="mt-2 mx-auto text-center"
|
||||
class="mx-auto text-center"
|
||||
:show="showExpiredAlert"
|
||||
style="width: 220px"
|
||||
variant="warning"
|
||||
|
@ -9,10 +13,8 @@
|
|||
Session expired
|
||||
</b-alert>
|
||||
|
||||
<b-card class="mx-auto mt-5">
|
||||
<section id="auth" />
|
||||
</b-card>
|
||||
</div>
|
||||
<section id="auth" />
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -158,9 +160,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.auth-page {
|
||||
height: calc(100vh - 46px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<b-button
|
||||
:to="{ name: 'board.edit', params: { id: board.id } }"
|
||||
variant="primary"
|
||||
variant="light"
|
||||
class="mr-2"
|
||||
>
|
||||
Edit
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<portal to="headerActions">
|
||||
<b-button
|
||||
variant="primary"
|
||||
variant="light"
|
||||
class="mr-2"
|
||||
:to="{ name: 'create.board' }"
|
||||
>
|
||||
|
|
|
@ -15,9 +15,7 @@
|
|||
|
||||
<b-row>
|
||||
<b-col
|
||||
offset="2"
|
||||
offset-sm="0"
|
||||
cols="8"
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="4"
|
||||
xl="3"
|
||||
|
@ -26,8 +24,8 @@
|
|||
:src="gameCoverUrl"
|
||||
:alt="game.name"
|
||||
class="cursor-pointer"
|
||||
fluid-grow
|
||||
rounded
|
||||
fluid
|
||||
@click.stop="openGameCover"
|
||||
/>
|
||||
<!-- <b-skeleton-img
|
||||
|
@ -36,13 +34,13 @@
|
|||
height="100px"
|
||||
/> -->
|
||||
|
||||
<amazon-links class="mt-2" />
|
||||
<!-- <amazon-links class="mt-2" /> -->
|
||||
|
||||
<div class="game-info">
|
||||
<!-- <div class="game-info">
|
||||
<game-rating :game="game" />
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<b-card
|
||||
<!-- <b-card
|
||||
v-if="boardsWithGame.length"
|
||||
body-class="p-3"
|
||||
class="mt-2"
|
||||
|
@ -67,7 +65,7 @@
|
|||
|
||||
{{ board.name }}
|
||||
</b-button>
|
||||
</b-card>
|
||||
</b-card> -->
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
|
@ -290,11 +288,11 @@
|
|||
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import { WEBSITE_CATEGORIES } from '@/constants';
|
||||
import AmazonLinks from '@/components/Game/AmazonLinks';
|
||||
// import AmazonLinks from '@/components/Game/AmazonLinks';
|
||||
import GameDetails from '@/components/Game/GameDetails';
|
||||
import GameActions from '@/components/Game/GameActions';
|
||||
import GameTitles from '@/components/Game/GameTitles';
|
||||
import GameRating from '@/components/Game/GameRating';
|
||||
// import GameRating from '@/components/Game/GameRating';
|
||||
import GameDescription from '@/components/Game/GameDescription';
|
||||
import SimilarGames from '@/components/Game/SimilarGames';
|
||||
import GameWebsites from '@/components/Game/GameWebsites';
|
||||
|
@ -304,13 +302,13 @@ import GameNote from '@/components/GameNote';
|
|||
export default {
|
||||
components: {
|
||||
// Timeline,
|
||||
AmazonLinks,
|
||||
// AmazonLinks,
|
||||
GameNote,
|
||||
GameDescription,
|
||||
GameDetails,
|
||||
GameActions,
|
||||
GameTitles,
|
||||
GameRating,
|
||||
// GameRating,
|
||||
GameWebsites,
|
||||
// GameSpeedruns,
|
||||
SimilarGames,
|
||||
|
|
|
@ -2,21 +2,7 @@
|
|||
<b-container>
|
||||
<b-row>
|
||||
<portal to="headerTitle">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<h3 class="m-0">Search</h3>
|
||||
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups" class="mr-1">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button :variant="listView ? 'primary' : 'light'" @click="listView = true">
|
||||
<i class="fa-solid fa-list fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-button :variant="listView ? 'light' : 'primary'" @click="listView = false">
|
||||
<i class="fa-solid fa-grip fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</div>
|
||||
<h3 class="m-0">Search</h3>
|
||||
</portal>
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
|
@ -62,9 +48,19 @@
|
|||
<h3 v-if="activeBoardList.length">
|
||||
Add games to <strong>{{ activeBoardList.name }}</strong>
|
||||
</h3>
|
||||
<h3>Search results</h3>
|
||||
<!-- <h3>Search results</h3> -->
|
||||
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups" class="mr-1">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button :variant="listView ? 'primary' : 'light'" @click="listView = true">
|
||||
<i class="fa-solid fa-list fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-button :variant="listView ? 'light' : 'primary'" @click="listView = false">
|
||||
<i class="fa-solid fa-grip fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</header>
|
||||
|
||||
<template v-if="listView">
|
||||
|
@ -118,7 +114,7 @@ export default {
|
|||
return {
|
||||
searchResults: [],
|
||||
loading: false,
|
||||
listView: false,
|
||||
listView: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
@ -16,8 +16,8 @@
|
|||
|
||||
<b-button
|
||||
:disabled="outOfSpace"
|
||||
variant="primary"
|
||||
class="mr-3"
|
||||
variant="light"
|
||||
class="mr-2"
|
||||
@click="triggerFileUpload"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
|
@ -123,28 +123,21 @@ export default {
|
|||
document.querySelector('.file-input input').click();
|
||||
},
|
||||
|
||||
uploadWallpaper() {
|
||||
if (this.isDuplicate) {
|
||||
return this.$bvToast.toast('File already exists', { variant: 'warning' });
|
||||
}
|
||||
|
||||
if (!this.file) {
|
||||
return false;
|
||||
}
|
||||
async uploadWallpaper() {
|
||||
if (this.isDuplicate) return this.$bvToast.toast('File already exists', { variant: 'warning' });
|
||||
if (!this.file) return false;
|
||||
|
||||
this.saving = true;
|
||||
|
||||
return this.$store.dispatch('UPLOAD_WALLPAPER', this.file)
|
||||
.then(() => {
|
||||
this.$bvToast.toast('File uploaded');
|
||||
this.file = null;
|
||||
this.saving = false;
|
||||
this.$bus.$emit('WALLPAPER_UPLOADED');
|
||||
})
|
||||
.catch(() => {
|
||||
this.saving = false;
|
||||
this.$bvToast.toast('There was an error uploading wallpaper', { variant: 'danger' });
|
||||
});
|
||||
try {
|
||||
await this.$store.dispatch('UPLOAD_WALLPAPER', this.file);
|
||||
} catch (e) {
|
||||
this.$bvToast.toast('There was an error uploading wallpaper', { variant: 'danger' });
|
||||
}
|
||||
|
||||
this.file = null;
|
||||
this.saving = false;
|
||||
this.$bus.$emit('WALLPAPER_UPLOADED');
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue