assets/css/breakpoints.css

@@ -1,5 +1,3 @@
-@custom-media --small-50 (max-width: 350px);
-@custom-media --small-40 (max-width: 480px);
 @custom-media --small-30 (max-width: 540px);
 @custom-media --small-20 (max-width: 650px);
 @custom-media --small-10 (max-width: 768px);

components/footer/navigation.vue

@@ -1,110 +0,0 @@
-<template>
-	<nav class="nav-list noselect">
-		<a
-			href="/updates"
-			class="nav-item updates nolink"
-			:class="{ active: activePage === 'updates' }"
-		>
-			<div class="nav-pill">Updates</div>
-		</a>
-
-		<a
-			href="/actors"
-			class="nav-item actors nolink"
-			:class="{ active: activePage === 'actors' }"
-		>
-			<div class="nav-pill">Actors</div>
-		</a>
-
-		<a
-			href="/channels"
-			class="nav-item channels nolink"
-			:class="{ active: activePage === 'channels' }"
-		>
-			<div class="nav-pill">Channels</div>
-		</a>
-
-		<button
-			class="nav-item nav-button"
-			@click="emit('sidebar')"
-		>
-			<div class="nav-pill">
-				<Icon
-					icon="menu"
-				/>
-			</div>
-		</button>
-	</nav>
-</template>
-
-<script setup>
-import { computed, inject } from 'vue';
-
-const emit = defineEmits(['sidebar']);
-const pageContext = inject('pageContext');
-
-const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
-</script>
-
-<style scoped>
-.nav-list {
-	display: flex;
-	align-items: stretch;
-	flex-shrink: 0;
-	position: relative; /* required for box-shadow to show */
-	background: var(--grey-dark-40);
-	box-shadow: 0 0 3px var(--shadow-weak-10);
-}
-
-.nav-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-grow: 1;
-	padding: .5rem;
-	border: none;
-	background: none;
-	color: var(--highlight-strong-20);
-	font-weight: bold;
-	font-size: .9rem;
-
-	&:hover {
-		cursor: pointer;
-
-		.nav-pill {
-			color: var(--text-light);
-			background: var(--highlight-weak-30);
-		}
-
-		.icon {
-			fill: var(--text-light);
-		}
-	}
-
-	&.active {
-		color: var(--text-light);
-	}
-
-	.icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		fill: var(--highlight-strong-10);
-	}
-}
-
-.nav-pill {
-	width: 100%;
-	height: 1rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: .5rem 1rem;
-	border-radius: 1.5rem;
-}
-
-@media(--small-50) {
-	.nav-item.channels {
-		display: none;
-	}
-}
-</style>

components/header/header.vue

@@ -159,8 +159,7 @@ async function logout() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	position: relative;
+	z-index: 1000; /* make sure shadow shows up above content */
-	z-index: 100; /* make sure shadow shows up above content */
 	box-shadow: 0 0 3px var(--shadow-weak-10);
 }
 
@@ -193,7 +192,6 @@ async function logout() {
 
 	&:hover {
 		text-decoration: none;
-		color: var(--primary);
 	}
 }
 
@@ -225,10 +223,6 @@ async function logout() {
 		border: none;
 		margin: 0;
 		background: none;
-
-		&:placeholder-shown {
-			text-overflow: ellipsis;
-		}
 	}
 
 	.search-button {
@@ -327,7 +321,7 @@ async function logout() {
 
 @media(--small) {
 	.search .input {
-		width: 12rem;
+		width: 10rem;
 	}
 }
 
@@ -335,18 +329,5 @@ async function logout() {
 	.nav-list {
 		display: none;
 	}
-
-	.header-section {
-		flex-grow: 1;
-	}
-
-	.search {
-		flex-grow: 1;
-	}
-
-	.search .input {
-		width: 0;
-		flex-grow: 1;
-	}
 }
 </style>

components/scenes/scenes.vue

@@ -299,23 +299,19 @@ function updateFilter(prop, value, reload = true) {
 }
 
 .scopes {
-	display: flex;
+	margin-left: 1rem;
-	gap: .5rem;
-	margin: .75rem 0 .25rem 1rem;
 }
 
 .scope {
 	box-sizing: border-box;
-	padding: .5rem 1rem;
+	padding: 1rem;
-	background: var(--background-dark-20);
-	border-radius: 1rem;
 	color: var(--shadow);
 	font-size: .9rem;
 	font-weight: bold;
 
 	&.active {
-		background: var(--primary);
+		color: var(--primary);
-		color: var(--text-light);
+		font-weight: bold;
 	}
 }
 

components/sidebar/sidebar.vue

@@ -1,137 +0,0 @@
-<template>
-	<div
-		class="sidebar-container"
-		@click="emit('sidebar')"
-	>
-		<div
-			class="sidebar"
-			@click.stop
-		>
-			<Link href="/updates">
-				<h1 class="title">
-					<div
-						class="logo"
-						v-html="logo"
-					/>
-				</h1>
-			</Link>
-
-			<ul class="nolist menu">
-				<li
-					class="menu-item"
-					:class="{ active: activePage === 'updates' }"
-				>
-					<a
-						href="/updates"
-						class="menu-link nolink"
-					>Updates</a>
-				</li>
-
-				<li
-					class="menu-item"
-					:class="{ active: activePage === 'actors' }"
-				>
-					<a
-						href="/actors"
-						class="menu-link nolink"
-					>Actors</a>
-				</li>
-
-				<li
-					class="menu-item"
-					:class="{ active: activePage === 'channels' }"
-				>
-					<a
-						href="/channels"
-						class="menu-link nolink"
-					>Channels</a>
-				</li>
-
-				<li
-					class="menu-item"
-					:class="{ active: activePage === 'tags' }"
-				>
-					<a
-						href="/tags"
-						class="menu-link nolink"
-					>Tags</a>
-				</li>
-
-				<li
-					class="menu-item"
-					:class="{ active: activePage === 'movies' }"
-				>
-					<a
-						href="/movies"
-						class="menu-link nolink"
-					>Movies</a>
-				</li>
-			</ul>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { computed, inject } from 'vue';
-
-import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
-
-const emit = defineEmits(['sidebar']);
-const pageContext = inject('pageContext');
-
-const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
-</script>
-
-<style scoped>
-.sidebar-container {
-	width: 100%;
-	height: 100%;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 200;
-	display: flex;
-	justify-content: flex-end;
-	background: var(--shadow-strong-10);
-}
-
-.sidebar {
-	width: 15rem;
-	max-width: 100%;
-	height: 100%;
-	margin-left: 2rem;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-strong-30);
-}
-
-.title {
-	margin: 0;
-}
-
-.logo {
-	width: 6rem;
-	max-width: 100%;
-	padding: .5rem 1rem .75rem 1rem;
-	fill: var(--primary);
-}
-
-.menu-item {
-	display: block;
-
-	&.active .menu-link {
-		color: var(--primary);
-	}
-}
-
-.menu-link {
-	display: block;
-	padding: .75rem 1rem;
-	font-size: 1.1rem;
-	font-weight: bold;
-	color: var(--shadow-strong-10);
-
-	&:hover {
-		color: var(--primary);
-	}
-}
-</style>

package-lock.json

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

package.json

@@ -70,5 +70,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.10.0"
+  "version": "0.9.9"
 }

renderer/container.vue

@@ -3,13 +3,6 @@
 		class="container"
 		@click="blur"
 	>
-		<transition name="slide">
-			<Sidebar
-				v-if="showSidebar"
-				@sidebar="showSidebar = false"
-			/>
-		</transition>
-
 		<Header />
 
 		<div
@@ -18,11 +11,6 @@
 		>
 			<slot @scroll="scroll" />
 		</div>
-
-		<BottomNavigation
-			class="nav"
-			@sidebar="showSidebar = true"
-		/>
 	</div>
 </template>
 
@@ -31,12 +19,9 @@ import { ref, onMounted } from 'vue';
 
 import events from '#/src/events.js';
 
-import Header from '#/components/header/header.vue';
+import Header from '../components/header/header.vue';
-import Sidebar from '#/components/sidebar/sidebar.vue';
-import BottomNavigation from '#/components/footer/navigation.vue';
 
 const content = ref(null);
-const showSidebar = ref(false);
 
 function blur() {
 	events.emit('blur');
@@ -59,28 +44,6 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 }
-
-.slide-enter-active,
-.slide-leave-active {
-	&.sidebar-container {
-		transition: background .15s ease-in-out;
-	}
-
-	.sidebar {
-		transition: transform .15s ease-in-out;
-	}
-}
-
-.slide-enter-from,
-.slide-leave-to {
-	&.sidebar-container {
-		background: transparent;
-	}
-
-	.sidebar {
-		transform: translate(100%, 0);
-	}
-}
 </style>
 
 <style scoped>
@@ -97,14 +60,4 @@ onMounted(() => {
 	flex-grow: 1;
 	overflow-y: auto;
 }
-
-.nav {
-	display: none;
-}
-
-@media(--small-10) {
-	.nav {
-		display: flex;
-	}
-}
 </style>