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

Removed info channels from overview. Fixed poster gap.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-06-12 17:09:53 +02:00
parent bfe6dc866d
commit 41d6324c28
13 changed files with 302 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
components/campaigns/campaign.vue
View File

@@ -1,17 +1,33 @@
<template>
<div class="campaign">
<a
:href="campaign.url"
target="_blank"
class="campaign-link"
<iframe
v-if="campaign?.banner?.type === 'html'"
ref="iframe"
:width="campaign.banner.width"
:height="campaign.banner.height"
:src="bannerSrc"
scrolling="no"
marginwidth="0"
marginheight="0"
class="campaign frame"
data-umami-event="campaign-click"
:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
/>
<a
v-else-if="campaign.banner"
:href="campaign.url || campaign.affiliate?.url"
target="_blank"
class="campaign"
data-umami-event="campaign-click"
:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
>
<img
:src="bannerSrc"
:width="campaign.banner.width"
:height="campaign.banner.height"
class="campaign-banner"
>
<img
v-if="campaign.banner"
:src="getBanner(campaign)"
class="campaign-banner"
>
</a>
</div>
</a>
</template>
<script setup>
@@ -24,17 +40,19 @@ const props = defineProps({
// console.log(props.campaign?.banner);
function getBanner(campaign) {
if (campaign.banner.entity.type === 'network' || !campaign.banner.entity.parent) {
return `/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
}
const bannerSrc = (() => {
if (props.campaign.banner) {
if (props.campaign.banner.entity.type === 'network' || !props.campaign.banner.entity.parent) {
return `/banners/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
}
if (campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network') {
return `/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`;
if (props.campaign.banner.entity.type === 'channel' && props.campaign.banner.entity.parent?.type === 'network') {
return `/banners/${props.campaign.banner.entity.parent.slug}/${props.campaign.banner.entity.slug}/${props.campaign.banner.id}.${props.campaign.banner.type || 'jpg'}`;
}
}
return null;
}
})();
</script>
<style scoped>
@@ -44,7 +62,14 @@ function getBanner(campaign) {
justify-content: center;
}
.frame {
border: none;
overflow: hidden;
}
.campaign-banner {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
}

16
components/pagination/pagination.vue
View File

@@ -1,5 +1,10 @@
<template>
<div class="pagination-container">
<Campaign
v-if="campaigns?.pagination"
:campaign="campaigns.pagination"
/>
<div
v-if="currentPage === pageTotal && total > env.maxMatches"
class="more"
@@ -89,6 +94,8 @@
import { computed, inject } from 'vue';
import { parse } from 'path-to-regexp';
import Campaign from '#/components/campaigns/campaign.vue';
const props = defineProps({
page: {
type: Number,
@@ -117,7 +124,6 @@ const props = defineProps({
});
const emit = defineEmits(['navigation']);
const pageContext = inject('pageContext');
const {
@@ -125,6 +131,7 @@ const {
urlParsed,
pageProps,
env,
campaigns,
} = pageContext;
const currentPage = computed(() => props.page || Number(routeParams?.page));
@@ -203,6 +210,7 @@ function getPath(page) {
.pagination-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@@ -286,6 +294,12 @@ function getPath(page) {
font-size: 1.1rem;
}
.campaign {
max-width: 100%;
max-height: 6rem;
padding: 0 1rem;
}
@media (--small-30) {
.pagination {
height: 4.5rem;

98
components/scenes/scenes.vue
View File

@@ -54,6 +54,11 @@
>
<div class="meta">{{ total }} results</div>
<Campaign
v-if="campaigns?.meta"
:campaign="campaigns.meta"
/>
<select
v-model="scope"
class="input"
@@ -83,23 +88,30 @@
v-if="showScopeTabs"
class="scopes"
>
<Link
:href="getPath('latest')"
class="scope nolink"
:active="scope === 'latest'"
>Latest</Link>
<div class="scopes-pills">
<Link
:href="getPath('latest')"
class="scope nolink"
:active="scope === 'latest'"
>Latest</Link>
<Link
:href="getPath('upcoming')"
class="scope nolink"
:active="scope === 'upcoming'"
>Upcoming</Link>
<Link
:href="getPath('upcoming')"
class="scope nolink"
:active="scope === 'upcoming'"
>Upcoming</Link>
<Link
:href="getPath('new')"
class="scope nolink"
:active="scope === 'new'"
>New</Link>
<Link
:href="getPath('new')"
class="scope nolink"
:active="scope === 'new'"
>New</Link>
</div>
<Campaign
v-if="campaigns?.scope"
:campaign="campaigns.scope"
/>
</nav>
<ul
@@ -107,10 +119,10 @@
>
<template v-for="item in campaignScenes">
<li
v-if="item === 'campaign' && campaign"
v-if="item === 'campaign' && sceneCampaign"
:key="`campaign-${item.id}`"
>
<Campaign :campaign="campaign" />
<Campaign :campaign="sceneCampaign" />
</li>
<li
@@ -172,7 +184,12 @@ const props = defineProps({
},
});
const { pageProps, routeParams, urlParsed } = inject('pageContext');
const {
pageProps,
routeParams,
urlParsed,
campaigns,
} = inject('pageContext');
const {
actor: pageActor,
@@ -206,10 +223,10 @@ const filters = ref({
actors: queryActors,
});
const campaign = pageProps.campaigns?.scenes;
const campaignIndex = pageProps.campaigns?.index;
const sceneCampaign = campaigns?.scenes;
const campaignIndex = campaigns?.index;
const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (index === campaignIndex ? ['campaign', scene] : scene)));
const campaignScenes = computed(() => scenes.value.flatMap((scene, index) => (sceneCampaign && index === campaignIndex ? ['campaign', scene] : scene)));
function getPath(targetScope, preserveQuery) {
const path = parse(routeParams.path).map((segment) => {
@@ -302,8 +319,15 @@ function updateFilter(prop, value, reload = true) {
.scenes-header {
display: flex;
align-items: center;
align-items: flex-end;
justify-content: space-between;
padding: .5rem 1rem .25rem 3rem;
.campaign {
max-height: 6rem;
justify-content: center;
margin: .5rem 1rem 0 1rem;
}
}
.scenes-container {
@@ -314,9 +338,9 @@ function updateFilter(prop, value, reload = true) {
.meta {
display: flex;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
}
.scenes {
@@ -328,8 +352,21 @@ function updateFilter(prop, value, reload = true) {
.scopes {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: .75rem 1rem .25rem 1rem;
.campaign {
max-height: 6rem;
justify-content: flex-end;
margin-left: 1rem;
}
}
.scopes-pills {
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem 0 .25rem 1rem;
}
.scope {
@@ -370,6 +407,19 @@ function updateFilter(prop, value, reload = true) {
.scopes {
justify-content: center;
flex-direction: column-reverse;
.campaign {
width: 100%;
justify-content: center;
margin-left: 0;
margin-bottom: 1rem;
}
}
.scopes-pills {
width: 100%;
justify-content: center;
}
}