143 lines
2.5 KiB
Vue
143 lines
2.5 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}`"
|
|
>
|
|
<div class="stash">
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}`"
|
|
class="stash-name nolink"
|
|
>
|
|
{{ stash.name }}
|
|
|
|
<Icon
|
|
v-if="stash.primary"
|
|
icon="heart7"
|
|
class="primary"
|
|
/>
|
|
</a>
|
|
|
|
<div class="stash-counts">
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/scenes`"
|
|
class="stash-count nolink"
|
|
><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
|
|
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/actors`"
|
|
class="stash-count nolink"
|
|
><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
|
|
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/movies`"
|
|
class="stash-count nolink"
|
|
><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
|
|
</div>
|
|
</div>
|
|
</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;
|
|
}
|
|
</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;
|
|
padding: .5rem;
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
margin-left: .75rem;
|
|
}
|
|
|
|
.icon.primary {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
|
|
.stash-counts {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.stash-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
flex-grow: 1;
|
|
font-size: .9rem;
|
|
|
|
.icon {
|
|
margin-right: .5rem;
|
|
fill: var(--shadow);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
</style>
|