DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added navigation bar to tags page.

This commit is contained in:
DebaucheryLibrarian 2024-01-26 02:35:26 +01:00
parent e79e34ac29
commit fbcae6b7d1
2 changed files with 155 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
pages/tags/+Page.vue
View File

@ -1,63 +1,172 @@
<template>
<div class="page">
<div
v-for="(tags, category) in categories"
:key="`category-${category}`"
<ul
ref="categories"
class="categories nolist"
>
<h3 class="category">{{ category }}</h3>
<li
v-for="(tags, category) in showcase"
:key="`category-${category}`"
>
<a
:href="`#${category}`"
class="category nolink"
:class="{ active: activeCategory === category }"
>{{ category }}</a>
</li>
</ul>
<ul class="tags nolist">
<li
v-for="tag in tags"
:key="`tag-${tag.slug}`"
class="tag"
<div
ref="content"
class="content"
>
<div
v-for="(tags, category) in showcase"
:key="`tags-${category}`"
>
<h3
:id="category"
class="category-heading"
>{{ category }}</h3>
<ul
class="tags nolist"
:data-category="category"
>
<div class="thumb-container">
<li
v-for="tag in tags"
:key="`tag-${tag.slug}`"
class="tag"
>
<div class="thumb-container">
<a
:href="`/tag/${tag.slug}`"
class="tag nolink"
>
<img
v-if="tag.poster"
:src="`/${tag.poster.thumbnail}`"
:title="tag.poster.comment"
class="thumb"
loading="lazy"
>
</a>
<a
v-if="tag.poster?.entity"
:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
class="favicon-link"
>
<img
:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
:alt="tag.poster.entity.name"
:title="tag.poster.entity.name"
class="favicon"
>
</a>
</div>
<a
:href="`/tag/${tag.slug}`"
class="tag nolink"
>
<img
v-if="tag.poster"
:src="`/${tag.poster.thumbnail}`"
:title="tag.poster.comment"
class="thumb"
loading="lazy"
>
</a>
<a
v-if="tag.poster?.entity"
:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
class="favicon-link"
>
<img
:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
:alt="tag.poster.entity.name"
:title="tag.poster.entity.name"
class="favicon"
>
</a>
</div>
<a
:href="`/tag/${tag.slug}`"
class="name nolink"
>{{ tag.name }}</a>
</li>
</ul>
class="name nolink"
>{{ tag.name }}</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script setup>
import { inject } from 'vue';
import { ref, onMounted, inject } from 'vue';
import navigate from '#/src/navigate.js';
const pageContext = inject('pageContext');
const categories = pageContext.pageProps.tagShowcase;
const showcase = pageContext.pageProps.tagShowcase;
const categories = ref(null);
const content = ref(null);
const activeCategory = ref(null);
function calculateActiveCategory() {
activeCategory.value = Array.from(document.querySelectorAll('.tags')).reduce((closest, element) => {
const { top } = element.getBoundingClientRect();
if (!closest || Math.abs(top) < Math.abs(closest.top)) {
return { category: element.dataset.category, top };
}
return closest;
}, null).category;
const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);
activeLink.scrollIntoView();
navigate(`#${activeCategory.value}`, null, { replace: true });
}
onMounted(() => {
// div doesn't scroll automatically on page load, reset hash to scroll
if (window.location.hash) {
const hash = window.location.hash;
window.location.hash = undefined;
window.location.hash = hash;
}
categories.value.addEventListener('wheel', (event) => {
categories.value.scrollLeft += event.deltaY;
});
content.value.addEventListener('scroll', calculateActiveCategory);
calculateActiveCategory();
});
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
overflow: hidden;
}
.content {
flex-grow: 1;
overflow-y: auto;
}
.categories {
display: flex;
gap: .25rem;
flex-shrink: 0;
padding: .5rem 1rem;
background: var(--grey-dark-40);
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.category {
padding: .25rem .5rem;
border-radius: .25rem;
background: var(--grey-dark-30);
color: var(--highlight-strong-30);
font-weight: bold;
font-size: .9rem;
&:hover,
&.active {
color: var(--text-light);
background: var(--primary);
}
}
.tags {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
@ -65,7 +174,7 @@ const categories = pageContext.pageProps.tagShowcase;
padding: .75rem 1rem;
}
.category {
.category-heading {
padding: 1rem 1rem 0 1.5rem;
margin: 0;
text-transform: capitalize;

2
src/navigate.js
View File

@ -12,6 +12,8 @@ export default function navigate(path, query, options = {}) {
if (options.redirect) {
window.location.href = url;
} else if (options.replace) {
history.replaceState({}, '', url); // eslint-disable-line no-restricted-globals
} else {
history.pushState({}, '', url); // eslint-disable-line no-restricted-globals
}