mirror of
https://github.com/romancm/gamebrary
synced 2024-11-10 13:44:16 +00:00
More updates
This commit is contained in:
parent
9b643e3a4c
commit
bef2869f41
10 changed files with 36 additions and 76 deletions
|
@ -6,7 +6,7 @@
|
|||
|
||||
<portal to="pageTitle">
|
||||
<div :class="{ 'd-flex flex-column align-items-baseline': publicUserName }">
|
||||
<h3 :class="[{ 'text-white': backgroundUrl && darkTheme }]" :style="publicUserName ? 'line-height: 1rem' : ''">
|
||||
<h3 :class="['text-truncate', { 'text-white': backgroundUrl && darkTheme }]" :style="publicUserName ? 'line-height: 1rem' : ''">
|
||||
{{ board.name }}
|
||||
</h3>
|
||||
|
||||
|
|
|
@ -248,17 +248,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<b-button variant="primary" :disabled="saving" type="submit">
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
|
||||
<b-button variant="danger" class="mx-2" @click="confirmDeleteBoard">
|
||||
{{ $t('board.settings.deleteBoard') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</template>
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
<template lang="html">
|
||||
<div class="add-tier mt-2">
|
||||
<div class="px-1">
|
||||
<b-button
|
||||
class="ml-3"
|
||||
style="width: 100px; height: 60px;"
|
||||
v-b-tooltip.hover
|
||||
title="Add tier"
|
||||
title="Add tier"
|
||||
:variant="darkTheme ? 'dark' : 'light'"
|
||||
v-b-modal.addTier
|
||||
>
|
||||
|
|
|
@ -66,7 +66,7 @@ export default {
|
|||
user-select: none;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100vw;
|
||||
// width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
<!-- TODO: highlight entire list -->
|
||||
<template lang="html">
|
||||
<b-card
|
||||
class="cursor-pointer overflow-hidden"
|
||||
|
@ -41,7 +40,7 @@
|
|||
<b-avatar
|
||||
v-for="(game, index) in tier.games"
|
||||
:key="index"
|
||||
:variant="gameId === game.id ? 'danger' : darkTheme ? 'black' : 'light'"
|
||||
:variant="gameId && game.id === gameId ? 'danger' : darkTheme ? 'black' : 'light'"
|
||||
v-b-tooltip.hover
|
||||
:title="game.name"
|
||||
text=" "
|
||||
|
@ -109,8 +108,7 @@
|
|||
style="width: 60px"
|
||||
class="p-1 d-flex"
|
||||
:class="[
|
||||
darkTheme ? 'border-black bg-dark' : 'border-light ',
|
||||
gameId === game.id ? 'bg-danger' : null,
|
||||
gameId && game.id === gameId ? 'bg-danger' : darkTheme ? 'border-black bg-dark' : 'border-light bg-white',
|
||||
{
|
||||
'border-bottom' : index !== list.games.length - 1,
|
||||
}
|
||||
|
@ -119,7 +117,7 @@
|
|||
<b-avatar
|
||||
style="border-radius: 4px !important"
|
||||
text=" "
|
||||
:src="gameId === game.id ? game.src : coversInMiniBoards ? game.src : null"
|
||||
:src="gameId && game.id === gameId ? game.src : coversInMiniBoards ? game.src : null"
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
size="24"
|
||||
/>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="html">
|
||||
<div class="d-flex flex-column align-items-start">
|
||||
<div class="d-flex flex-column align-items-start border border-light rounded p-2 w-100">
|
||||
<h3
|
||||
v-if="isVerticalNav"
|
||||
:class="{ 'text-white': hasBackground || darkTheme }"
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<b-form-input
|
||||
id="name"
|
||||
class="ml-2"
|
||||
class="ml-3"
|
||||
v-model.trim="list.name"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="html">
|
||||
<div class="d-flex w-100 align-items-center p-1 tier-list">
|
||||
<div class="d-flex w-100 align-items-center mb-2 tier-list">
|
||||
<b-dropdown
|
||||
v-if="user && isBoardOwner"
|
||||
size="lg"
|
||||
|
@ -39,7 +39,7 @@
|
|||
:title="list.name"
|
||||
rounded
|
||||
:style="`background-color: ${list.backgroundColor}`"
|
||||
class="p-0 ml-2"
|
||||
class="p-0"
|
||||
size="100"
|
||||
/>
|
||||
|
||||
|
@ -217,13 +217,6 @@ export default {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tier-list {
|
||||
&:hover {
|
||||
transition: background 300ms ease;
|
||||
background: #00000022;
|
||||
}
|
||||
}
|
||||
|
||||
.game {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
|
|
|
@ -134,7 +134,7 @@
|
|||
<game-tags-modal />
|
||||
</div>
|
||||
|
||||
<div :class="['game-description', source]">
|
||||
<div :class="['game-description pb-4', source]">
|
||||
<b-spinner v-if="loading" class="spinner-centered" />
|
||||
|
||||
<template v-else>
|
||||
|
@ -143,11 +143,9 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<hr v-if="!loading" class="my-4" />
|
||||
|
||||
<div class="d-inline-block w-100">
|
||||
<div v-if="gameGenres" class="float-left mr-3">
|
||||
<h5>Genres: </h5>
|
||||
<h5>Genres</h5>
|
||||
|
||||
<b-button-group class="mb-3">
|
||||
<b-button
|
||||
|
@ -165,7 +163,7 @@
|
|||
</div>
|
||||
|
||||
<div v-if="gameThemes" class="float-left mr-3">
|
||||
<h5>Themes: </h5>
|
||||
<h5>Themes</h5>
|
||||
|
||||
<b-button-group class="mb-3">
|
||||
<b-button
|
||||
|
@ -183,7 +181,7 @@
|
|||
</div>
|
||||
|
||||
<div v-if="gameModes" class="float-left mr-3">
|
||||
<h5>{{ $t('board.gameModal.gameModes') }}: </h5>
|
||||
<h5>{{ $t('board.gameModal.gameModes') }} </h5>
|
||||
|
||||
<b-button-group class="mb-3">
|
||||
<b-button
|
||||
|
@ -266,8 +264,6 @@
|
|||
</b-col> -->
|
||||
</div>
|
||||
|
||||
<hr v-if="!loading" class="my-4" />
|
||||
|
||||
<div v-if="gamePlatforms" class="d-inline-block w-100">
|
||||
<h5>Available for</h5>
|
||||
|
||||
|
@ -318,27 +314,13 @@
|
|||
<h4 class="mt-3">External links</h4>
|
||||
|
||||
<b-link
|
||||
v-for="({ url, id, icon, svg }, index) in gameLinks"
|
||||
v-for="({ url, id }, index) in gameLinks"
|
||||
:href="url"
|
||||
:key="index"
|
||||
:title="$t(`board.gameModal.links.${id}`)"
|
||||
v-b-tooltip
|
||||
target="_blank"
|
||||
:class="['text-left p-1 mr-2', darkTheme ? 'text-success' : '']"
|
||||
>
|
||||
<i
|
||||
v-if="icon"
|
||||
:class="`${icon} fa-fw`"
|
||||
aria-hidden
|
||||
/>
|
||||
|
||||
<b-img
|
||||
v-else-if="svg"
|
||||
width="24"
|
||||
:src="`/logos/companies/${id}.svg`"
|
||||
/>
|
||||
|
||||
<span class="ml-2 text-capitalize">{{ id }}</span>
|
||||
<span class="text-capitalize">{{ id }}</span>
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -118,9 +118,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
init() {
|
||||
console.log('sessionExpired', this.sessionExpired);
|
||||
if (this.sessionExpired) {
|
||||
console.log('sessionExpired', this.sessionExpired);
|
||||
this.showExpiredAlert = true;
|
||||
this.$store.commit('SET_SESSION_EXPIRED', false);
|
||||
}
|
||||
|
@ -134,7 +132,7 @@ export default {
|
|||
|
||||
createUserWithEmailAndPassword(auth, this.email, this.password)
|
||||
.then((userCredential) => {
|
||||
console.log('userCredential', userCredential);
|
||||
// console.log('userCredential', userCredential);
|
||||
const user = userCredential?.user;
|
||||
|
||||
this.$store.commit('SET_SESSION_EXPIRED', false);
|
||||
|
@ -167,30 +165,30 @@ export default {
|
|||
|
||||
signInWithPopup(auth, provider)
|
||||
.then((result) => {
|
||||
console.log('result', result);
|
||||
// console.log('result', result);
|
||||
// This gives you a Google Access Token. You can use it to access the Google API.
|
||||
const credential = GoogleAuthProvider.credentialFromResult(result);
|
||||
const token = credential.accessToken;
|
||||
|
||||
console.log('token', token)
|
||||
// console.log('token', token)
|
||||
// The signed-in user info.
|
||||
const user = result.user;
|
||||
console.log('user', user)
|
||||
// console.log('user', user)
|
||||
this.signInSuccess(user);
|
||||
// IdP data available using getAdditionalUserInfo(result)
|
||||
// ...
|
||||
}).catch((error) => {
|
||||
// Handle Errors here.
|
||||
const errorCode = error.code;
|
||||
const errorMessage = error.message;
|
||||
// The email of the user's account used.
|
||||
const email = error.customData.email;
|
||||
// The AuthCredential type that was used.
|
||||
const credential = GoogleAuthProvider.credentialFromError(error);
|
||||
// // Handle Errors here.
|
||||
// const errorCode = error.code;
|
||||
// const errorMessage = error.message;
|
||||
// // The email of the user's account used.
|
||||
// const email = error.customData.email;
|
||||
// // The AuthCredential type that was used.
|
||||
// const credential = GoogleAuthProvider.credentialFromError(error);
|
||||
|
||||
console.log(error);
|
||||
console.log(email);
|
||||
console.log(credential);
|
||||
// console.log(error);
|
||||
// console.log(email);
|
||||
// console.log(credential);
|
||||
// ...
|
||||
});
|
||||
},
|
||||
|
@ -200,18 +198,18 @@ export default {
|
|||
|
||||
getRedirectResult(auth)
|
||||
.then((result) => {
|
||||
console.log('getRedirectResult', result);
|
||||
// console.log('getRedirectResult', result);
|
||||
// This gives you a Google Access Token. You can use it to access Google APIs.
|
||||
const credential = GoogleAuthProvider.credentialFromResult(result);
|
||||
console.log('credential', credential);
|
||||
// console.log('credential', credential);
|
||||
const token = credential.accessToken;
|
||||
|
||||
console.log('token', token);
|
||||
// console.log('token', token);
|
||||
|
||||
// The signed-in user info.
|
||||
const user = result.user;
|
||||
|
||||
console.log('user', user)
|
||||
// console.log('user', user)
|
||||
// IdP data available using getAdditionalUserInfo(result)
|
||||
// ...
|
||||
}).catch((error) => {
|
||||
|
@ -229,6 +227,7 @@ export default {
|
|||
handleError(errorCode) {
|
||||
if (errorCode === 'auth/email-already-in-use') this.$bvToast.toast('Email already in use');
|
||||
if (errorCode === 'auth/wrong-password') this.$bvToast.toast('Wrong password');
|
||||
// TODO: add default error
|
||||
},
|
||||
|
||||
signInSuccess(user) {
|
||||
|
|
Loading…
Reference in a new issue