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

143 lines
2.5 KiB
Vue
Raw Normal View History

2024-02-29 04:08:54 +00:00
<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>
2024-02-29 04:08:54 +00:00
</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;
}
2024-02-29 04:08:54 +00:00
</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));
2024-03-17 04:27:43 +00:00
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);
}
}
}
2024-02-29 04:08:54 +00:00
</style>