boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Using thumbnail width and height for release banner photos. Preventing user page from reloading when closing the add stash dialog without adding stash.

This commit is contained in:
DebaucheryLibrarian 2021-03-20 03:33:29 +01:00
parent bb9d6ee8fc
commit 67af9f2ea2
3 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/components/releases/banner.vue
View File

@ -33,8 +33,8 @@
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)" v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="getPath(release.teaser, 'thumbnail', { original: true })" :src="getPath(release.teaser, 'thumbnail', { original: true })"
:alt="release.title" :alt="release.title"
:width="release.teaser.width" :width="release.teaser.thumbnailWidth"
:height="release.teaser.height" :height="release.teaser.thumbnailHeight"
loading="lazy" loading="lazy"
class="item trailer" class="item trailer"
> >
@ -68,8 +68,8 @@
<img <img
:src="getPath(cover, 'thumbnail')" :src="getPath(cover, 'thumbnail')"
:style="{ 'background-image': getBgPath(cover, 'lazy') }" :style="{ 'background-image': getBgPath(cover, 'lazy') }"
:width="cover.width" :width="cover.thumbnailWidth"
:height="cover.height" :height="cover.thumbnailHeight"
class="item cover" class="item cover"
loading="lazy" loading="lazy"
@load="$emit('load', $event)" @load="$emit('load', $event)"
@ -93,8 +93,8 @@
:src="getPath(photo, 'thumbnail')" :src="getPath(photo, 'thumbnail')"
:style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }" :style="{ 'background-image': `url('${getPath(photo, 'lazy')}` }"
:alt="`Photo ${photo.index + 1}`" :alt="`Photo ${photo.index + 1}`"
:width="photo.width" :width="photo.thumbnailWidth"
:height="photo.height" :height="photo.thumbnailHeight"
loading="lazy" loading="lazy"
class="item" class="item"
@load="$emit('load', $event)" @load="$emit('load', $event)"

5
assets/components/stashes/add-stash.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Dialog <Dialog
title="Add stash" title="Add stash"
@close="$emit('close')" @close="$emit('close', false)"
> >
<form @submit.prevent="addStash"> <form @submit.prevent="addStash">
<input <input
@ -28,7 +28,7 @@ async function addStash() {
name: this.name, name: this.name,
}); });
this.$emit('close'); this.$emit('close', true);
} }
function mounted() { function mounted() {
@ -41,6 +41,7 @@ export default {
name: null, name: null,
}; };
}, },
emits: ['close'],
mounted, mounted,
methods: { methods: {
addStash, addStash,

12
assets/components/users/user.vue
View File

@ -37,7 +37,7 @@
<AddStash <AddStash
v-if="showAddStash" v-if="showAddStash"
@close="fetchUser" @close="closeAddStash"
/> />
</div> </div>
</template> </template>
@ -50,10 +50,17 @@ async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username); this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
this.isMe = this.user.id === this.$store.state.auth.user?.id; this.isMe = this.user.id === this.$store.state.auth.user?.id;
this.showAddStash = false;
this.pageTitle = this.user?.username; this.pageTitle = this.user?.username;
} }
async function closeAddStash(addedStash) {
this.showAddStash = false;
if (addedStash) {
await this.fetchUser();
}
}
async function mounted() { async function mounted() {
await this.fetchUser(); await this.fetchUser();
} }
@ -75,6 +82,7 @@ export default {
}, },
mounted, mounted,
methods: { methods: {
closeAddStash,
fetchUser, fetchUser,
}, },
}; };