Added separated direct domain links to stash tile.

This commit is contained in:
DebaucheryLibrarian 2024-03-21 02:59:55 +01:00
parent 709c549d41
commit f940532d3b
1 changed files with 34 additions and 13 deletions

View File

@ -15,11 +15,11 @@
v-for="stash in profile.stashes" v-for="stash in profile.stashes"
:key="`stash-${stash.id}`" :key="`stash-${stash.id}`"
> >
<div class="stash">
<a <a
:href="`/stash/${profile.username}/${stash.slug}`" :href="`/stash/${profile.username}/${stash.slug}`"
class="stash nolink" class="stash-name nolink"
> >
<div class="stash-name">
{{ stash.name }} {{ stash.name }}
<Icon <Icon
@ -27,14 +27,25 @@
icon="heart7" icon="heart7"
class="primary" class="primary"
/> />
</div> </a>
<div class="stash-counts"> <div class="stash-counts">
<div class="stash-count"><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</div> <a
<div class="stash-count"><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</div> :href="`/stash/${profile.username}/${stash.slug}/scenes`"
<div class="stash-count"><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</div> 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> </div>
</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -49,8 +60,6 @@ const profile = pageContext.pageProps.profile;
function abbreviateNumber(number) { function abbreviateNumber(number) {
return number?.toLocaleString('en-US', { notation: 'compact' }) || 0; return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
} }
console.log(profile.stashes);
</script> </script>
<style scoped> <style scoped>
@ -92,11 +101,14 @@ console.log(profile.stashes);
.stash-name { .stash-name {
display: flex; display: flex;
justify-content: space-between;
padding: .5rem; padding: .5rem;
border-bottom: solid 1px var(--shadow-weak-30); border-bottom: solid 1px var(--shadow-weak-30);
font-weight: bold; font-weight: bold;
.icon {
margin-left: .75rem;
}
.icon.primary { .icon.primary {
fill: var(--primary); fill: var(--primary);
} }
@ -111,11 +123,20 @@ console.log(profile.stashes);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: .5rem; padding: .5rem;
flex-grow: 1;
font-size: .9rem; font-size: .9rem;
.icon { .icon {
margin-right: .5rem; margin-right: .5rem;
fill: var(--shadow); fill: var(--shadow);
} }
&:hover {
color: var(--primary);
.icon {
fill: var(--primary);
}
}
} }
</style> </style>