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