Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-27 05:30:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

more updates

Browse source
This commit is contained in:
Gamebrary 2022-07-25 21:58:23 -07:00
parent 86b0331f79
commit 760695af3d
21 changed files with 348 additions and 397 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/igdb-logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

23
src/App.vue
View file

@ -25,11 +25,13 @@
:class="{ 'no-repeat': style.length > 0 }"
@shortkey="handleShortcutAction"
>
<page-header />
<router-view class="viewport" />
<auth-modal />
<keyboard-shortcuts-modal />
<add-remove-game />
<div :class="{ 'blurred': isGamePage }">
<page-header />
<router-view class="viewport" />
<auth-modal />
<keyboard-shortcuts-modal />
<add-remove-game />
</div>
</div>
</template>
@ -95,6 +97,10 @@ export default {
return this.$route.meta?.public;
},
isGamePage() {
return this.$route.name === 'game';
},
isBoard() {
return ['public.board', 'board'].includes(this.$route.name);
},
@ -157,23 +163,24 @@ export default {
<style lang="scss" rel="stylesheet/scss">
@import "~styles/styles";
.blurred {
backdrop-filter: blur(25px);
}
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
#app {
min-height: 100vh;
// background-image: url('~/public/bg-tile.png');
display: grid;
&.no-repeat {
background-repeat: no-repeat;
background-size: cover;
// background-size: contain;
}
}
.viewport {
min-height: calc(100vh - 62px);
// overflow-y: auto;
}
</style>

32
src/components/Game/GameSubPage.vue Normal file
View file

@ -0,0 +1,32 @@
<template lang="html">
<div>
<b-col>
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
</router-link>
</b-col>
<b-col>
<slot />
</b-col>
</div>
</template>
<script>
import { getGameCoverUrl } from '@/utils';
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['game']),
gameCoverUrl() {
return getGameCoverUrl(this.game);
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

13
src/components/GameCards/GameCardSearch.vue
View file

@ -21,7 +21,7 @@
<b-button
v-else
@click="addGameToList"
@click="handleGameClick"
variant="primary"
>
<i class="fa fa-plus fa-fw" aria-hidden="true" />
@ -35,6 +35,7 @@
<script>
import { getGameCoverUrl } from '@/utils';
import { mapState } from 'vuex';
export default {
props: {
@ -46,14 +47,18 @@ export default {
},
computed: {
...mapState(['user']),
coverUrl() {
return getGameCoverUrl(this.game);
}
},
},
methods: {
addGameToList() {
this.$bus.$emit('ADD_GAME', this.game.id);
handleGameClick() {
console.log(this.user);
// this.$bus.$emit('ADD_GAME', this.game.id);
},
},
};

7
src/components/GameCards/GameCardSearchVertical.vue
View file

@ -21,6 +21,7 @@
<script>
import { getGameCoverUrl } from '@/utils';
import { mapState } from 'vuex';
export default {
props: {
@ -31,6 +32,8 @@ export default {
},
computed: {
...mapState(['user']),
coverUrl() {
return getGameCoverUrl(this.game);
}
@ -38,7 +41,9 @@ export default {
methods: {
addGameToList() {
this.$bus.$emit('ADD_GAME', this.game.id);
return this.user
? this.$bus.$emit('ADD_GAME', this.game.id)
: this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
},
},
};

8
src/components/PageHeader.vue
View file

@ -1,7 +1,7 @@
<template lang="html">
<header class="p-2 d-flex">
<home-button />
<portal-target name="headerTitle" />
<portal-target name="headerTitle" slim />
<boards-dropdown v-if="board.id && isBoardPage" />
<!-- <game-dropdown v-if="isGamePage" /> -->
@ -14,7 +14,7 @@
<b-button
variant="light"
class="mr-2"
class="mr-3"
:to="{ name: 'search' }"
>
<i class="fas fa-search fa-fw" aria-hidden />
@ -23,6 +23,7 @@
<router-link
v-if="user"
variant="primary"
class="mr-1"
:to="{ name: 'settings' }"
>
<b-avatar size="38" rounded variant="info" :src="user.photoURL" />
@ -76,10 +77,7 @@ export default {
header {
display: grid;
align-items: center;
// overflow-y: hidden;
// height: 46px;
grid-template-columns: 65px 1fr;
// background-color: #574c4f;
z-index: 1;
}

2
src/components/PageTitle.vue
View file

@ -7,6 +7,7 @@
<b-button
v-if="actionText"
:href="url"
variant="primary"
@click="$emit('action')"
>
@ -20,6 +21,7 @@
export default {
props: {
title: String,
url: String,
actionText: String,
},
};

40
src/components/PublicPageFooter.vue
View file

@ -1,33 +1,11 @@
<template lang="html">
<footer class="text-muted text-center container ml-auto mr-auto">
<div class="pt-4 pb-24 flex items-center justify-center">
<ul>
<router-link :to="{ name: 'about' }">About</router-link>
<router-link :to="{ name: 'privacy.policy' }">Privacy policy</router-link>
<router-link :to="{ name: 'terms' }">Terms</router-link>
<a class="px-1" href="https://github.com/romancm/gamebrary/releases" target="_blank">Releases</a>
<a class="px-1" href="https://github.com/romancm/gamebrary/" target="_blank">
GitHub
</a>
</ul>
</div>
<small class="text-muted">
<small>©{{ year }} Gamebrary</small>
{{ $t('global.donateMessage') }}
<a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
{{ $t('global.donating') }}
</a>
,
<a href="https://github.com/romancm/gamebrary/issues" target="_blank">
{{ $t('global.reportBugs') }}
</a>
{{ $t('global.or') }}
<a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" target="_blank">
{{ $t('global.submitFeedback') }}
</a>
</small>
<footer class="text-muted text-center py-5">
<router-link class="px-1" :to="{ name: 'about' }">About</router-link>
<router-link class="px-1" :to="{ name: 'privacy.policy' }">Privacy</router-link>
<router-link class="px-1" :to="{ name: 'terms' }">Terms</router-link>
<router-link class="px-1" :to="{ name: 'releases' }">Releases</router-link>
<br />
©{{ year }} Gamebrary
</footer>
</template>
@ -35,9 +13,7 @@
export default {
computed: {
year() {
const year = new Date().getFullYear();
return year;
return new Date().getFullYear();
},
},
};

14
src/components/Tags/TagsList.vue
View file

@ -1,10 +1,9 @@
<template lang="html">
<div>
<b-container fluid>
<b-card
v-for="({ games, hex, tagTextColor }, name) in tags"
class="tags-list"
:key="name"
class="mb-3 mx-0 p-0 word-wrap d-flex position-relative d-flex align-items-start justify-content-between"
body-class="w-100"
>
<div>
<b-dropdown class="float-right" right>
@ -48,7 +47,7 @@
/>
</div>
</b-card>
</div>
</b-container>
</template>
<script>
@ -76,3 +75,10 @@ export default {
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.tags-list {
background: #fc0;
max-width: 100%;
}
</style>

35
src/pages/DashboardPage.vue
View file

@ -1,18 +1,10 @@
<template lang="html">
<b-container fluid>
<b-row>
<search-box />
</b-row>
<header>
My Boards
<portal to="headerTitle">
test
</portal>
<b-button
variant="primary"
class="mr-2"
:to="{ name: 'create.board' }"
>
Create board
</b-button>
<header>
</header>
<b-button
@ -31,10 +23,23 @@
Tags
</b-button>
<game-boards v-if="boards.length" class="mb-3" />
<div>
My Boards
<b-button
variant="primary"
class="mr-2"
:to="{ name: 'create.board' }"
>
Create board
</b-button>
<game-boards class="mb-3" />
</div>
<empty-state
v-else
v-if="boards.length === 0"
title="Boards"
message="Use boards to easily organize your video game collections"
>
@ -63,12 +68,10 @@
<script>
import EmptyState from '@/components/EmptyState';
import GameBoards from '@/components/GameBoards';
import SearchBox from '@/components/SearchBox';
import { mapState } from 'vuex';
export default {
components: {
SearchBox,
GameBoards,
EmptyState,
},

80
src/pages/GameNotesPage.vue
View file

@ -6,53 +6,49 @@
</div>
<b-form-row v-else>
<b-col>
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
</router-link>
<game-sub-page>
<b-col>
<game-note v-if="note" :note="{ note }" />
<b-button
variant="primary"
:disabled="saving || !dirtied"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="primary"
:disabled="saving || !dirtied"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="danger"
class="mr-1"
v-if="notes[game.id] && !saving"
:disabled="deleting"
@click="deleteNote"
>
<b-spinner small v-if="deleting" />
<b-button
variant="danger"
class="mr-1"
v-if="notes[game.id] && !saving"
:disabled="deleting"
@click="deleteNote"
>
<b-spinner small v-if="deleting" />
<i class="d-sm-none fas fa-trash fa-fw" aria-hidden />
<span class="d-none d-sm-inline">{{ $t('global.delete') }}</span>
</b-button>
<i class="d-sm-none fas fa-trash fa-fw" aria-hidden />
<span class="d-none d-sm-inline">{{ $t('global.delete') }}</span>
</b-button>
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
/>
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
/>
<b-form-text id="input-live-help" v-b-modal.markdown-cheatsheet>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-form-text>
<b-form-text id="input-live-help" v-b-modal.markdown-cheatsheet>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-form-text>
<b-modal id="markdown-cheatsheet" title="BootstrapVue">
<markdown-cheatsheet />
</b-modal>
</b-col>
<b-col>
<game-note v-if="note" :note="{ note }" />
</b-col>
<b-modal id="markdown-cheatsheet" title="BootstrapVue">
<markdown-cheatsheet />
</b-modal>
</b-col>
</game-sub-page>
</b-form-row>
</b-container>
</template>
@ -61,12 +57,14 @@
import { mapState } from 'vuex';
import GameNote from '@/components/GameNote';
import GameSubPage from '@/components/Game/GameSubPage';
import MarkdownCheatsheet from '@/components/MarkdownCheatsheet';
import { getGameCoverUrl } from '@/utils';
export default {
components: {
GameNote,
GameSubPage,
MarkdownCheatsheet,
},

39
src/pages/GamePage.vue
View file

@ -11,7 +11,7 @@
<b-skeleton v-if="loading" />
<template v-else-if="game">
<portal to="headerTitle">
<portal v-if="user" to="headerTitle">
<b-button-group>
<b-button @click="$bus.$emit('ADD_GAME', game.id)">
<i class="fa-solid fa-plus fa-fw" />
@ -74,36 +74,18 @@
<game-rating :game="game" />
</div>
<b-card body-class="p-3" class="mt-2 ml-n3">
<b-card
v-if="boardsWithGame.length"
body-class="p-3"
class="mt-2 ml-n3"
>
<h4>Game found in these boards:</h4>
<b-list-group>
<b-list-group-item
v-for="board in boardsWithGame"
:to="{ name: 'board', params: { id: board.id } }"
:key="board.id"
button
>
<b-avatar
rounded
:class="['board-thumbnail mr-2', { 'bg-dark' : !board.backgroundColor }]"
:title="board.name"
text=" "
:style="`
background-image: url(${board.backgroundUrl || ''});
background-color: ${board.backgroundColor || ''}
`"
/>
{{ board.name }}
</b-list-group-item>
</b-list-group>
<!-- <b-badge
<b-button
v-for="board in boardsWithGame"
:to="{ name: 'board', params: { id: board.id } }"
:key="board.id"
class="mr-2"
block
>
<b-avatar
rounded
@ -115,8 +97,9 @@
background-color: ${board.backgroundColor || ''}
`"
/>
{{ board.name }}
</b-badge> -->
</b-button>
</b-card>
</b-col>
@ -374,7 +357,7 @@ export default {
},
computed: {
...mapState(['game', 'progresses', 'tags', 'boards']),
...mapState(['game', 'progresses', 'tags', 'boards', 'user']),
...mapGetters(['gameTags']),
boardsWithGame() {

7
src/pages/NotesPage.vue
View file

@ -3,15 +3,18 @@
<template lang="html">
<b-container fluid>
<portal to="headerTitle">
<page-title title="Notes">
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">Notes</h3>
<b-form-input
v-if="!showEmptyState"
type="search"
style="max-width: 200px"
class="mr-3"
placeholder="Search notes"
v-model="search"
/>
</page-title>
</div>
</portal>
<empty-state

314
src/pages/PublicHomePage.vue
View file

@ -5,7 +5,7 @@
<div class="row gx-5 align-items-center">
<div class="col-lg-6">
<div class="mb-5 mb-lg-0 text-center text-lg-start">
<h1 class="display-1 lh-1 mb-3">Organize your video games beautifully.</h1>
<h1 class="display-1 mb-3">Organize <small class="display-4">your video games</small> beautifully.</h1>
<p class="lead fw-normal text-muted mb-5">Learn about games, take notes, organize, customize, discover and more with Gamebrary</p>
<div class="d-flex flex-column flex-lg-row align-items-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#!"><img class="app-badge" src="assets/img/google-play-badge.svg" alt="..." /></a>
@ -17,219 +17,109 @@
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." /></div>
</div>
</div>
</div>
</header>
<!-- Quote/testimonial aside-->
<aside class="text-center bg-gradient-primary-to-secondary">
<div class="container px-5">
<div class="row gx-5 justify-content-center">
<div class="col-xl-8">
<div class="h2 fs-1 text-white mb-4">This is a great place for a banner</div>
<!-- <img src="assets/img/tnw-logo.svg" alt="..." style="height: 3rem" /> -->
</div>
</div>
</div>
</aside>
<!-- App features section-->
<section id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-phone icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Device Mockups</h3>
<p class="text-muted mb-0">Ready to use HTML/CSS device mockups, no Photoshop required!</p>
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-camera icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Flexible Use</h3>
<p class="text-muted mb-0">Put an image, video, animation, or anything else in the screen!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<!-- Feature item-->
<div class="text-center">
<i class="bi-gift icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Free to Use</h3>
<p class="text-muted mb-0">As always, this theme is free to download and use for any purpose!</p>
</div>
</div>
<div class="col-md-6">
<!-- Feature item-->
<div class="text-center">
<i class="bi-patch-check icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Open Source</h3>
<p class="text-muted mb-0">Since this theme is MIT licensed, you can use it commercially!</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 order-lg-0">
<!-- Features section device mockup-->
<img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." />
</div>
</div>
</div>
</section>
<!-- Basic features section-->
<section class="bg-light">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4">Organize your video game collection</h2>
<p class="lead fw-normal text-muted mb-5 mb-lg-0">This section is perfect for featuring some information about your application, why it was built, the problem it solves, or anything else! There's plenty of space for text here, so don't worry about writing too much.</p>
</div>
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." /></div>
</div>
</div>
</div>
</section>
<!-- Call to action section-->
<section class="cta">
<div class="cta-content">
<div class="container px-5">
<h2 class="text-white display-1 lh-1 mb-4">
Get started.
<br />
For FREE.
</h2>
<a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://startbootstrap.com/theme/new-age" target="_blank">Download for free</a>
</div>
</div>
</section>
<!-- App badge section-->
<section class="bg-gradient-primary-to-secondary" id="download">
<div class="container px-5">
<h2 class="text-center text-white font-alt mb-4">Get the app now!</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#!"><img class="app-badge" src="assets/img/google-play-badge.svg" alt="..." /></a>
<a href="#!"><img class="app-badge" src="assets/img/app-store-badge.svg" alt="..." /></a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-black text-center py-5">
<div class="container px-5">
<div class="text-white-50 small">
<div class="mb-2">&copy; Your Website 2022. All Rights Reserved.</div>
<a href="#!">Privacy</a>
<span class="mx-1">&middot;</span>
<a href="#!">Terms</a>
<span class="mx-1">&middot;</span>
<a href="#!">FAQ</a>
</div>
</div>
</footer>
<!-- Feedback Modal-->
<div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-gradient-primary-to-secondary p-4">
<h5 class="modal-title font-alt text-white" id="feedbackModalLabel">Send feedback</h5>
<button class="btn-close btn-close-white" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body border-0 p-4">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Name input-->
<div class="form-floating mb-3">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Full name</label>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<!-- Email address input-->
<div class="form-floating mb-3">
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<!-- Phone number input-->
<div class="form-floating mb-3">
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
<label for="phone">Phone number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
<!-- Message input-->
<div class="form-floating mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<div class="d-grid"><button class="btn btn-primary rounded-pill btn-lg disabled" id="submitButton" type="submit">Submit</button></div>
</form>
</div>
</div>
</div>
</div>
<!-- <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<div class="col-md-5 p-lg-5 mx-auto my-5">
<h1 class="display-4 font-weight-normal">Gamebrary</h1>
<p class="lead font-weight-normal">Your video game collection, organized.</p>
<a class="btn btn-outline-secondary" href="#">Get started</a>
</div>
<div class="product-device shadow-sm d-none d-md-block"></div>
<div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div> -->
<!-- <p>Open source tool to organize video game collections.</p>
<p>Gamebrary is free, but powered by your support</p>
<img src="static/img/screenshot.png" alt="">
<section class="bg-light py-4" id="features">
<b-container>
<h1 class="text-center">Features</h1>
<div class="features">
<b-card
v-for="{ title, message } in features"
:key="title"
>
<h4>{{ title }}</h4>
<small v-html="message" />
</b-card>
</div>
</b-container>
</section> -->
</div>
</header>
<!-- App features section-->
<section id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!--
Gamebrary is open source, free and universally available, there is no need to install apps, updates, etc... Gamebrary works on all your devices. -->
<!-- Feature item-->
<div class="text-center">
<i class="bi-phone icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Notes</h3>
<p class="text-muted mb-0">Take game notes and view them all in place!</p>
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-camera icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Organize</h3>
<p class="text-muted mb-0">Create custom boards that suit your needs. Organize using lists, tags, customize, sort and more!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<!-- Feature item-->
<div class="text-center">
<i class="bi-gift icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Encyclopedia</h3>
<p class="text-muted mb-0">
Powered by IGDB, Wikipedia, . Gamebrary provides the best video game database with hundreds of thousands of video games.
</p>
</div>
</div>
<div class="col-md-6">
<!-- Feature item-->
<div class="text-center">
<i class="bi-patch-check icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Track your progress</h3>
<p class="text-muted mb-0">Keep track of your video game backlog.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 order-lg-0">
<!-- Features section device mockup-->
<img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." />
</div>
</div>
</div>
</section>
<section class="text-center bg-dark p-5">
<h2 class="text-white">
Open Source, free and universal
</h2>
</section>
<!-- Basic features section-->
<section class="bg-dark">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
<div class="col-12 col-lg-5">
<h2 class="display-4 lh-1 mb-4">Organize your video game collection</h2>
<p class="lead fw-normal text-muted mb-5 mb-lg-0">This section is perfect for featuring some information about your application, why it was built, the problem it solves, or anything else! There's plenty of space for text here, so don't worry about writing too much.</p>
</div>
<div class="col-sm-8 col-md-6">
<div class="px-5 px-sm-0"><img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." /></div>
</div>
</div>
</div>
</section>
<section class="text-center bg-light p-5">
<h2>
Vue Awesome
</h2>
</section>
<!-- Call to action section-->
<section class="bg-success py-5">
<div class="cta-content">
<div class="container px-5">
<h2 class="text-white display-3">Get started.
<br />
For FREE.</h2>
<b-button pill variant="outline-light" size="lg">Login</b-button>
<b-button pill variant="outline-light" size="lg" class="ml-3">Get Pro</b-button>
</div>
</div>
</section>
<public-page-footer />
</div>
</template>

32
src/pages/ReleasesPage.vue
View file

@ -1,15 +1,23 @@
<template lang="html">
<b-container fluid>
<portal to="headerTitle">
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">Releases</h3>
<b-button
url="https://github.com/romancm/gamebrary"
target="_blank"
class="mr-3"
>
<i class="fab fa-github fa-fw" aria-hidden />
View in GitHub
</b-button>
</div>
</portal>
<page-title
title="Releases"
>
<b-button
href="https://github.com/romancm/gamebrary"
target="_blank"
>
<i class="fab fa-github fa-fw" aria-hidden />
View in GitHub
</b-button>
</page-title>
<b-card
@ -44,13 +52,15 @@ export default {
marked,
computed: {
...mapState(['releases', 'notification', 'settings']),
...mapState(['releases', 'notification', 'settings', 'user']),
},
mounted() {
async mounted() {
if (!this.user) await this.$store.dispatch('LOAD_RELEASES');
const [latestRelease] = this.releases;
if (this.notification && latestRelease && latestRelease.tag_name) {
if (this.notification && latestRelease?.tag_name) {
this.$store.commit('UPDATE_SETTING', { key: 'release', value: latestRelease.tag_name });
this.$store.dispatch('SAVE_SETTINGS', this.settings)

18
src/pages/SettingsPage.vue
View file

@ -7,21 +7,21 @@
title="Wallpapers"
description="Manage your wallpapers"
icon="fa-images"
@click.native="$router.push({ name: 'wallpapers.settings' })"
@click.native="$router.push({ name: 'wallpapers' })"
/>
<settings-card
title="Notes"
description="View all your notes"
icon="fa-note-sticky"
@click.native="$router.push({ name: 'notes.settings' })"
@click.native="$router.push({ name: 'notes' })"
/>
<settings-card
title="Tags"
description="View all your tags"
icon="fa-tags"
@click.native="$router.push({ name: 'tags.settings' })"
@click.native="$router.push({ name: 'tags' })"
/>
<settings-card
@ -67,6 +67,16 @@
Submit feedback
</b-button>
<!-- TODO: hide for paid users -->
<b-button
block
variant="outline-primary"
href="https://www.paypal.me/RomanCervantes/5"
target="_blank"
>
Buy me a coffee
</b-button>
<hr />
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'profile.settings' }">
@ -74,8 +84,6 @@
<small>Profile</small>
</b-list-group-item> -->
<!-- <game-detail-settings /> -->
<account-settings />
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
<i class="mr-2 fab fa-steam fa-fw" aria-hidden></i>

13
src/pages/TagEditPage.vue Normal file
View file

@ -0,0 +1,13 @@
<template lang="html">
<div>
test
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

15
src/pages/TagsPage.vue
View file

@ -18,11 +18,16 @@
<template v-else>
<portal to="headerTitle">
<page-title
title="Tags"
action-text="Add tag"
@action="$bvModal.show('addTag')"
/>
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">Tags</h3>
<b-button
class="mr-3"
@click="$bvModal.show('addTag')"
>
Add tag
</b-button>
</div>
</portal>
<tags-list

29
src/pages/WallpapersPage.vue
View file

@ -11,23 +11,22 @@
<template v-else>
<portal to="headerTitle">
<div class="d-flex">
<b-button>Back</b-button>
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">Wallpapers</h3>
<page-title title="Wallpapers">
<b-button
:disabled="outOfSpace"
variant="primary"
@click="triggerFileUpload"
>
<b-spinner small v-if="saving" />
<b-button
:disabled="outOfSpace"
variant="primary"
class="mr-3"
@click="triggerFileUpload"
>
<b-spinner small v-if="saving" />
<template v-else>
<i class="fas fa-upload fa-fw" aria-hidden />
<span class="d-none d-sm-inline">Upload</span>
</template>
</b-button>
</page-title>
<template v-else>
<i class="fas fa-upload fa-fw" aria-hidden />
<span class="d-none d-sm-inline">Upload</span>
</template>
</b-button>
</div>
</portal>

22
src/routes.js
View file

@ -33,6 +33,7 @@ import SearchPage from '@/pages/SearchPage';
import SteamSettingsPage from '@/pages/SteamSettingsPage';
// import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
import TagsPage from '@/pages/TagsPage';
import TagEditPage from '@/pages/TagEditPage';
import TermsPage from '@/pages/TermsPage';
import WallpapersPage from '@/pages/WallpapersPage';
@ -93,13 +94,21 @@ const routes = [
},
},
{
name: 'tags.settings',
path: '/settings/tags',
name: 'tags',
path: '/tags',
component: TagsPage,
meta: {
title: 'Tags',
},
},
{
name: 'tag.edit',
path: '/tags/:id',
component: TagEditPage,
meta: {
title: 'Edit tag',
},
},
{
name: 'profile.settings',
path: '/settings/profile',
@ -109,16 +118,16 @@ const routes = [
},
},
{
name: 'notes.settings',
path: '/settings/notes',
name: 'notes',
path: '/notes',
component: NotesPage,
meta: {
title: 'Notes',
},
},
{
name: 'wallpapers.settings',
path: '/settings/wallpapers',
name: 'wallpapers',
path: '/wallpapers',
component: WallpapersPage,
meta: {
title: 'Wallpapers',
@ -130,6 +139,7 @@ const routes = [
component: ReleasesPage,
meta: {
title: 'Releases',
public: true,
},
},
{

2
src/store/actions.js
View file

@ -42,8 +42,6 @@ export default {
},
LOAD_WIKIPEDIA_ARTICLE({ commit }, articleTitle) {
console.log('boom!');
console.log('articleTitle', articleTitle);
return new Promise((resolve, reject) => {
axios.get(`https://en.wikipedia.org/api/rest_v1/page/mobile-sections/${articleTitle}`)
.then(({ data }) => {