Improved clip layout. Using format module for duration and time.

This commit is contained in:
DebaucheryLibrarian 2020-08-20 20:48:52 +02:00
parent 501e764c21
commit 552e6da392
5 changed files with 107 additions and 65 deletions

View File

@ -5,34 +5,38 @@
:key="`clip-${clip.id}`" :key="`clip-${clip.id}`"
class="clip" class="clip"
> >
<a <div class="clip-poster-container">
v-if="clip.poster" <a
:href="`/media/${clip.poster.path}`" v-if="clip.poster"
target="_blank" :href="`/media/${clip.poster.path}`"
rel="noopener noreferrer" target="_blank"
class="clip-poster-link" rel="noopener noreferrer"
>
<img
:src="`/media/${clip.poster.thumbnail}`"
class="clip-poster"
> >
</a> <img
:src="`/media/${clip.poster.thumbnail}`"
class="clip-poster"
>
</a>
<span
v-if="clip.duration"
class="clip-duration"
>{{ formatDuration(clip.duration) }}</span>
</div>
<div class="clip-info"> <div class="clip-info">
<div class="clip-header"> <h3
<h3 class="clip-title">{{ clip.title }}</h3> v-if="clip.title"
<span class="clip-row clip-title"
v-if="clip.duration" :title="clip.title"
class="clip-duration" >{{ clip.title }}</h3>
>{{ formatDuration(clip.duration) }}</span>
</div>
<p <p class="clip-row clip-description">{{ clip.description }}</p>
v-if="clip.description"
class="clip-description"
>{{ clip.description }}</p>
<Tags :tags="clip.tags" /> <Tags
:tags="clip.tags"
class="clip-row clip-tags"
/>
</div> </div>
</li> </li>
</ul> </ul>
@ -55,35 +59,66 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.clip { @import 'breakpoints';
.clips {
display: grid; display: grid;
grid-template-columns: .25fr .75fr; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
}
.clip {
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--shadow-weak);
margin: 0 0 .5rem 0; margin: 0 0 .5rem 0;
} }
.clip-poster-container {
position: relative;
margin: 0 0 1rem 0;
}
.clip-poster { .clip-poster {
width: 100%; width: 100%;
max-height: 100%; height: 10rem;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
} }
.clip-info { .clip-duration {
flex-grow: 1; color: var(--text-light);
padding: 1rem 1rem .5rem 1rem; display: block;
overflow: hidden; position: absolute;
bottom: 0;
left: 0;
padding: .5rem .5rem .75rem 1rem;
font-weight: bold;
text-shadow: 0 0 2px var(--darken-strong);
} }
.clip-header { .clip-info {
display: flex; padding: 0 1rem;
justify-content: space-between; }
.clip-row {
margin: 0 0 .75rem 0;
} }
.clip-title { .clip-title {
display: inline-block;
padding: 0; padding: 0;
margin: 0; font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.clip-description {
line-height: 1.5;
}
@media(max-width: $breakpoint-micro) {
.clips {
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
} }
</style> </style>

View File

@ -105,7 +105,9 @@ function sfw() {
} }
function photos() { function photos() {
const photosWithClipPosters = (this.release.photos || []).concat(this.release.clips ? this.release.clips.map(clip => clip.poster) : []); const clipPostersById = (this.release.clips || []).reduce((acc, clip) => ({ ...acc, [clip.poster.id]: clip.poster }), {});
const uniqueClipPosters = Array.from(new Set(this.release.clips.map(clip => clip.poster.id) || [])).map(posterId => clipPostersById[posterId]);
const photosWithClipPosters = (this.release.photos || []).concat(uniqueClipPosters);
if (this.release.trailer || this.release.teaser) { if (this.release.trailer || this.release.teaser) {
// poster will be on trailer video // poster will be on trailer video

29
assets/js/format.js Normal file
View File

@ -0,0 +1,29 @@
import dayjs from 'dayjs';
export function formatDuration(duration, forceHours) {
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
if (duration >= 3600 || forceHours) {
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
return `${formattedMinutes}:${formattedSeconds}`;
}
export function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
if (precision === 'year') {
const newFormat = format.match(/Y+/);
return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
}
if (precision === 'month') {
const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
}
return dayjs(date).format(format);
}

View File

@ -165,6 +165,7 @@ const releaseTrailerFragment = `
const releaseTeaserFragment = ` const releaseTeaserFragment = `
teaser: releasesTeaserByReleaseId { teaser: releasesTeaserByReleaseId {
media { media {
id
index index
path path
thumbnail thumbnail
@ -269,6 +270,7 @@ const releaseFragment = `
} }
poster: clipsPosterByClipId { poster: clipsPosterByClipId {
media { media {
id
index index
path path
thumbnail thumbnail
@ -297,6 +299,7 @@ const releaseFragment = `
slug slug
covers: moviesCovers { covers: moviesCovers {
media { media {
id
index index
path path
thumbnail thumbnail

View File

@ -5,43 +5,16 @@ import dayjs from 'dayjs';
import router from './router'; import router from './router';
import initStore from './store'; import initStore from './store';
import initUiObservers from './ui/observers'; import initUiObservers from './ui/observers';
import { formatDate, formatDuration } from './format';
import '../css/style.scss'; 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';
function formatDuration(duration, forceHours) {
const hours = Math.floor(duration / 3600);
const minutes = Math.floor((duration % 3600) / 60);
const seconds = Math.floor(duration % 60);
const [formattedHours, formattedMinutes, formattedSeconds] = [hours, minutes, seconds].map(segment => segment.toString().padStart(2, '0'));
if (duration >= 3600 || forceHours) {
return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
return `${formattedMinutes}:${formattedSeconds}`;
}
function formatDate(date, format = 'MMMM D, YYYY', precision = 'day') {
if (precision === 'year') {
const newFormat = format.match(/Y+/);
return dayjs(date).format(newFormat ? newFormat[0] : 'YYYY');
}
if (precision === 'month') {
const newFormat = format.match(/(M{1,4})|(Y{2,4})/g);
return dayjs(date).format(newFormat ? newFormat.join(' ') : 'MMMM YYYY');
}
return dayjs(date).format(format);
}
function init() { function init() {
const store = initStore(router); const store = initStore(router);