Improved stash page domain integration.

This commit is contained in:
DebaucheryLibrarian 2024-06-07 04:10:04 +02:00
parent 278f32a2fa
commit a061e908d3
2 changed files with 136 additions and 49 deletions

View File

@ -0,0 +1,105 @@
<template>
<nav class="domains">
<Link
:href="getPath('scenes')"
class="domain domain-scenes nolink"
:active="domain === 'scenes'"
>
<Icon icon="clapboard-play" />
<span class="domain-label">Scenes</span>
</Link>
<Link
:href="getPath('actors')"
class="domain domain-actors nolink"
:active="domain === 'actors'"
>
<Icon icon="star" />
<span class="domain-label">Actors</span>
</Link>
<Link
:href="getPath('movies')"
class="domain domain-movies nolink"
:active="domain === 'movies'"
>
<Icon icon="movie" />
<span class="domain-label">Movies</span>
</Link>
</nav>
</template>
<script setup>
const props = defineProps({
stash: {
type: Object,
default: null,
},
domain: {
type: String,
default: 'scenes',
},
});
function getPath(targetDomain) {
return `/stash/${props.stash.user.username}/${props.stash.slug}/${targetDomain}`;
}
</script>
<style scoped>
.domains {
display: flex;
justify-content: center;
gap: .5rem;
padding: 0 1rem;
}
.domain {
height: 100%;
box-sizing: border-box;
padding: .75rem 1rem;
color: var(--highlight-strong-10);
font-size: .9rem;
font-weight: bold;
.icon {
display: none;
height: 1rem;
fill: var(--highlight-strong-10);
}
&.active,
&:hover {
color: var(--text-light);
.icon {
fill: var(--text-light);
}
}
}
.domain-actors .icon {
transform: translateY(1px);
}
.domains-bar {
background: var(--grey-dark-50);
box-shadow: inset 0 0 3px var(--shadow);
}
@media(--small-60) {
.domains-bar {
.domain {
font-size: 0;
}
.domain .icon {
display: inline-flex;
}
.domain-label {
display: none;
}
}
}
</style>

View File

@ -15,6 +15,12 @@
{{ stash.name }} {{ stash.name }}
</h2> </h2>
<Domains
:stash="stash"
:domain="domain"
class="domains-header"
/>
<a <a
:href="`/user/${stash.user.username}`" :href="`/user/${stash.user.username}`"
class="user nolink" class="user nolink"
@ -26,27 +32,13 @@
</a> </a>
</div> </div>
<Domains
:stash="stash"
:domain="domain"
class="domains-bar"
/>
<div class="content"> <div class="content">
<nav class="domains">
<Link
:href="getPath('scenes')"
class="domain nolink"
:active="domain === 'scenes'"
>Scenes</Link>
<Link
:href="getPath('actors')"
class="domain nolink"
:active="domain === 'actors'"
>Actors</Link>
<Link
:href="getPath('movies')"
class="domain nolink"
:active="domain === 'movies'"
>Movies</Link>
</nav>
<slot /> <slot />
</div> </div>
</div> </div>
@ -55,15 +47,13 @@
<script setup> <script setup>
import { inject } from 'vue'; import { inject } from 'vue';
import Domains from './domains.vue';
const pageContext = inject('pageContext'); const pageContext = inject('pageContext');
const { routeParams } = pageContext; const { routeParams } = pageContext;
const domain = routeParams.domain; const domain = routeParams.domain;
const stash = pageContext.pageProps.stash; const stash = pageContext.pageProps.stash;
function getPath(targetDomain) {
return `/stash/${stash.user.username}/${stash.slug}/${targetDomain}`;
}
</script> </script>
<style scoped> <style scoped>
@ -75,10 +65,11 @@ function getPath(targetDomain) {
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: .5rem 1rem; padding: 0 1rem;
color: var(--text-light); color: var(--text-light);
background: var(--grey-dark-40); background: var(--grey-dark-40);
flex-shrink: 0; flex-shrink: 0;
@ -89,6 +80,7 @@ function getPath(targetDomain) {
text-transform: capitalize; text-transform: capitalize;
display: flex; display: flex;
align-items: center; align-items: center;
padding: .5rem 0;
font-size: 1.2rem; font-size: 1.2rem;
margin-right: 1rem; margin-right: 1rem;
@ -114,38 +106,28 @@ function getPath(targetDomain) {
border-radius: .25rem; border-radius: .25rem;
} }
.domains-bar {
display: none;
}
.scenes-container { .scenes-container {
overflow-y: auto; overflow-y: auto;
} }
.domains {
display: flex;
justify-content: center;
gap: .5rem;
padding: .5rem 1rem;
background: var(--background-base-10);
border-bottom: solid 1px var(--shadow-weak-40);
}
.domain {
box-sizing: border-box;
padding: .5rem 1rem;
background: var(--background-dark-20);
border-radius: 1rem;
color: var(--shadow);
font-size: .9rem;
font-weight: bold;
&.active {
background: var(--primary);
color: var(--text-light);
}
}
.content { .content {
overflow-y: auto; overflow-y: auto;
} }
@media(--small) {
.domains-header {
display: none;
}
.domains-bar {
display: flex;
}
}
@media(--small-50) { @media(--small-50) {
.title { .title {
font-size: 1rem; font-size: 1rem;