traxxx/assets/components/users/user.vue

178 lines
2.9 KiB
Vue

<template>
<div
v-if="user"
class="user"
>
<div class="header">
<h2 class="username">{{ user.username }}</h2>
</div>
<section
v-if="user.stashes?.length > 0"
class="section"
>
<h3 class="heading">Stashes</h3>
<ul class="stashes nolist">
<li
v-for="stash in user.stashes"
:key="stash.id"
class="stash"
>
<router-link
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
class="stash-link stash-section"
>
<h4 class="stash-name">{{ stash.name }}</h4>
</router-link>
<ul
v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist"
>
<li
v-for="{ scene } in stash.scenes"
:key="scene.id"
class="stash-scene"
>
<ScenePreview
:scene="scene"
:stash="stash"
@unstash="fetchUser"
/>
</li>
</ul>
<ul
v-if="stash.actors?.length > 0"
class="stash-section stash-actors nolist"
>
<li
v-for="{ actor } in stash.actors"
:key="actor.id"
class="stash-actor"
>
<ActorPreview
:actor="actor"
:stash="stash"
@unstash="fetchUser"
/>
</li>
</ul>
</li>
</ul>
</section>
</div>
</template>
<script>
import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue';
async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
this.pageTitle = this.user?.username;
}
async function mounted() {
await this.fetchUser();
}
export default {
components: {
ActorPreview,
ScenePreview,
},
data() {
return {
user: this.$route.params.username === this.$store.state.auth.user?.username
? this.$store.state.auth.user
: null,
pageTitle: null,
};
},
mounted,
methods: {
fetchUser,
},
};
</script>
<style lang="scss" scoped>
.header {
padding: .5rem 1rem;
background: var(--profile);
}
.username {
margin: 0;
font-size: 1.5rem;
color: var(--text-light);
}
.section {
padding: 1rem;
margin: 0 0 1rem 0;
}
.stashes {
display: grid;
grid-template-columns: 1fr 1fr;
}
.heading {
color: var(--primary);
}
.stash {
min-width: 0;
background: var(--background);
margin: 0 0 1rem 0;
box-shadow: 0 0 3px var(--shadow-weak);
}
.stash-link.stash-section {
display: block;
text-decoration: none;
}
.stash-name {
color: var(--shadow-strong);
margin: 0;
}
.stash-section {
padding: .5rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-actors,
.stash-scenes {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.stash-scenes {
height: 8rem;
grid-gap: .5rem;
}
.stash-actors {
grid-gap: 1rem;
}
.stash-actor,
.stash-scene {
flex-shrink: 0;
}
</style>