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

Improved scenes and movies meta header layout and responsiveness.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2026-11-12 00:57:30 +01:00
parent a8f6bcb4f0
commit 810b2971a8
6 changed files with 375 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/filters/filters.vue
+44 -12
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref } from 'vue';
import { computed, ref } from 'vue';
defineProps({
const props = defineProps({
results: {
type: Number,
default: null,
@@ -10,25 +10,47 @@ defineProps({
type: Boolean,
default: false,
},
// pages with their own filters toggle control the sidebar with these, otherwise it keeps its own state and toggle
showFull: {
type: Boolean,
default: null,
},
showCompact: {
type: Boolean,
default: null,
},
});
const emit = defineEmits(['close']);
// desktop defaults to open, compact defaults to closed
// we can't measure viewframe in SSR, so use separate toggles
const showFilters = ref(true);
const showFiltersCompact = ref(false);
const ownShowFull = ref(true);
const ownShowCompact = ref(false);
const isControlled = computed(() => props.showFull !== null || props.showCompact !== null);
const showFull = computed(() => (isControlled.value ? !!props.showFull : ownShowFull.value));
const showCompact = computed(() => (isControlled.value ? !!props.showCompact : ownShowCompact.value));
function toggleFilters(state) {
showFilters.value = state ?? !showFilters.value;
showFiltersCompact.value = state ?? !showFiltersCompact.value;
if (isControlled.value) {
if (state === false) {
emit('close');
}
return;
}
ownShowFull.value = state ?? !ownShowFull.value;
ownShowCompact.value = state ?? !ownShowCompact.value;
}
</script>
<template>
<div class="filters-frame">
<div
v-show="showFilters"
class="filters-container"
:class="{ show: showFiltersCompact }"
:class="{ 'show-full': showFull, 'show-compact': showCompact }"
@click="toggleFilters(false)"
>
<div class="filters-sidebar">
@@ -47,9 +69,10 @@ function toggleFilters(state) {
>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
</div>
<!-- in full mode, pages with their own toggle close the sidebar with that, compact mode still needs a way out of the overlay -->
<div
class="filters-toggle close"
:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
:class="{ 'show-full': showFull && !isControlled, 'show-compact': showCompact }"
@click.stop="toggleFilters(false)"
>
<Icon
@@ -65,8 +88,9 @@ function toggleFilters(state) {
</div>
<div
v-if="!isControlled"
class="filters-toggle open"
:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
:class="{ 'show-full': !showFull, 'show-compact': !showCompact }"
@click.stop="toggleFilters(true)"
><Icon icon="filter" /></div>
</div>
@@ -359,8 +383,12 @@ function toggleFilters(state) {
}
.filters-container {
display: flex;
display: none;
height: 100%;
&.show-full {
display: flex;
}
}
.filters-sidebar {
@@ -450,7 +478,11 @@ function toggleFilters(state) {
z-index: 500;
background: var(--background-dim);
&.show {
&.show-full {
display: none;
}
&.show-compact {
display: flex;
}
}
components/filters/toggle.vue
+117 -27
View File
@@ -1,50 +1,140 @@
<script setup>
defineProps({
// desktop and compact have separate open states, because we can't measure the viewport in SSR
showFull: {
type: Boolean,
default: true,
},
showCompact: {
type: Boolean,
default: false,
},
count: {
type: Number,
default: 0,
},
});
const emit = defineEmits(['toggle']);
</script>
<template>
<div
class="filters-toggle open"
@click.stop="emit('toggle')"
><Icon icon="filter" /></div>
<button
type="button"
class="filter-toggle nobutton"
:class="{
'open-full': showFull,
'open-compact': showCompact,
'active': count > 0,
}"
@click="emit('toggle')"
>
<!-- the media query picks the open state of the current viewport, matching the sidebar's own breakpoint -->
<Icon
icon="arrow-left2"
class="toggle-close"
/>
<Icon
icon="filter"
class="toggle-open"
/>
<!-- not filter-count, the filters sidebar has a global style by that name -->
<span
v-if="count > 0"
class="toggle-count"
>{{ count }}</span>
</button>
</template>
<style scoped>
.filters-toggle {
min-width: 2.75rem;
height: 3rem;
justify-content: center;
.filter-toggle {
display: flex;
align-items: center;
padding: 0 .25rem;
border-radius: 0 .5rem .5rem 0;
background: var(--background);
color: var(--glass);
gap: .75rem;
padding: 0 1rem;
border-radius: 0 .25rem .25rem 0;
margin-right: 1rem;
font-weight: bold;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
&.open {
left: 0;
right: auto;
}
&.show-full {
display: flex;
}
&.close .cross {
display: none;
}
color: var(--glass-strong-10);
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--glass);
fill: var(--glass-strong-10);
margin: .75rem 0 .75rem 0;
}
&.active {
padding-right: .75rem;
}
&:hover {
color: var(--primary);
cursor: pointer;
box-shadow: 0 0 3px var(--shadow-weak-20);
.icon {
fill: var(--primary);
}
}
.toggle-close {
display: none;
}
&.open-full {
.toggle-close {
display: inline-block;
}
.toggle-open {
display: none;
}
}
}
.toggle-count {
min-width: 1.25rem;
height: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 .25rem;
border-radius: .625rem;
background: var(--primary);
color: var(--text-light);
font-size: .8rem;
font-weight: bold;
line-height: 1;
}
@media (--compact) {
.filter-toggle {
/* the full mode state doesn't apply in compact mode, matches the specificity of the open-full rule to override it */
&,
&.open-full {
.toggle-close {
display: none;
}
.toggle-open {
display: inline-block;
}
}
/* after the reset, so it wins when both states are open */
&.open-compact {
.toggle-close {
display: inline-block;
}
.toggle-open {
display: none;
}
}
}
}
</style>
components/movies/movies.vue
+103 -5
View File
@@ -1,11 +1,13 @@
<script setup>
import { parse } from 'path-to-regexp';
import { inject, ref } from 'vue';
import { computed, inject, ref } from 'vue';
import Campaign from '#/components/campaigns/campaign.vue';
import ActorsFilter from '#/components/filters/actors.vue';
import ChannelsFilter from '#/components/filters/channels.vue';
import Filters from '#/components/filters/filters.vue';
import TagsFilter from '#/components/filters/tags.vue';
import FilterToggle from '#/components/filters/toggle.vue';
import YearsFilter from '#/components/filters/years.vue';
import Checkbox from '#/components/form/checkbox.vue';
@@ -18,7 +20,12 @@ import { getActorIdentifier, parseActorIdentifier } from '#/src/query.js';
import { formatYears, parseYears } from '#/utils/parse-range.js';
const pageContext = inject('pageContext');
const { pageProps, routeParams, urlParsed } = pageContext;
const {
pageProps,
routeParams,
urlParsed,
campaigns,
} = pageContext;
const {
actor: pageActor,
@@ -40,6 +47,11 @@ const loading = ref(false);
const showFilters = ref(true);
// desktop defaults to open, compact defaults to closed
// we can't measure the viewport in SSR, so use separate toggles, each viewport only reads its own
const showFiltersFull = ref(true);
const showFiltersCompact = ref(false);
const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
const queryActors = actorIds.map((urlActorId) => aggActors.value.find((aggActor) => aggActor.id === urlActorId)).filter(Boolean);
@@ -57,6 +69,20 @@ const filters = ref({
requireCover: !!urlParsed.search.cover,
});
// the search input updates the filter while typing, only count the search once it's applied
const appliedSearch = ref(urlParsed.search.q);
// indicates the results are narrowed down: the search, each tag, actor and the channel count individually, the year range and cover requirement count once
// the page's own actor, tag or channel aren't in these filters, so they aren't counted
const filterCount = computed(() => [
appliedSearch.value?.trim() ? 1 : 0,
filters.value.tags.length,
filters.value.actors.length,
filters.value.entity ? 1 : 0,
filters.value.years.length > 0 || filters.value.yearRange ? 1 : 0,
filters.value.requireCover ? 1 : 0,
].reduce((acc, count) => acc + count, 0));
function getPath(targetScope, preserveQuery) {
const path = parse(routeParams.path).map((segment) => {
if (segment.name === 'scope') {
@@ -78,6 +104,8 @@ function getPath(targetScope, preserveQuery) {
}
async function search(options = {}) {
appliedSearch.value = filters.value.search;
if (options.resetPage !== false) {
currentPage.value = 1;
}
@@ -133,6 +161,11 @@ async function search(options = {}) {
events.emit('scrollUp');
}
function toggleFilters(state) {
showFiltersFull.value = state ?? !showFiltersFull.value;
showFiltersCompact.value = state ?? !showFiltersCompact.value;
}
function updateFilter(prop, value, reload = true) {
filters.value[prop] = value;
@@ -147,6 +180,9 @@ function updateFilter(prop, value, reload = true) {
<Filters
v-if="showFilters"
:class="{ loading }"
:show-full="showFiltersFull"
:show-compact="showFiltersCompact"
@close="toggleFilters(false)"
>
<div class="filter search-container">
<!-- onsearch not compatible with FF and Safari -->
@@ -206,8 +242,30 @@ function updateFilter(prop, value, reload = true) {
</Filters>
<div class="movies-container">
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
class="campaign-meta campaign-full"
/>
<div class="movies-header">
<div class="meta">{{ total }} results</div>
<span class="header-filter">
<FilterToggle
v-if="showFilters"
:show-full="showFiltersFull"
:show-compact="showFiltersCompact"
:count="filterCount"
@toggle="toggleFilters()"
/>
<div class="meta">{{ total }}<span class="meta-label">&nbsp;results</span></div>
</span>
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
class="campaign-meta campaign-gap"
/>
<select
v-model="scope"
@@ -265,16 +323,42 @@ function updateFilter(prop, value, reload = true) {
}
.movies-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: .5rem 1rem .5rem 0;
.campaign {
max-height: 6rem;
justify-content: center;
margin: 0 1rem;
}
}
.header-filter {
display: flex;
align-items: center;
padding: .5rem 1rem .25rem 4rem;
flex-shrink: 0;
}
.meta {
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-top: 2px;
}
:deep(.campaign-meta) .campaign-banner {
width: auto;
}
.campaign-full {
height: auto;
}
.campaign-full {
display: none;
}
.movies {
@@ -290,6 +374,16 @@ function updateFilter(prop, value, reload = true) {
}
}
@media(--small-10) {
.campaign-gap {
display: none;
}
.campaign-full {
display: flex;
}
}
@media(--small-20) {
.movies {
padding: .5rem .5rem 1rem .5rem;
@@ -301,5 +395,9 @@ function updateFilter(prop, value, reload = true) {
.movies {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.meta-label {
display: none;
}
}
</style>
components/scenes/scenes.vue
+81 -5
View File
@@ -15,6 +15,7 @@ import Filters from '#/components/filters/filters.vue';
import GroupsFilter from '#/components/filters/groups.vue';
import TagsFilter from '#/components/filters/tags.vue';
import FilterToggle from '#/components/filters/toggle.vue';
import YearsFilter from '#/components/filters/years.vue';
import Ellipsis from '#/components/loading/ellipsis.vue';
import Pagination from '#/components/pagination/pagination.vue';
@@ -74,6 +75,11 @@ const total = ref(Number(pageProps.sceneTotal || pageProps.total));
const loading = ref(false);
const scenesContainer = ref(null);
// desktop defaults to open, compact defaults to closed
// we can't measure the viewport in SSR, so use separate toggles, each viewport only reads its own
const showFiltersFull = ref(true);
const showFiltersCompact = ref(false);
const view = ref(env.scenesView || 'grid');
const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
@@ -97,6 +103,20 @@ const filters = ref({
trans: parseRange(urlParsed.search.trans),
});
// the search input updates the filter while typing, only count the search once it's applied
const appliedSearch = ref(urlParsed.search.q);
// indicates the results are narrowed down: the search, each tag, actor and the channel count individually, each range counts once
// the page's own actor, tag or channel aren't in these filters, so they aren't counted
const filterCount = computed(() => [
appliedSearch.value?.trim() ? 1 : 0,
filters.value.tags.length,
filters.value.actors.length,
filters.value.entity ? 1 : 0,
filters.value.years.length > 0 || filters.value.yearRange ? 1 : 0,
...['group', 'females', 'males', 'trans'].map((key) => (filters.value[key] ? 1 : 0)),
].reduce((acc, count) => acc + count, 0));
const sceneCampaign = campaigns?.scenes;
const campaignIndex = campaigns?.index;
@@ -123,6 +143,8 @@ function getPath(targetScope, preserveQuery) {
}
async function search(options = {}) {
appliedSearch.value = filters.value.search;
if (options.resetPage !== false) {
currentPage.value = 1;
}
@@ -196,6 +218,11 @@ function updateFilter(prop, value, reload = true) {
}
}
function toggleFilters(state) {
showFiltersFull.value = state ?? !showFiltersFull.value;
showFiltersCompact.value = state ?? !showFiltersCompact.value;
}
function setView(newView) {
view.value = newView;
Cookies.set('scenesView', newView);
@@ -211,6 +238,9 @@ function setView(newView) {
<Filters
v-if="showFilters"
:loading="loading"
:show-full="showFiltersFull"
:show-compact="showFiltersCompact"
@close="toggleFilters(false)"
>
<div class="filter search-container">
<!-- onsearch not compatible with FF and Safari -->
@@ -274,16 +304,34 @@ function setView(newView) {
class="scenes-container"
:class="{ loading }"
>
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
class="campaign-meta campaign-full"
/>
<div
v-if="showMeta"
class="scenes-header"
>
<div class="meta">{{ total }} results</div>
<span class="header-filter">
<FilterToggle
v-if="showFilters"
:show-full="showFiltersFull"
:show-compact="showFiltersCompact"
:count="filterCount"
@toggle="toggleFilters()"
/>
<div
class="meta"
>{{ total }}<span class="meta-label">&nbsp;results</span></div>
</span>
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
class="campaign-meta"
class="campaign-meta campaign-gap"
/>
<div class="views">
@@ -430,12 +478,12 @@ function setView(newView) {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: .5rem 1rem .25rem 4rem;
padding: .5rem 1rem .5rem 0;
.campaign {
max-height: 6rem;
justify-content: center;
margin: .5rem 1rem 0 1rem;
margin: 0 1rem;
/* makes empty area link to ad, bit too annoying
width: 0;
flex-grow: 1;
@@ -455,7 +503,13 @@ function setView(newView) {
justify-content: space-between;
align-items: center;
flex-shrink: 0;
margin-bottom: .5rem;
margin-top: 2px;
}
.header-filter {
display: flex;
align-items: center;
flex-shrink: 0;
}
.scenes-items {
@@ -476,6 +530,14 @@ function setView(newView) {
width: auto;
}
.campaign-full {
height: auto;
}
.campaign-full {
display: none;
}
.campaign-scene {
width: 100%;
aspect-ratio: 2 / 1; /* ensures banner can't be taller than scene tile */
@@ -579,6 +641,14 @@ function setView(newView) {
.scopes .views {
width: 100%;
}
.campaign-gap {
display: none;
}
.campaign-full {
display: flex;
}
}
@media(--small-20) {
@@ -600,4 +670,10 @@ function setView(newView) {
justify-content: flex-start;
}
}
@media(--small-50) {
.meta-label {
display: none;
}
}
</style>
pages/movies/+onBeforeRender.js
+27 -10
View File
@@ -1,17 +1,30 @@
import { getRandomCampaigns } from '#/src/campaigns.js';
import { fetchMovies } from '#/src/movies.js';
import { curateMoviesQuery } from '#/src/web/movies.js';
export async function onBeforeRender(pageContext) {
const movieResults = await fetchMovies(await curateMoviesQuery({
...pageContext.urlQuery,
scope: pageContext.routeParams.scope || 'latest',
}), {
page: Number(pageContext.routeParams.page) || 1,
limit: Number(pageContext.urlParsed.search.limit) || 50,
dedupe: true,
}, pageContext.user, {
restriction: pageContext.geo.restriction,
});
const [
movieResults,
campaigns,
] = await Promise.all([
fetchMovies(await curateMoviesQuery({
...pageContext.urlQuery,
scope: pageContext.routeParams.scope || 'latest',
}), {
page: Number(pageContext.routeParams.page) || 1,
limit: Number(pageContext.urlParsed.search.limit) || 50,
dedupe: true,
}, pageContext.user, {
restriction: pageContext.geo.restriction,
}),
// same banner shapes as the scenes page header and footer
getRandomCampaigns([
{ minRatio: 3 },
{ minRatio: 1.5 },
], { tagFilter: pageContext.tagFilter }),
]);
const [metaCampaign, paginationCampaign] = campaigns;
return {
pageContext: {
@@ -19,6 +32,10 @@ export async function onBeforeRender(pageContext) {
pageProps: {
...movieResults,
},
campaigns: {
meta: metaCampaign,
pagination: paginationCampaign,
},
},
};
}
pages/scenes/+onBeforeRender.js
+3 -1
View File
@@ -21,6 +21,7 @@ export async function onBeforeRender(pageContext) {
restriction: pageContext.geo.restriction,
}),
getRandomCampaigns([
{ minRatio: 3 },
{ minRatio: 0.75, maxRatio: 1.25 },
{ minRatio: 1.5 },
], { tagFilter: pageContext.tagFilter }),
@@ -31,7 +32,7 @@ export async function onBeforeRender(pageContext) {
} = sceneResults;
const campaignIndex = getCampaignIndex(scenes.length);
const [sceneCampaign, paginationCampaign] = campaigns;
const [metaCampaign, sceneCampaign, paginationCampaign] = campaigns;
return {
pageContext: {
@@ -41,6 +42,7 @@ export async function onBeforeRender(pageContext) {
},
campaigns: {
index: campaignIndex,
meta: metaCampaign,
scenes: scenes.length > 5 && sceneCampaign,
pagination: paginationCampaign,
},