misc improvements

This commit is contained in:
Gamebrary 2022-08-07 13:21:59 -07:00
parent 77037844bb
commit c4b9478bef
10 changed files with 73 additions and 90 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -11,7 +11,7 @@
<b-button
:to="{ name: 'board.edit', params: { id: board.id } }"
variant="primary"
variant="light"
class="mr-2"
>
Edit

View file

@ -6,7 +6,7 @@
<portal to="headerActions">
<b-button
variant="primary"
variant="light"
class="mr-2"
:to="{ name: 'create.board' }"
>

View file

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

View file

@ -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,
};
},

View file

@ -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');
},
},
};