Compare commits
No commits in common. "229d74d26648a639803f763ce4074e524eeb868b" and "ced8f447a75764cc0015c60e33248ddf2d07e6c2" have entirely different histories.
229d74d266
...
ced8f447a7
|
|
@ -63,7 +63,10 @@
|
|||
:items-per-page="limit"
|
||||
/>
|
||||
|
||||
<div class="tiles">
|
||||
<div
|
||||
v-lazy-container="{ selector: '.lazy' }"
|
||||
class="tiles"
|
||||
>
|
||||
<Actor
|
||||
v-for="actor in actors"
|
||||
:key="`actor-${actor.id}`"
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}` }"
|
||||
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
|
||||
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
|
||||
loading="lazy"
|
||||
class="avatar photo"
|
||||
@load="$parent.$emit('load')"
|
||||
>
|
||||
|
|
@ -34,9 +34,9 @@
|
|||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
|
||||
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
|
||||
:title="`© ${photo.credit || photo.entity.name}`"
|
||||
loading="lazy"
|
||||
class="photo"
|
||||
@load="$parent.$emit('load')"
|
||||
>
|
||||
|
|
@ -76,6 +76,9 @@ export default {
|
|||
padding: .5rem 1rem;
|
||||
margin: 0 1rem 0 0;
|
||||
font-size: 0;
|
||||
overflow-x: scroll;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
&.expanded {
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -98,6 +101,10 @@ export default {
|
|||
.avatar-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-link {
|
||||
|
|
@ -108,7 +115,6 @@ export default {
|
|||
height: 15rem;
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
|
|
|
|||
|
|
@ -45,10 +45,9 @@
|
|||
<div class="avatar-container">
|
||||
<img
|
||||
v-if="actor.avatar"
|
||||
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:style="{ 'background-image': sfw ? `url(/img/${actor.avatar.sfw.lazy})`: `url(/img/${actor.avatar.lazy})` }"
|
||||
loading="lazy"
|
||||
class="avatar"
|
||||
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
|
||||
class="avatar lazy"
|
||||
>
|
||||
|
||||
<span
|
||||
|
|
@ -233,7 +232,6 @@ export default {
|
|||
justify-content: center;
|
||||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.avatar-fallback {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div
|
||||
class="container"
|
||||
:class="theme"
|
||||
>
|
||||
<Warning
|
||||
v-if="showWarning"
|
||||
class="warning-container"
|
||||
|
|
@ -23,10 +26,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import EventBus from '../../js/event-bus';
|
||||
|
||||
import Warning from './warning.vue';
|
||||
import Header from '../header/header.vue';
|
||||
import Sidebar from '../sidebar/sidebar.vue';
|
||||
|
||||
function theme(state) {
|
||||
return state.ui.theme;
|
||||
}
|
||||
|
||||
function toggleSidebar(state) {
|
||||
this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
|
||||
}
|
||||
|
|
@ -38,6 +49,12 @@ async function setConsent(consent) {
|
|||
}
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
document.addEventListener('click', () => {
|
||||
EventBus.$emit('blur');
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
|
|
@ -50,6 +67,12 @@ export default {
|
|||
showWarning: localStorage.getItem('consent') !== window.env.sessionId,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
theme,
|
||||
}),
|
||||
},
|
||||
mounted,
|
||||
methods: {
|
||||
toggleSidebar,
|
||||
setConsent,
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick } from 'vue';
|
||||
import Vue from 'vue';
|
||||
|
||||
import FilterBar from '../filters/filter-bar.vue';
|
||||
import Pagination from '../pagination/pagination.vue';
|
||||
|
|
@ -135,7 +135,7 @@ async function fetchEntity() {
|
|||
|
||||
this.pageTitle = entity.name;
|
||||
|
||||
nextTick(() => {
|
||||
Vue.nextTick(() => {
|
||||
this.$refs.content.scrollTop = 0;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Tooltip class="filter-container">
|
||||
<v-popover class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="users" />
|
||||
|
||||
|
|
@ -14,8 +14,7 @@
|
|||
>Actors</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div>
|
||||
<div slot="popover">
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
:to="{ query: { ...$route.query, actors: undefined } }"
|
||||
|
|
@ -54,8 +53,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Tooltip class="filter-container">
|
||||
<v-popover class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="antenna" />
|
||||
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
>Channels</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:popover>
|
||||
<div slot="popover">
|
||||
<router-link
|
||||
class="filter-clear"
|
||||
|
|
@ -68,8 +67,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Tooltip class="filter-container">
|
||||
<v-popover class="filter-container">
|
||||
<div class="filter">
|
||||
<Icon icon="price-tag4" />
|
||||
|
||||
|
|
@ -14,8 +14,7 @@
|
|||
>Tags</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div>
|
||||
<div slot="popover">
|
||||
<select
|
||||
v-model="mode"
|
||||
class="filter-mode"
|
||||
|
|
@ -60,8 +59,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</v-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
|
|
@ -47,7 +45,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
|
|
@ -62,7 +59,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/movies"
|
||||
custom
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
|
|
@ -82,7 +78,7 @@
|
|||
@click.stop="toggleSidebar"
|
||||
><Icon icon="menu" /></div>
|
||||
|
||||
<Tooltip>
|
||||
<v-popover>
|
||||
<div class="header-account">
|
||||
<div class="account">
|
||||
<Icon
|
||||
|
|
@ -92,8 +88,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<div class="menu">
|
||||
<div
|
||||
slot="popover"
|
||||
class="menu"
|
||||
>
|
||||
<ul class="menu-items noselect">
|
||||
<li class="menu-item disabled">
|
||||
<Icon icon="enter2" />Sign in
|
||||
|
|
@ -148,12 +146,11 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</Tooltip>
|
||||
</v-popover>
|
||||
|
||||
<Search class="search-full" />
|
||||
|
||||
<Tooltip
|
||||
<v-popover
|
||||
class="search-compact"
|
||||
:open="searching"
|
||||
@show="searching = true"
|
||||
|
|
@ -167,12 +164,12 @@
|
|||
/></button>
|
||||
|
||||
<Search
|
||||
slot="tooltip"
|
||||
slot="popover"
|
||||
:searching="searching"
|
||||
class="compact"
|
||||
@search="searching = false"
|
||||
/>
|
||||
</Tooltip>
|
||||
</v-popover>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="media">
|
||||
<div
|
||||
v-lazy-container
|
||||
class="media"
|
||||
>
|
||||
<div
|
||||
v-if="release.trailer || release.teaser"
|
||||
class="trailer-container"
|
||||
|
|
@ -30,9 +33,8 @@
|
|||
|
||||
<img
|
||||
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
|
||||
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
||||
:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
|
||||
:alt="release.title"
|
||||
loading="lazy"
|
||||
class="item trailer"
|
||||
>
|
||||
|
||||
|
|
@ -63,11 +65,10 @@
|
|||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
:src="`/media/${cover.thumbnail}`"
|
||||
:style="{ background: sfw ? `/media/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
|
||||
:data-src="`/media/${cover.thumbnail}`"
|
||||
:data-loading="`/media/${cover.lazy}`"
|
||||
class="item cover"
|
||||
loading="lazy"
|
||||
@load="$emit('load', $event)"
|
||||
@load="$parent.$emit('load')"
|
||||
>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -85,12 +86,11 @@
|
|||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:style="{ background: sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
|
||||
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
|
||||
:alt="`Photo ${photo.index + 1}`"
|
||||
loading="lazy"
|
||||
class="item"
|
||||
@load="$emit('load', $event)"
|
||||
@load="$parent.$emit('load')"
|
||||
>
|
||||
|
||||
<span
|
||||
|
|
@ -139,10 +139,6 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
test: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -163,8 +159,15 @@ export default {
|
|||
.media {
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
font-size: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
|
||||
|
|
@ -246,7 +249,6 @@ export default {
|
|||
height: 18rem;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.trailer-container {
|
||||
|
|
|
|||
|
|
@ -11,14 +11,12 @@
|
|||
/>
|
||||
|
||||
<Scroll
|
||||
v-slot="slotProps"
|
||||
class="scroll-light"
|
||||
:expandable="false"
|
||||
>
|
||||
<Media
|
||||
:release="release"
|
||||
:class="{ expanded }"
|
||||
@load="slotProps.loaded"
|
||||
/>
|
||||
</Scroll>
|
||||
|
||||
|
|
@ -58,7 +56,10 @@
|
|||
</div>
|
||||
|
||||
<div class="row associations">
|
||||
<ul class="actors nolist">
|
||||
<ul
|
||||
v-lazy-container="{ selector: '.lazy' }"
|
||||
class="actors nolist"
|
||||
>
|
||||
<li
|
||||
v-for="actor in release.actors"
|
||||
:key="actor.id"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<ul
|
||||
v-if="releases.length > 0"
|
||||
:key="sfw"
|
||||
v-lazy-container="{ selector: '.thumbnail' }"
|
||||
class="nolist tiles"
|
||||
>
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
>
|
||||
<img
|
||||
v-if="release.poster"
|
||||
:src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
|
||||
:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${release.poster.sfw.lazy}` : `/media/${release.poster.lazy}`"
|
||||
:alt="release.title"
|
||||
class="thumbnail"
|
||||
loading="lazy"
|
||||
>
|
||||
|
||||
<span
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
<img
|
||||
v-for="cover in release.covers"
|
||||
:key="cover.id"
|
||||
:src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
|
||||
:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
|
||||
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
|
||||
:alt="release.title"
|
||||
class="thumbnail cover"
|
||||
loading="lazy"
|
||||
>
|
||||
</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,12 +22,7 @@
|
|||
@click="scroll('left')"
|
||||
><Icon icon="arrow-left3" /></div>
|
||||
|
||||
<div
|
||||
ref="content"
|
||||
class="content"
|
||||
>
|
||||
<slot :loaded="loaded" />
|
||||
</div>
|
||||
<slot />
|
||||
|
||||
<div
|
||||
v-show="enabled && !expanded"
|
||||
|
|
@ -57,35 +52,34 @@
|
|||
import Expand from '../expand/expand.vue';
|
||||
|
||||
function updateScroll() {
|
||||
this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
|
||||
this.scrollAtStart = this.$refs.content.scrollLeft === 0;
|
||||
this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
|
||||
this.scrollable = this.target.scrollWidth > this.target.clientWidth;
|
||||
this.scrollAtStart = this.target.scrollLeft === 0;
|
||||
this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft;
|
||||
}
|
||||
|
||||
function scroll(direction) {
|
||||
if (direction === 'right') {
|
||||
this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
|
||||
this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100;
|
||||
}
|
||||
|
||||
if (direction === 'left') {
|
||||
this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
|
||||
this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100;
|
||||
}
|
||||
}
|
||||
|
||||
function loaded(_event) {
|
||||
// typically triggered by slotted component when an image loads, affecting scrollWidth
|
||||
this.updateScroll();
|
||||
}
|
||||
|
||||
function mounted() {
|
||||
this.$refs.content.addEventListener('scroll', () => this.updateScroll());
|
||||
this.target = this.$slots.default[0].elm;
|
||||
|
||||
this.target.addEventListener('scroll', () => this.updateScroll());
|
||||
window.addEventListener('resize', this.updateScroll);
|
||||
|
||||
// typically triggered by slotted component when an image loads, affecting scrollWidth
|
||||
this.$on('load', () => this.updateScroll());
|
||||
this.updateScroll();
|
||||
}
|
||||
|
||||
function beforeDestroy() {
|
||||
this.$refs.content.removeEventListener('scroll', this.updateScroll);
|
||||
this.target.removeEventListener('scroll', this.updateScroll);
|
||||
|
||||
window.removeEventListener('resize', this.updateScroll);
|
||||
}
|
||||
|
|
@ -114,6 +108,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
target: null,
|
||||
scrollable: true,
|
||||
scrollAtStart: true,
|
||||
scrollAtEnd: false,
|
||||
|
|
@ -124,7 +119,6 @@ export default {
|
|||
beforeDestroy,
|
||||
methods: {
|
||||
scroll,
|
||||
loaded,
|
||||
updateScroll,
|
||||
},
|
||||
};
|
||||
|
|
@ -149,16 +143,6 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-x: scroll;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.expand-light {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -249,14 +233,6 @@ export default {
|
|||
display: none;
|
||||
}
|
||||
|
||||
&.scroll-start {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.scroll-end {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/updates"
|
||||
custom
|
||||
@click.native="$emit('toggle', false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -56,7 +55,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/actors"
|
||||
custom
|
||||
@click.native="$emit('toggle', false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -72,7 +70,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/networks"
|
||||
custom
|
||||
@click.native="$emit('toggle', false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -88,7 +85,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/movies"
|
||||
custom
|
||||
@click.native="$emit('toggle', false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -104,7 +100,6 @@
|
|||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/tags"
|
||||
custom
|
||||
@click.native="$emit('toggle', false)"
|
||||
>
|
||||
<a
|
||||
|
|
@ -254,7 +249,7 @@ export default {
|
|||
fill: var(--primary);
|
||||
}
|
||||
|
||||
:deep(.search) {
|
||||
::v-deep .search {
|
||||
height: 3rem;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
<div
|
||||
:key="sfw"
|
||||
v-lazy-container
|
||||
class="tiles"
|
||||
>
|
||||
<Tag
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
<img
|
||||
v-if="!lazy && !sfw"
|
||||
:src="`/img/${tag.poster.thumbnail}`"
|
||||
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
|
||||
:title="tag.poster.comment"
|
||||
:alt="tag.name"
|
||||
class="poster"
|
||||
|
|
@ -20,7 +19,6 @@
|
|||
<img
|
||||
v-if="!lazy && sfw"
|
||||
:src="`/img/${tag.poster.sfw.thumbnail}`"
|
||||
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
|
||||
:title="tag.poster.sfw.comment"
|
||||
:alt="tag.name"
|
||||
class="poster"
|
||||
|
|
@ -28,21 +26,19 @@
|
|||
|
||||
<img
|
||||
v-if="lazy && !sfw"
|
||||
:src="`/img/${tag.poster.thumbnail}`"
|
||||
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
|
||||
:data-src="`/img/${tag.poster.thumbnail}`"
|
||||
:data-loading="`/img/${tag.poster.lazy}`"
|
||||
:title="tag.poster.comment"
|
||||
:alt="tag.name"
|
||||
loading="lazy"
|
||||
class="poster"
|
||||
>
|
||||
|
||||
<img
|
||||
v-if="lazy && sfw"
|
||||
:src="`/img/${tag.poster.sfw.thumbnail}`"
|
||||
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
|
||||
:data-src="`/img/${tag.poster.sfw.thumbnail}`"
|
||||
:data-loading="`/img/${tag.poster.sfw.lazy}`"
|
||||
:title="tag.poster.sfw.comment"
|
||||
:alt="tag.name"
|
||||
loading="lazy"
|
||||
class="poster"
|
||||
>
|
||||
</router-link>
|
||||
|
|
@ -103,11 +99,7 @@ export default {
|
|||
}
|
||||
|
||||
.poster {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 13.5rem;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<div class="tooltip-container">
|
||||
<div class="trigger">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<teleport to="body">
|
||||
<div class="tooltip">
|
||||
<div class="tooltip-wrapper">
|
||||
<slot name="tooltip" />
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tooltip-frame {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 2rem;
|
||||
background: var(--background-light);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,9 +12,6 @@ $breakpoint4: 1500px;
|
|||
--text-dark: #222;
|
||||
--text-light: #fff;
|
||||
|
||||
--background-light: #fff;
|
||||
--background-dark: #222;
|
||||
|
||||
--darken: rgba(0, 0, 0, .5);
|
||||
--darken-strong: rgba(0, 0, 0, .7);
|
||||
--darken-extreme: rgba(0, 0, 0, .9);
|
||||
|
|
@ -43,7 +40,7 @@ $breakpoint4: 1500px;
|
|||
--text: #222;
|
||||
--text-contrast: #fff;
|
||||
|
||||
--background: var(--background-light);
|
||||
--background: #fff;
|
||||
--background-dim: #fafafa;
|
||||
--background-soft: #fdfdfd;
|
||||
|
||||
|
|
@ -74,7 +71,7 @@ $breakpoint4: 1500px;
|
|||
--text: #fff;
|
||||
--text-contrast: #222;
|
||||
|
||||
--background: var(--background-dark);
|
||||
--background: #222;
|
||||
--background-dim: #181818;
|
||||
--background-soft: #111;
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@ body {
|
|||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nolist {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
const EventBus = new Vue();
|
||||
|
||||
export default EventBus;
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
import { createApp, reactive } from 'vue';
|
||||
import Vue from 'vue';
|
||||
import VTooltip from 'v-tooltip';
|
||||
import VueLazyLoad from 'vue-lazyload';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import router from './router';
|
||||
|
|
@ -12,11 +14,9 @@ import '../css/style.scss';
|
|||
import Container from '../components/container/container.vue';
|
||||
import Icon from '../components/icon/icon.vue';
|
||||
import Footer from '../components/footer/footer.vue';
|
||||
import Tooltip from '../components/tooltip/tooltip.vue';
|
||||
|
||||
async function init() {
|
||||
const store = initStore(reactive(router));
|
||||
const app = createApp(Container);
|
||||
function init() {
|
||||
const store = initStore(router);
|
||||
|
||||
initUiObservers(store, router);
|
||||
|
||||
|
|
@ -24,17 +24,10 @@ async function init() {
|
|||
store.dispatch('setSfw', true);
|
||||
}
|
||||
|
||||
app.use(store);
|
||||
app.use(router);
|
||||
|
||||
await router.isReady();
|
||||
|
||||
app.mixin({
|
||||
Vue.mixin({
|
||||
components: {
|
||||
Icon,
|
||||
Footer,
|
||||
Tooltip,
|
||||
'v-popover': Tooltip,
|
||||
},
|
||||
watch: {
|
||||
pageTitle(title) {
|
||||
|
|
@ -54,14 +47,23 @@ async function init() {
|
|||
},
|
||||
});
|
||||
|
||||
app.directive('tooltip', {
|
||||
beforeMount(el, binding) {
|
||||
// console.log(binding.modifiers);
|
||||
el.title = binding.value; // eslint-disable-line no-param-reassign
|
||||
Vue.use(VTooltip, {
|
||||
popover: {
|
||||
defaultContainer: '.container',
|
||||
},
|
||||
});
|
||||
Vue.use(VueLazyLoad, {
|
||||
throttleWait: 0,
|
||||
});
|
||||
|
||||
app.mount('#container');
|
||||
new Vue({ // eslint-disable-line no-new
|
||||
el: '#container',
|
||||
store,
|
||||
router,
|
||||
render(createElement) {
|
||||
return createElement(Container);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
init();
|
||||
|
|
|
|||
|
|
@ -1 +1,14 @@
|
|||
export default {};
|
||||
import Vue from 'vue';
|
||||
|
||||
function setCache(state, { target, releases }) {
|
||||
Vue.set(state.cache, target, releases);
|
||||
}
|
||||
|
||||
function deleteCache(state, target) {
|
||||
Vue.delete(state.cache, target);
|
||||
}
|
||||
|
||||
export default {
|
||||
setCache,
|
||||
deleteCache,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
import Home from '../components/home/home.vue';
|
||||
import Release from '../components/releases/release.vue';
|
||||
|
|
@ -13,6 +14,8 @@ import Search from '../components/search/search.vue';
|
|||
import Stats from '../components/stats/stats.vue';
|
||||
import NotFound from '../components/errors/404.vue';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -181,15 +184,15 @@ const routes = [
|
|||
component: NotFound,
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)',
|
||||
path: '*',
|
||||
redirect: {
|
||||
name: 'not-found',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
|
||||
import initUiStore from './ui/ui';
|
||||
|
|
@ -8,6 +9,8 @@ import initActorsStore from './actors/actors';
|
|||
import initTagsStore from './tags/tags';
|
||||
|
||||
function initStore(router) {
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store();
|
||||
|
||||
store.registerModule('ui', initUiStore(store, router));
|
||||
|
|
|
|||
|
|
@ -1,13 +1,4 @@
|
|||
function initUiObservers(store, _router) {
|
||||
const body = document.querySelector('body');
|
||||
|
||||
body.classList.add(store.state.ui.theme);
|
||||
|
||||
store.watch(state => state.ui.theme, (newTheme, oldTheme) => {
|
||||
body.classList.add(newTheme);
|
||||
body.classList.remove(oldTheme);
|
||||
});
|
||||
|
||||
document.addEventListener('keypress', (event) => {
|
||||
if (event.target.tagName === 'INPUT') {
|
||||
return;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
|
|
@ -43,12 +43,11 @@
|
|||
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
|
||||
"@babel/preset-env": "^7.8.4",
|
||||
"@babel/register": "^7.8.3",
|
||||
"@vue/compiler-sfc": "^3.0.4",
|
||||
"autoprefixer": "^9.7.4",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-preset-airbnb": "^3.3.2",
|
||||
"css-loader": "^5.0.1",
|
||||
"css-loader": "^2.1.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-config-airbnb": "^17.1.1",
|
||||
"eslint-config-airbnb-base": "^13.2.0",
|
||||
|
|
@ -58,14 +57,15 @@
|
|||
"eslint-plugin-react": "^7.18.3",
|
||||
"eslint-plugin-vue": "^6.2.1",
|
||||
"eslint-watch": "^4.0.2",
|
||||
"mini-css-extract-plugin": "^1.3.3",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"node-sass": "^4.13.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"raw-loader": "^4.0.2",
|
||||
"raw-loader": "^2.0.0",
|
||||
"sass-loader": "^7.3.1",
|
||||
"style-loader": "^0.23.1",
|
||||
"vue-loader": "^16.1.2",
|
||||
"webpack": "^5.11.0",
|
||||
"vue-loader": "^15.9.0",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.41.6",
|
||||
"webpack-cli": "^3.3.11"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -126,9 +126,10 @@
|
|||
"tunnel": "0.0.6",
|
||||
"url-pattern": "^1.0.3",
|
||||
"v-tooltip": "^2.0.3",
|
||||
"vue": "^3.0.4",
|
||||
"vue-router": "^4.0.1",
|
||||
"vuex": "^4.0.0-rc.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuex": "^3.1.2",
|
||||
"winston": "^3.2.1",
|
||||
"winston-daily-rotate-file": "^4.4.2",
|
||||
"yargs": "^13.3.0"
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 440 KiB After Width: | Height: | Size: 529 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 440 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 529 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const { VueLoaderPlugin } = require('vue-loader');
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
|
|
@ -42,13 +42,7 @@ module.exports = {
|
|||
test: /\.scss$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
url: false,
|
||||
},
|
||||
},
|
||||
'css-loader?sourceMap',
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue