More updates

This commit is contained in:
Gamebrary 2024-01-27 09:28:01 -07:00
parent 9b643e3a4c
commit bef2869f41
10 changed files with 36 additions and 76 deletions

View file

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

View file

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

View file

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

View file

@ -66,7 +66,7 @@ export default {
user-select: none;
display: flex;
align-items: flex-start;
width: 100vw;
// width: 100vw;
height: 100%;
}
</style>

View file

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

View file

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

View file

@ -31,7 +31,7 @@
<b-form-input
id="name"
class="ml-2"
class="ml-3"
v-model.trim="list.name"
/>
</div>

View file

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

View file

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

View file

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