traxxx-web/pages/users/@username/+Page.vue

122 lines
2.2 KiB
Vue

<template>
<div class="profile">
<div class="profile-header">
<img
v-if="profile.avatar"
:src="profile.avatar"
class="avatar"
>
<h2 class="username">{{ profile.username }}</h2>
</div>
<ul class="stashes nolist">
<li
v-for="stash in profile.stashes"
:key="`stash-${stash.id}`"
>
<a
:href="`/stash/${profile.username}/${stash.slug}`"
class="stash nolink"
>
<div class="stash-name">
{{ stash.name }}
<Icon
v-if="stash.primary"
icon="heart7"
class="primary"
/>
</div>
<div class="stash-counts">
<div class="stash-count"><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</div>
<div class="stash-count"><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</div>
<div class="stash-count"><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</div>
</div>
</a>
</li>
</ul>
</div>
</template>
<script setup>
import { inject } from 'vue';
const pageContext = inject('pageContext');
const profile = pageContext.pageProps.profile;
function abbreviateNumber(number) {
return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
}
console.log(profile.stashes);
</script>
<style scoped>
.profile-header {
display: flex;
align-items: center;
padding: .5rem 1rem;
color: var(--highlight-strong-30);
background: var(--grey-dark-40);
}
.username {
margin: 0;
}
.avatar {
width: 2rem;
height: 2rem;
border-radius: .25rem;
margin-right: 1rem;
}
.stashes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
gap: 1rem;
padding: 1rem;
}
.stash {
width: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
&:hover {
box-shadow: 0 0 3px var(--shadow-weak-20);
}
}
.stash-name {
display: flex;
justify-content: space-between;
padding: .5rem;
border-bottom: solid 1px var(--shadow-weak-30);
font-weight: bold;
.icon.primary {
fill: var(--primary);
}
}
.stash-counts {
display: flex;
justify-content: space-between;
}
.stash-count {
display: inline-flex;
align-items: center;
padding: .5rem;
font-size: .9rem;
.icon {
margin-right: .5rem;
fill: var(--shadow);
}
}
</style>