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

Improved scene page layout, increased watch button size.

This commit is contained in:
DebaucheryLibrarian 2024-06-07 05:46:31 +02:00
parent 044c8c0ce5
commit 2fadf98443
1 changed files with 44 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
pages/scene/+Page.vue
View File

@ -134,17 +134,19 @@
/> />
<div class="view"> <div class="view">
<!--
<button <button
v-if="scene.photos.length > 0" v-if="scene.photos.length > 0"
class="button view nolink" class="button view nolink"
>View photos</button> >View photos</button>
-->
<Link <Link
v-if="scene.url" v-if="scene.url"
:href="scene.url" :href="scene.url"
target="_blank" target="_blank"
class="button button-primary watch nolink" class="button button-primary watch nolink"
>Watch scene</Link> >Watch full video</Link>
</div> </div>
</div> </div>
</div> </div>
@ -245,18 +247,23 @@
class="detail" class="detail"
> >
<h3 class="heading">Quality</h3> <h3 class="heading">Quality</h3>
{{ scene.qualities.map((quality) => `${quality}p`).join(', ') }}
<template v-if="qualities[scene.qualities[0]]">{{ qualities[scene.qualities[0]] }} ({{ scene.qualities[0] }}p)</template>
<template v-else>{{ scene.qualities[0] }}p</template>
</div> </div>
</div> </div>
<div class="section details"> <div class="section details">
<div class="detail"> <div class="detail">
<h3 class="heading">Added</h3> <h3 class="heading">Added</h3>
<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
<span <span>
:title="`Batch ${scene.createdBatchId}`" <span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
class="added-batch" <span
>#{{ scene.createdBatchId }}</span> :title="`Batch ${scene.createdBatchId}`"
class="added-batch"
>#{{ scene.createdBatchId }}</span>
</span>
</div> </div>
<div <div
@ -314,6 +321,17 @@ const { scene } = pageProps;
const playing = ref(false); const playing = ref(false);
const paused = ref(false); const paused = ref(false);
const qualities = {
2160: '4K',
1440: 'Quad HD',
1080: 'Full HD',
720: 'HD',
576: 'PAL VHS',
540: 'qHD',
480: 'VGA',
360: 'nHD',
};
const poster = computed(() => { const poster = computed(() => {
if (scene.poster) { if (scene.poster) {
return getPath(scene.poster, 'thumbnail'); return getPath(scene.poster, 'thumbnail');
@ -560,13 +578,13 @@ function copySummary() {
.header { .header {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1rem .5rem .5rem .5rem; padding: 1rem .5rem 1rem .5rem;
} }
.title { .title {
margin: 0 .5rem 1rem 0; margin: .25rem .5rem .5rem 0;
line-height: 1.25; line-height: 1.25;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -602,12 +620,11 @@ function copySummary() {
display: flex; display: flex;
} }
/* .watch.button {
.watch { padding: .75rem 2rem;
background: var(--primary); margin-left: .25rem;
color: var(--text-light); font-size: 1rem;
} }
*/
.actors, .actors,
.tags { .tags {
@ -663,6 +680,12 @@ function copySummary() {
.details { .details {
display: flex; display: flex;
gap: 1rem 1.5rem; gap: 1rem 1.5rem;
flex-wrap: wrap;
}
.detail {
display: flex;
flex-direction: column;
} }
.description { .description {
@ -728,7 +751,7 @@ function copySummary() {
.actions { .actions {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
margin-bottom: 1.5rem; margin-bottom: 1.25rem;
} }
.title { .title {
@ -771,7 +794,11 @@ function copySummary() {
} }
.header { .header {
padding: 1rem .5rem 1.5rem .5rem; padding: 1rem .5rem .5rem .5rem;
}
.title {
margin-left: 1.5rem;
} }
.info { .info {