traxxx/assets/components/stashes/stash.vue

116 lines
2.0 KiB
Vue

<template>
<div
v-if="stash"
class="stash content"
>
<div class="stash-header">
<h2 class="stash-name">{{ stash.name }}</h2>
<router-link
v-if="stash.user"
:to="{ name: 'user', params: { username: stash.user.username } }"
class="stash-username nolink"
><Icon icon="user3" />{{ stash.user.username }}</router-link>
</div>
<div class="content-inner">
<ul
v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist"
>
<li
v-for="item in stash.scenes"
:key="item.id"
><Scene :release="item.scene" /></li>
</ul>
<ul
v-if="stash.actors?.length > 0"
class="stash-section stash-actors nolist"
>
<li
v-for="item in stash.actors"
:key="item.id"
><Actor :actor="item.actor" /></li>
</ul>
</div>
</div>
</template>
<script>
import Actor from '../actors/tile.vue';
import Scene from '../releases/scene-tile.vue';
async function fetchStash() {
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
}
async function mounted() {
this.fetchStash();
}
export default {
components: {
Actor,
Scene,
},
data() {
return {
stash: null,
};
},
mounted,
methods: {
fetchStash,
},
};
</script>
<style lang="scss" scoped>
.stash-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--profile);
color: var(--text-light);
}
.stash-name,
.stash-username {
display: inline-flex;
align-items: center;
padding: .5rem 1rem;
margin: 0;
font-weight: bold;
.icon {
fill: var(--text-light);
margin: -.1rem .5rem 0 0;
}
}
.stash-section {
padding: 1rem;
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-actors,
.stash-scenes {
display: grid;
flex-grow: 1;
grid-gap: .5rem;
box-sizing: border-box;
}
.stash-actors {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.stash-scenes {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}
</style>