components/stashes/domains.vue

@@ -1,105 +0,0 @@
-<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>

components/stashes/stash.vue

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

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.23.8",
+  "version": "0.23.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.23.8",
+      "version": "0.23.7",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@dicebear/collection": "^7.0.5",

package.json

@@ -77,5 +77,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.23.8"
+  "version": "0.23.7"
 }