DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Fixed scroll component so it uses slot props instead of the depcrecated .

This commit is contained in:
DebaucheryLibrarian 2020-12-26 23:51:27 +01:00
parent ced8f447a7
commit c503e12adb
32 changed files with 1421 additions and 1538 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/components/actors/actors.vue
View File

@ -63,10 +63,7 @@
:items-per-page="limit" :items-per-page="limit"
/> />
<div <div class="tiles">
v-lazy-container="{ selector: '.lazy' }"
class="tiles"
>
<Actor <Actor
v-for="actor in actors" v-for="actor in actors"
:key="`actor-${actor.id}`" :key="`actor-${actor.id}`"

16
assets/components/actors/photos.vue
View File

@ -16,9 +16,9 @@
> >
<img <img
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`" :src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-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-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
:title="actor.avatar.credit && `© ${actor.avatar.credit}`" :title="actor.avatar.credit && `© ${actor.avatar.credit}`"
loading="lazy"
class="avatar photo" class="avatar photo"
@load="$parent.$emit('load')" @load="$parent.$emit('load')"
> >
@ -34,9 +34,9 @@
> >
<img <img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:title="`© ${photo.credit || photo.entity.name}`" :title="`© ${photo.credit || photo.entity.name}`"
loading="lazy"
class="photo" class="photo"
@load="$parent.$emit('load')" @load="$parent.$emit('load')"
> >
@ -76,9 +76,6 @@ export default {
padding: .5rem 1rem; padding: .5rem 1rem;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
font-size: 0; font-size: 0;
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&.expanded { &.expanded {
flex-wrap: wrap; flex-wrap: wrap;
@ -101,10 +98,6 @@ export default {
.avatar-link { .avatar-link {
display: none; display: none;
} }
&::-webkit-scrollbar {
display: none;
}
} }
.photo-link { .photo-link {
@ -115,6 +108,7 @@ export default {
height: 15rem; height: 15rem;
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);
object-fit: cover; object-fit: cover;
background-size: cover;
} }
@media(max-width: $breakpoint3) { @media(max-width: $breakpoint3) {

8
assets/components/actors/tile.vue
View File

@ -45,9 +45,10 @@
<div class="avatar-container"> <div class="avatar-container">
<img <img
v-if="actor.avatar" v-if="actor.avatar"
:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`" :src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`" :style="{ 'background-image': sfw ? `url(/img/${actor.avatar.sfw.lazy})`: `url(/img/${actor.avatar.lazy})` }"
class="avatar lazy" loading="lazy"
class="avatar"
> >
<span <span
@ -232,6 +233,7 @@ export default {
justify-content: center; justify-content: center;
object-fit: cover; object-fit: cover;
object-position: 50% 0; object-position: 50% 0;
background-size: cover;
} }
.avatar-fallback { .avatar-fallback {

9
assets/components/container/container.vue
View File

@ -28,8 +28,6 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import EventBus from '../../js/event-bus';
import Warning from './warning.vue'; import Warning from './warning.vue';
import Header from '../header/header.vue'; import Header from '../header/header.vue';
import Sidebar from '../sidebar/sidebar.vue'; import Sidebar from '../sidebar/sidebar.vue';
@ -49,12 +47,6 @@ async function setConsent(consent) {
} }
} }
function mounted() {
document.addEventListener('click', () => {
EventBus.$emit('blur');
});
}
export default { export default {
components: { components: {
Header, Header,
@ -72,7 +64,6 @@ export default {
theme, theme,
}), }),
}, },
mounted,
methods: { methods: {
toggleSidebar, toggleSidebar,
setConsent, setConsent,

4
assets/components/entities/entity.vue
View File

@ -113,7 +113,7 @@
</template> </template>
<script> <script>
import Vue from 'vue'; import { nextTick } from 'vue';
import FilterBar from '../filters/filter-bar.vue'; import FilterBar from '../filters/filter-bar.vue';
import Pagination from '../pagination/pagination.vue'; import Pagination from '../pagination/pagination.vue';
@ -135,7 +135,7 @@ async function fetchEntity() {
this.pageTitle = entity.name; this.pageTitle = entity.name;
Vue.nextTick(() => { nextTick(() => {
this.$refs.content.scrollTop = 0; this.$refs.content.scrollTop = 0;
}); });
} }

2
assets/components/filters/filter-bar.vue
View File

@ -20,6 +20,7 @@
>New</router-link> >New</router-link>
</div> </div>
<!--
<div class="filters"> <div class="filters">
<ActorFilter <ActorFilter
class="filters-filter" class="filters-filter"
@ -39,6 +40,7 @@
:available-tags="availableTags" :available-tags="availableTags"
/> />
</div> </div>
-->
</div> </div>
</template> </template>

105
assets/components/header/header.vue
View File

@ -88,64 +88,63 @@
</div> </div>
</div> </div>
<div <template v-slot:popover>
slot="popover" <div class="menu">
class="menu" <ul class="menu-items noselect">
> <li class="menu-item disabled">
<ul class="menu-items noselect"> <Icon icon="enter2" />Sign in
<li class="menu-item disabled"> </li>
<Icon icon="enter2" />Sign in
</li>
<li <li
v-show="!sfw" v-show="!sfw"
class="menu-item" class="menu-item"
@click="setSfw(true)" @click="setSfw(true)"
> >
<Icon <Icon
icon="flower" icon="flower"
class="toggle noselect" class="toggle noselect"
/>Safe mode />Safe mode
</li> </li>
<li <li
v-show="sfw" v-show="sfw"
class="menu-item" class="menu-item"
@click="setSfw(false)" @click="setSfw(false)"
> >
<Icon <Icon
icon="fire" icon="fire"
class="toggle noselect" class="toggle noselect"
/>Filth mode />Filth mode
</li> </li>
<li <li
v-show="theme === 'light'" v-show="theme === 'light'"
class="menu-item" class="menu-item"
@click="setTheme('dark')" @click="setTheme('dark')"
> >
<Icon <Icon
icon="moon" icon="moon"
class="toggle noselect" class="toggle noselect"
/>Dark theme />Dark theme
</li> </li>
<li <li
v-show="theme === 'dark'" v-show="theme === 'dark'"
class="menu-item" class="menu-item"
@click="setTheme('light')" @click="setTheme('light')"
> >
<Icon <Icon
icon="sun" icon="sun"
class="toggle noselect" class="toggle noselect"
/>Light theme />Light theme
</li> </li>
<li class="menu-item"> <li class="menu-item">
<Icon icon="filter" />Filters <Icon icon="filter" />Filters
</li> </li>
</ul> </ul>
</div> </div>
</template>
</v-popover> </v-popover>
<Search class="search-full" /> <Search class="search-full" />

34
assets/components/releases/media.vue
View File

@ -1,8 +1,5 @@
<template> <template>
<div <div class="media">
v-lazy-container
class="media"
>
<div <div
v-if="release.trailer || release.teaser" v-if="release.trailer || release.teaser"
class="trailer-container" class="trailer-container"
@ -33,8 +30,9 @@
<img <img
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)" v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:data-src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`" :src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:alt="release.title" :alt="release.title"
loading="lazy"
class="item trailer" class="item trailer"
> >
@ -65,10 +63,11 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img <img
:data-src="`/media/${cover.thumbnail}`" :src="`/media/${cover.thumbnail}`"
:data-loading="`/media/${cover.lazy}`" :style="{ background: sfw ? `/media/${cover.sfw.lazy}` : `/media/${cover.lazy}` }"
class="item cover" class="item cover"
@load="$parent.$emit('load')" loading="lazy"
@load="$emit('load', $event)"
> >
</a> </a>
</template> </template>
@ -86,11 +85,12 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<img <img
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`" :src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`" :style="{ background: sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
:alt="`Photo ${photo.index + 1}`" :alt="`Photo ${photo.index + 1}`"
loading="lazy"
class="item" class="item"
@load="$parent.$emit('load')" @load="$emit('load', $event)"
> >
<span <span
@ -139,6 +139,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
test: {
type: String,
default: null,
},
}, },
data() { data() {
return { return {
@ -159,15 +163,8 @@ export default {
.media { .media {
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
font-size: 0; font-size: 0;
&::-webkit-scrollbar {
display: none;
}
&.expanded { &.expanded {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
@ -249,6 +246,7 @@ export default {
height: 18rem; height: 18rem;
max-width: 100%; max-width: 100%;
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--shadow-weak);
background-size: cover;
} }
.trailer-container { .trailer-container {

7
assets/components/releases/release.vue
View File

@ -11,12 +11,14 @@
/> />
<Scroll <Scroll
v-slot="slotProps"
class="scroll-light" class="scroll-light"
:expandable="false" :expandable="false"
> >
<Media <Media
:release="release" :release="release"
:class="{ expanded }" :class="{ expanded }"
@load="slotProps.loaded"
/> />
</Scroll> </Scroll>
@ -56,10 +58,7 @@
</div> </div>
<div class="row associations"> <div class="row associations">
<ul <ul class="actors nolist">
v-lazy-container="{ selector: '.lazy' }"
class="actors nolist"
>
<li <li
v-for="actor in release.actors" v-for="actor in release.actors"
:key="actor.id" :key="actor.id"

1
assets/components/releases/releases.vue
View File

@ -8,7 +8,6 @@
<ul <ul
v-if="releases.length > 0" v-if="releases.length > 0"
:key="sfw" :key="sfw"
v-lazy-container="{ selector: '.thumbnail' }"
class="nolist tiles" class="nolist tiles"
> >
<li <li

8
assets/components/releases/scene-tile.vue
View File

@ -13,10 +13,10 @@
> >
<img <img
v-if="release.poster" v-if="release.poster"
:data-src="sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`" :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" :alt="release.title"
class="thumbnail" class="thumbnail"
loading="lazy"
> >
<span <span
@ -26,10 +26,10 @@
<img <img
v-for="cover in release.covers" v-for="cover in release.covers"
:key="cover.id" :key="cover.id"
:data-src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`" :src="sfw ? `/img/${cover.sfw.thumbnail}` : `/media/${cover.thumbnail}`"
:data-loading="sfw ? `/img/${cover.sfw.lazy}` : `/media/${cover.lazy}`"
:alt="release.title" :alt="release.title"
class="thumbnail cover" class="thumbnail cover"
loading="lazy"
> >
</span> </span>

50
assets/components/scroll/scroll.vue
View File

@ -22,7 +22,12 @@
@click="scroll('left')" @click="scroll('left')"
><Icon icon="arrow-left3" /></div> ><Icon icon="arrow-left3" /></div>
<slot /> <div
ref="content"
class="content"
>
<slot :loaded="loaded" />
</div>
<div <div
v-show="enabled && !expanded" v-show="enabled && !expanded"
@ -52,34 +57,35 @@
import Expand from '../expand/expand.vue'; import Expand from '../expand/expand.vue';
function updateScroll() { function updateScroll() {
this.scrollable = this.target.scrollWidth > this.target.clientWidth; this.scrollable = this.$refs.content.scrollWidth > this.$refs.content.clientWidth;
this.scrollAtStart = this.target.scrollLeft === 0; this.scrollAtStart = this.$refs.content.scrollLeft === 0;
this.scrollAtEnd = this.target.scrollWidth - this.target.clientWidth === this.target.scrollLeft; this.scrollAtEnd = this.$refs.content.scrollWidth - this.$refs.content.clientWidth === this.$refs.content.scrollLeft;
} }
function scroll(direction) { function scroll(direction) {
if (direction === 'right') { if (direction === 'right') {
this.target.scrollLeft = this.target.scrollLeft + this.target.clientWidth - 100; this.$refs.content.scrollLeft = this.$refs.content.scrollLeft + this.$refs.content.clientWidth - 100;
} }
if (direction === 'left') { if (direction === 'left') {
this.target.scrollLeft = this.target.scrollLeft - this.target.clientWidth + 100; this.$refs.content.scrollLeft = this.$refs.content.scrollLeft - this.$refs.content.clientWidth + 100;
} }
} }
function mounted() { function loaded(_event) {
this.target = this.$slots.default[0].elm; // typically triggered by slotted component when an image loads, affecting scrollWidth
this.updateScroll();
}
this.target.addEventListener('scroll', () => this.updateScroll()); function mounted() {
this.$refs.content.addEventListener('scroll', () => this.updateScroll());
window.addEventListener('resize', 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(); this.updateScroll();
} }
function beforeDestroy() { function beforeDestroy() {
this.target.removeEventListener('scroll', this.updateScroll); this.$refs.content.removeEventListener('scroll', this.updateScroll);
window.removeEventListener('resize', this.updateScroll); window.removeEventListener('resize', this.updateScroll);
} }
@ -108,7 +114,6 @@ export default {
}, },
data() { data() {
return { return {
target: null,
scrollable: true, scrollable: true,
scrollAtStart: true, scrollAtStart: true,
scrollAtEnd: false, scrollAtEnd: false,
@ -119,6 +124,7 @@ export default {
beforeDestroy, beforeDestroy,
methods: { methods: {
scroll, scroll,
loaded,
updateScroll, updateScroll,
}, },
}; };
@ -143,6 +149,16 @@ export default {
position: relative; position: relative;
} }
.content {
overflow-x: scroll;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.expand-light { .expand-light {
display: none; display: none;
} }
@ -233,6 +249,14 @@ export default {
display: none; display: none;
} }
&.scroll-start {
left: 0;
}
&.scroll-end {
right: 0;
}
&:hover { &:hover {
display: flex; display: flex;
cursor: pointer; cursor: pointer;

2
assets/components/sidebar/sidebar.vue
View File

@ -249,7 +249,7 @@ export default {
fill: var(--primary); fill: var(--primary);
} }
::v-deep .search { :deep(.search) {
height: 3rem; height: 3rem;
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--shadow-hint);
padding: 0; padding: 0;

1
assets/components/tags/tags.vue
View File

@ -9,7 +9,6 @@
<div <div
:key="sfw" :key="sfw"
v-lazy-container
class="tiles" class="tiles"
> >
<Tag <Tag

16
assets/components/tags/tile.vue
View File

@ -11,6 +11,7 @@
<img <img
v-if="!lazy && !sfw" v-if="!lazy && !sfw"
:src="`/img/${tag.poster.thumbnail}`" :src="`/img/${tag.poster.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="tag.poster.comment" :title="tag.poster.comment"
:alt="tag.name" :alt="tag.name"
class="poster" class="poster"
@ -19,6 +20,7 @@
<img <img
v-if="!lazy && sfw" v-if="!lazy && sfw"
:src="`/img/${tag.poster.sfw.thumbnail}`" :src="`/img/${tag.poster.sfw.thumbnail}`"
:style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment" :title="tag.poster.sfw.comment"
:alt="tag.name" :alt="tag.name"
class="poster" class="poster"
@ -26,19 +28,21 @@
<img <img
v-if="lazy && !sfw" v-if="lazy && !sfw"
:data-src="`/img/${tag.poster.thumbnail}`" :src="`/img/${tag.poster.thumbnail}`"
:data-loading="`/img/${tag.poster.lazy}`" :style="{ 'background-image': `url(/img/${tag.poster.lazy})` }"
:title="tag.poster.comment" :title="tag.poster.comment"
:alt="tag.name" :alt="tag.name"
loading="lazy"
class="poster" class="poster"
> >
<img <img
v-if="lazy && sfw" v-if="lazy && sfw"
:data-src="`/img/${tag.poster.sfw.thumbnail}`" :src="`/img/${tag.poster.sfw.thumbnail}`"
:data-loading="`/img/${tag.poster.sfw.lazy}`" :style="{ 'background-image': `url(/img/${tag.poster.sfw.lazy})` }"
:title="tag.poster.sfw.comment" :title="tag.poster.sfw.comment"
:alt="tag.name" :alt="tag.name"
loading="lazy"
class="poster" class="poster"
> >
</router-link> </router-link>
@ -99,7 +103,11 @@ export default {
} }
.poster { .poster {
display: inline-block;
width: 100%; width: 100%;
height: 13.5rem;
object-fit: cover;
background-size: cover;
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);
} }

27
assets/components/tooltip/tooltip.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<div class="tooltip-container">
<div class="trigger">
<slot />
</div>
<div class="tooltip">
<div class="tooltip-wrapper">
<slot name="popover" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.tooltip-container {
position: relative;
font-size: 1rem;
}
.tooltip {
position: absolute;
z-index: 10;
top: 2rem;
background: var(--background);
}
</style>

4
assets/css/style.scss
View File

@ -13,6 +13,10 @@ body {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
#container {
height: 100%;
}
.nolist { .nolist {
list-style: none; list-style: none;
padding: 0; padding: 0;

5
assets/js/event-bus.js
View File

@ -1,5 +0,0 @@
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

36
assets/js/main.js
View File

@ -1,6 +1,4 @@
import Vue from 'vue'; import { createApp } from 'vue';
import VTooltip from 'v-tooltip';
import VueLazyLoad from 'vue-lazyload';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import router from './router'; import router from './router';
@ -14,9 +12,11 @@ import '../css/style.scss';
import Container from '../components/container/container.vue'; import Container from '../components/container/container.vue';
import Icon from '../components/icon/icon.vue'; import Icon from '../components/icon/icon.vue';
import Footer from '../components/footer/footer.vue'; import Footer from '../components/footer/footer.vue';
import Tooltip from '../components/tooltip/tooltip.vue';
function init() { async function init() {
const store = initStore(router); const store = initStore(router);
const app = createApp(Container);
initUiObservers(store, router); initUiObservers(store, router);
@ -24,10 +24,17 @@ function init() {
store.dispatch('setSfw', true); store.dispatch('setSfw', true);
} }
Vue.mixin({ app.use(store);
app.use(router);
await router.isReady();
app.mixin({
components: { components: {
Icon, Icon,
Footer, Footer,
Tooltip,
'v-popover': Tooltip,
}, },
watch: { watch: {
pageTitle(title) { pageTitle(title) {
@ -47,23 +54,14 @@ function init() {
}, },
}); });
Vue.use(VTooltip, { app.directive('tooltip', {
popover: { beforeMount(el, binding) {
defaultContainer: '.container', // console.log(binding.modifiers);
el.title = binding.value; // eslint-disable-line no-param-reassign
}, },
}); });
Vue.use(VueLazyLoad, {
throttleWait: 0,
});
new Vue({ // eslint-disable-line no-new app.mount('#container');
el: '#container',
store,
router,
render(createElement) {
return createElement(Container);
},
});
} }
init(); init();

15
assets/js/releases/mutations.js
View File

@ -1,14 +1 @@
import Vue from 'vue'; export default {};
function setCache(state, { target, releases }) {
Vue.set(state.cache, target, releases);
}
function deleteCache(state, target) {
Vue.delete(state.cache, target);
}
export default {
setCache,
deleteCache,
};

11
assets/js/router.js
View File

@ -1,5 +1,4 @@
import Vue from 'vue'; import { createRouter, createWebHistory } from 'vue-router';
import VueRouter from 'vue-router';
import Home from '../components/home/home.vue'; import Home from '../components/home/home.vue';
import Release from '../components/releases/release.vue'; import Release from '../components/releases/release.vue';
@ -14,8 +13,6 @@ import Search from '../components/search/search.vue';
import Stats from '../components/stats/stats.vue'; import Stats from '../components/stats/stats.vue';
import NotFound from '../components/errors/404.vue'; import NotFound from '../components/errors/404.vue';
Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: '/', path: '/',
@ -184,15 +181,15 @@ const routes = [
component: NotFound, component: NotFound,
}, },
{ {
path: '*', path: '/:catchAll(.*)',
redirect: { redirect: {
name: 'not-found', name: 'not-found',
}, },
}, },
]; ];
const router = new VueRouter({ const router = createRouter({
mode: 'history', history: createWebHistory(),
routes, routes,
}); });

3
assets/js/store.js
View File

@ -1,4 +1,3 @@
import Vue from 'vue';
import Vuex from 'vuex'; import Vuex from 'vuex';
import initUiStore from './ui/ui'; import initUiStore from './ui/ui';
@ -9,8 +8,6 @@ import initActorsStore from './actors/actors';
import initTagsStore from './tags/tags'; import initTagsStore from './tags/tags';
function initStore(router) { function initStore(router) {
Vue.use(Vuex);
const store = new Vuex.Store(); const store = new Vuex.Store();
store.registerModule('ui', initUiStore(store, router)); store.registerModule('ui', initUiStore(store, router));

2561
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

19
package.json
View File

@ -43,11 +43,12 @@
"@babel/plugin-proposal-optional-chaining": "^7.8.3", "@babel/plugin-proposal-optional-chaining": "^7.8.3",
"@babel/preset-env": "^7.8.4", "@babel/preset-env": "^7.8.4",
"@babel/register": "^7.8.3", "@babel/register": "^7.8.3",
"@vue/compiler-sfc": "^3.0.4",
"autoprefixer": "^9.7.4", "autoprefixer": "^9.7.4",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"babel-preset-airbnb": "^3.3.2", "babel-preset-airbnb": "^3.3.2",
"css-loader": "^2.1.1", "css-loader": "^5.0.1",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1", "eslint-config-airbnb": "^17.1.1",
"eslint-config-airbnb-base": "^13.2.0", "eslint-config-airbnb-base": "^13.2.0",
@ -57,15 +58,14 @@
"eslint-plugin-react": "^7.18.3", "eslint-plugin-react": "^7.18.3",
"eslint-plugin-vue": "^6.2.1", "eslint-plugin-vue": "^6.2.1",
"eslint-watch": "^4.0.2", "eslint-watch": "^4.0.2",
"mini-css-extract-plugin": "^0.7.0", "mini-css-extract-plugin": "^1.3.3",
"node-sass": "^4.13.1", "node-sass": "^4.13.1",
"postcss-loader": "^3.0.0", "postcss-loader": "^3.0.0",
"raw-loader": "^2.0.0", "raw-loader": "^4.0.2",
"sass-loader": "^7.3.1", "sass-loader": "^7.3.1",
"style-loader": "^0.23.1", "style-loader": "^0.23.1",
"vue-loader": "^15.9.0", "vue-loader": "^16.1.2",
"vue-template-compiler": "^2.6.11", "webpack": "^5.11.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11" "webpack-cli": "^3.3.11"
}, },
"dependencies": { "dependencies": {
@ -126,10 +126,9 @@
"tunnel": "0.0.6", "tunnel": "0.0.6",
"url-pattern": "^1.0.3", "url-pattern": "^1.0.3",
"v-tooltip": "^2.0.3", "v-tooltip": "^2.0.3",
"vue": "^2.6.11", "vue": "^3.0.4",
"vue-lazyload": "^1.3.3", "vue-router": "^4.0.1",
"vue-router": "^3.1.6", "vuex": "^4.0.0-rc.2",
"vuex": "^3.1.2",
"winston": "^3.2.1", "winston": "^3.2.1",
"winston-daily-rotate-file": "^4.4.2", "winston-daily-rotate-file": "^4.4.2",
"yargs": "^13.3.0" "yargs": "^13.3.0"

BIN
public/img/tags/fake-boobs/7.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 KiB

After

Width:  |  Height:  |  Size: 440 KiB

BIN
public/img/tags/fake-boobs/7b.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 440 KiB

BIN
public/img/tags/fake-boobs/7c.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 529 KiB

BIN
public/img/tags/fake-boobs/lazy/7.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
public/img/tags/fake-boobs/lazy/7c.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/img/tags/fake-boobs/thumbs/7.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/img/tags/fake-boobs/thumbs/7c.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

10
webpack.config.js
View File

@ -1,6 +1,6 @@
const webpack = require('webpack'); const webpack = require('webpack');
const path = require('path'); const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
@ -42,7 +42,13 @@ module.exports = {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
'css-loader?sourceMap', {
loader: 'css-loader',
options: {
sourceMap: true,
url: false,
},
},
{ {
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {