Compare commits

..

2 Commits

Author SHA1 Message Date
ThePendulum f38be7a706 Added components. 2020-05-22 00:55:11 +02:00
ThePendulum c3de881a2c Always showing actor photos horizontally. 2020-05-21 04:27:45 +02:00
9 changed files with 164 additions and 196 deletions

View File

@ -285,20 +285,12 @@
</div>
<div class="actor-content">
<Releases :releases="actor.releases" />
<div
<Photos
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
class="photos-container"
>
<Photos :actor="actor" />
:actor="actor"
/>
<Photos
:actor="actor"
:class="{ expanded }"
class="compact"
/>
</div>
<Releases :releases="actor.releases" />
</div>
</div>
</div>
@ -326,10 +318,6 @@ async function route() {
await this.fetchActor();
}
function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() {
await this.fetchActor();
@ -363,7 +351,6 @@ export default {
mounted,
methods: {
fetchActor,
scrollPhotos,
},
};
</script>
@ -429,7 +416,6 @@ export default {
}
.avatar-link {
font-size: 0;
padding: 0 0 1rem 1rem;
flex-shrink: 0;
}
@ -437,6 +423,7 @@ export default {
.avatar {
height: 100%;
flex-shrink: 0;
border: solid 3px var(--lighten-hint);
margin: 0 .5rem 0 0;
}
}
@ -613,7 +600,7 @@ export default {
.actor-content {
display: flex;
flex-grow: 1;
flex-direction: row;
flex-direction: column;
}
.heading {
@ -621,13 +608,6 @@ export default {
margin: 0 0 1rem 0;
}
.photos-container {
box-sizing: border-box;
border-left: solid 1px $shadow-hint;
padding: 1rem 1rem 1rem 1.5rem;
margin: 0 0 0 .5rem;
}
.photos.compact {
display: none;
}
@ -660,20 +640,6 @@ export default {
.actor-content {
flex-direction: column;
}
.photos-container {
border: none;
border-bottom: solid 1px $shadow-hint;
margin: 0 0 .5rem 0;
}
.photos {
display: none;
}
.photos.compact {
display: flex;
}
}
@media(max-width: $breakpoint) {

View File

@ -155,7 +155,7 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-gap: 0 .5rem;
padding: 1rem;
flex-grow: 1;

View File

@ -1,7 +1,12 @@
<template>
<div
v-lazy-container
class="photos"
:class="{ wide: actor.photos.length > 2 }"
:class="{
avatar: !!actor.avatar,
empty: actor.photos.length === 0,
wide: actor.photos.length > 2
}"
>
<a
v-if="actor.avatar"
@ -11,7 +16,8 @@
class="avatar-link photo-link"
>
<img
:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
: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.copyright && `© ${actor.avatar.copyright}`"
class="avatar photo"
>
@ -26,7 +32,8 @@
class="photo-link"
>
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:title="photo.copyright && `© ${photo.copyright}`"
class="photo"
>
@ -56,59 +63,48 @@ export default {
@import 'theme';
.photos {
display: inline-grid;
grid-template-columns: repeat(auto-fit, 12rem);
grid-gap: .5rem;
width: 100%;
display: flex;
box-sizing: border-box;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
font-size: 0;
overflow-x: scroll;
scrollbar-width: none;
&.empty {
display: none;
}
.avatar-link {
display: none;
}
&.compact {
.photo {
width: auto;
}
}
&::-webkit-scrollbar {
display: none;
}
}
.photo-link {
height: 16rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
}
.photo {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 0 3px $shadow-weak;
}
@media(min-width: $breakpoint3) {
.photos.wide {
max-width: 30vw;
}
}
@media(max-width: $breakpoint3) {
.photos {
width: 100%;
max-width: 100%;
display: flex;
overflow-x: scroll;
scrollbar-width: none;
.photos {
&.empty.avatar {
display: flex;
}
.avatar-link {
display: inline-block;
}
&::-webkit-scrollbar {
display: none;
}
}
.photo-link {
height: 15rem;
flex-shrink: 0;
margin: 0 .5rem 0 0;
.avatar-link {
display: inline-block;
}
}
}
</style>

View File

@ -1,139 +1,139 @@
<template>
<div
class="banner"
@wheel.prevent="scrollBanner"
>
<div class="trailer">
<video
v-if="release.trailer"
:src="`/media/${release.trailer.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title"
:class="{ sfw: sfw && paused }"
class="item trailer-video"
controls
@playing="playing = true; paused = false;"
@pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video>
<div
class="banner"
@wheel.prevent="scrollBanner"
>
<div class="trailer">
<video
v-if="release.trailer"
:src="`/media/${release.trailer.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title"
:class="{ sfw: sfw && paused }"
class="item trailer-video"
controls
@playing="playing = true; paused = false;"
@pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video>
<video
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
:src="`/media/${release.teaser.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title"
:class="{ sfw: sfw && paused }"
class="item trailer-video"
controls
@playing="playing = true; paused = false;"
@pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video>
<video
v-else-if="release.teaser && /^video\//.test(release.teaser.mime)"
:src="`/media/${release.teaser.path}`"
:poster="release.poster && (sfw ? `/img/${release.poster.sfw.thumbnail}` : `/media/${release.poster.thumbnail}`)"
:alt="release.title"
:class="{ sfw: sfw && paused }"
class="item trailer-video"
controls
@playing="playing = true; paused = false;"
@pause="playing = false; paused = true;"
>Sorry, the tailer cannot be played in your browser</video>
<img
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:alt="release.title"
class="item trailer-video"
>
<img
v-else-if="release.teaser && /^image\//.test(release.teaser.mime)"
:src="sfw ? `/img/${release.teaser.sfw.thumbnail}` : `/media/${release.teaser.path}`"
:alt="release.title"
class="item trailer-video"
>
<a
v-if="release.poster"
:href="`/media/${release.poster.path}`"
:class="{ playing }"
target="_blank"
rel="noopener noreferrer"
class="poster-link"
><Icon icon="image" /></a>
<a
v-if="release.poster"
:href="`/media/${release.poster.path}`"
:class="{ playing }"
target="_blank"
rel="noopener noreferrer"
class="poster-link"
><Icon icon="image" /></a>
<span
v-if="sfw && !playing"
class="warning"
>
<Icon icon="warning2" />NSFW
</span>
</div>
<span
v-if="sfw && !playing"
class="warning"
>
<Icon icon="warning2" />NSFW
</span>
</div>
<template v-if="release.covers && release.covers.length > 0">
<a
v-for="cover in release.covers"
:key="`cover-${cover.id}`"
:href="`/media/${cover.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/media/${cover.thumbnail}`"
class="item cover"
>
</a>
</template>
<template v-if="release.covers && release.covers.length > 0">
<a
v-for="cover in release.covers"
:key="`cover-${cover.id}`"
:href="`/media/${cover.path}`"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="`/media/${cover.thumbnail}`"
class="item cover"
>
</a>
</template>
<a
v-for="photo in photos"
:key="`banner-${photo.index}`"
:href="`/media/${photo.path}`"
:class="{ sfw }"
class="item-link"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:alt="`Photo ${photo.index + 1}`"
class="item"
>
<a
v-for="photo in photos"
:key="`banner-${photo.index}`"
:href="`/media/${photo.path}`"
:class="{ sfw }"
class="item-link"
target="_blank"
rel="noopener noreferrer"
>
<img
:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
:alt="`Photo ${photo.index + 1}`"
class="item"
>
<span
v-if="sfw"
class="warning"
>
<Icon icon="warning2" />NSFW
</span>
</a>
</div>
<span
v-if="sfw"
class="warning"
>
<Icon icon="warning2" />NSFW
</span>
</a>
</div>
</template>
<script>
function sfw() {
return this.$store.state.ui.sfw;
return this.$store.state.ui.sfw;
}
function photos() {
if (this.release.trailer || this.release.teaser) {
// poster will be on trailer video
return this.release.photos;
}
if (this.release.trailer || this.release.teaser) {
// poster will be on trailer video
return this.release.photos;
}
if (this.release.poster) {
return [this.release.poster].concat(this.release.photos);
}
if (this.release.poster) {
return [this.release.poster].concat(this.release.photos);
}
return this.release.photos;
return this.release.photos;
}
function scrollBanner(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
export default {
props: {
release: {
type: Object,
default: null,
},
},
data() {
return {
playing: false,
paused: false,
};
},
computed: {
photos,
sfw,
},
methods: {
scrollBanner,
},
props: {
release: {
type: Object,
default: null,
},
},
data() {
return {
playing: false,
paused: false,
};
},
computed: {
photos,
sfw,
},
methods: {
scrollBanner,
},
};
</script>

View File

@ -3,8 +3,6 @@
v-if="release"
class="content"
>
<Banner :release="release" />
<div class="details">
<div class="column">
<a
@ -95,6 +93,8 @@
</div>
</div>
<Banner :release="release" />
<div class="info column">
<h2 class="row title">{{ release.title }}</h2>

View File

@ -101,9 +101,15 @@ export default {
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
grid-gap: 0 .5rem;
flex-grow: 1;
margin: 0 0 1rem 0;
}
@media(max-width: $breakpoint0) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -49,7 +49,7 @@ function scrapePhotos(html, type) {
async function getPhotosLegacy(entryId, site, type = 'highres', page = 1) {
const albumUrl = `${site.url}/trial/gallery.php?id=${entryId}&type=${type}&page=${page}`;
logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`);
// logger.warn(`Jules Jordan is using legacy photo scraper for ${albumUrl} (page ${page})`);
const html = await fetchPhotos(albumUrl);
const $ = cheerio.load(html, { normalizeWhitespace: true });