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

Added actor revision overviews to actor and user pages.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-10-23 01:28:54 +02:00
parent d0cf9bf5d0
commit 05bd7b703d
21 changed files with 424 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
components/actors/bio.vue
View File

@@ -12,6 +12,11 @@
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
class="avatar"
>
<span
v-if="actor.avatar?.credit"
class="avatar-credit"
>{{ actor.avatar.credit }}</span>
</div>
<ul class="bio nolist">
@@ -140,14 +145,14 @@
</li>
<li
v-if="!actor.naturalBoobs || !actor.naturalButt"
v-if="actor.naturalBoobs === false || actor.naturalButt === false"
class="bio-item augmentations"
>
<dfn class="bio-label"><Icon icon="magic-wand2" />Augmentations</dfn>
<dfn class="bio-label"><Icon icon="magic-wand2" />Enhanced</dfn>
<span class="bio-value">
<div
v-if="!actor.naturalBoobs"
v-if="actor.naturalBoobs === false"
:title="[actor.boobsVolume, augmentationMap[actor.boobsPlacement] || actor.boobsPlacement, augmentationMap[actor.boobsImplant] || actor.boobsImplant].filter(Boolean).join(' ')"
class="augmentations-section"
>Boobs<template v-if="actor.boobsVolume || actor.boobsImplant">:&nbsp;</template>
@@ -156,7 +161,7 @@
</div>
<div
v-if="!actor.naturalButt"
v-if="actor.naturalButt === false"
class="augmentations-section"
>Butt<template v-if="actor.buttVolume || actor.buttImplant">:&nbsp;</template>
<template v-if="actor.buttVolume">{{ actor.buttVolume }}cc</template>
@@ -258,21 +263,38 @@
<span v-else>Yes</span>
</li>
<li class="bio-item updated hideable">Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm') }}, ID: {{ actor.id }}</li>
<li
v-if="actor.agency"
class="bio-item"
>
<dfn class="bio-label"><Icon icon="user-tie" />Agency</dfn>
<li class="bio-item actor-actions">
<a
v-if="user && user.role !== 'user'"
:href="`/actor/edit/${actor.id}/${actor.slug}`"
target="_blank"
class="link"
>Edit bio</a>
<span
:title="actor.agency"
class="bio-value"
>{{ actor.agency }}</span>
</li>
<a
:href="`/actor/revisions/${actor.id}/${actor.slug}`"
target="_blank"
class="link"
>Revisions</a>
<li class="bio-item updated hideable">
<span
class="ellipsis"
:title="`#${actor.id} Updated ${formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm')}`"
>#{{ actor.id }} Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd') }}</span>
<div class="actor-actions">
<a
v-if="user && user.role !== 'user'"
:href="`/actor/edit/${actor.id}/${actor.slug}`"
target="_blank"
class="link"
>Edit bio</a>
<a
:href="`/actor/revs/${actor.id}/${actor.slug}`"
target="_blank"
class="link"
>Revisions</a>
</div>
</li>
</ul>
@@ -413,17 +435,32 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
}
.avatar-container {
padding: 0 0 1rem 1rem;
position: relative;
margin: 0 .5rem 1rem 1rem;
flex-shrink: 0;
font-size: 0;
}
.avatar {
height: 100%;
flex-shrink: 0;
border: solid 3px var(--highlight-hint);
margin: 0 .5rem 0 0;
border: solid 3px var(--highlight-weak-30);
border-radius: .5rem;
}
.avatar-credit {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
box-sizing: border-box;
padding: 0 .5rem;
color: var(--text-light);
font-size: .75rem;
text-shadow: 1px 1px 0 var(--shadow-strong-20);
}
&.expanded {
padding-bottom: 1.5rem;
margin-bottom: .75rem;
@@ -573,10 +610,22 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
}
.updated {
color: var(--highlight-weak-20);
color: var(--highlight-weak-10);
font-size: .8rem;
}
.actor-actions {
display: flex;
justify-content: flex-start;
gap: 1rem;
margin-right: .5rem;
.link {
color: inherit;
flex-shrink: 0;
}
}
.descriptions-container {
max-width: 30rem;
max-height: 100%;
@@ -691,16 +740,6 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
}
}
.actor-actions {
justify-content: flex-start;
gap: 1rem;
font-weight: normal;
.link {
color: var(--highlight-strong-20);
}
}
@media(--big) {
.descriptions-container {
display: none;

2
components/admin/admin.vue
View File

@@ -45,6 +45,7 @@ const pageContext = inject('pageContext');
padding: 1rem 1rem .75rem 1rem;
border-bottom: solid 1px var(--shadow-weak-30);
margin-bottom: .25rem;
overflow-x: auto;
}
.nav-items {
@@ -54,6 +55,7 @@ const pageContext = inject('pageContext');
.nav-item {
display: block;
flex-shrink: 0;
background: var(--background-dark-20);
border-radius: 1rem;
color: var(--glass-strong-20);

110
components/edit/avatar.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<div class="avatar noshrink">
<img
:src="getPath(avatar, 'thumbnail')"
class="avatar-image"
>
<span
class="avatar-credit"
title="Credit"
>{{ avatar.credit }}</span>
<span class="avatar-meta">
<span title="Dimensions">{{ avatar.width }}x{{ avatar.height }}</span>
<span title="Sharpness">{{ avatar.sharpness.toFixed(2) }}</span>
</span>
<a
:href="getPath(avatar)"
target="_blank"
class="avatar-zoom"
>
<Icon
icon="search"
/>
</a>
</div>
</template>
<script setup>
import getPath from '#/src/get-path.js';
defineProps({
avatar: {
type: Object,
default: null,
},
});
</script>
<style scoped>
.avatar {
display: inline-block;
position: relative;
border: solid 2px transparent;
border-radius: .35rem;
box-shadow: 0 0 3px var(--shadow-weak-10);
margin: 2px; /* clear outline */
font-size: 0;
overflow: hidden;
&.selected {
border: solid 2px var(--primary);
}
&:hover {
/*
.avatar-meta,
.avatar-credit {
display: none;
}
*/
.icon {
fill: var(--text-light);
}
}
}
.avatar-image {
height: 10rem;
}
.avatar-zoom {
position: absolute;
top: 0;
right: 0;
z-index: 10;
padding: .25rem;
.icon {
fill: var(--highlight);
}
}
.avatar-meta,
.avatar-credit {
position: absolute;
z-index: 10;
box-sizing: border-box;
padding: .15rem .25rem;
font-size: .7rem;
color: var(--text-light);
text-shadow: 1px 1px 0 var(--shadow-strong-30);
cursor: default;
}
.avatar-meta {
width: 100%;
display: flex;
justify-content: space-between;
bottom: 0;
left: 0;
}
.avatar-credit {
bottom: .75rem;
left: 0;
}
</style>

18
components/edit/revisions.vue
View File

@@ -116,6 +116,12 @@
>{{ item.name || item.id || item }}</li>&nbsp;]
</ul>
<Avatar
v-else-if="delta.key === 'avatar'"
:avatar="avatarsById[rev.base[delta.key]]"
class="delta-avatar"
/>
<template v-else-if="rev.base[delta.key] instanceof Date">{{ format(rev.base[delta.key], 'yyyy-MM-dd hh:mm') }}</template>
<template v-else>{{ rev.base[delta.key] }}</template>
</span>
@@ -135,6 +141,12 @@
>{{ item.name || item.id || item }}</li>&nbsp;]
</ul>
<Avatar
v-else-if="delta.key === 'avatar'"
:avatar="avatarsById[delta.value]"
class="delta-avatar"
/>
<template v-else-if="delta.value instanceof Date">{{ format(delta.value, 'yyyy-MM-dd hh:mm') }}</template>
<template v-else>{{ delta.value }}</template>
</span>
@@ -156,7 +168,7 @@
@click="expanded.add(rev.id)"
>
<span class="rev-scene nolink noshrink"><template v-if="context !== 'scene'">{{ rev.sceneId }}</template>@{{ rev.hash.slice(0, 6) }}</span>
<span class="rev-scene nolink noshrink"><template v-if="context !== 'scene' && context !== 'actor'">{{ rev.sceneId || rev.actorId }}</template>@{{ rev.hash.slice(0, 6) }}</span>
<span
v-if="context !== 'scene'"
@@ -205,6 +217,7 @@
import { ref, computed, inject } from 'vue';
import { format } from 'date-fns';
import Avatar from '#/components/edit/avatar.vue';
import Checkbox from '#/components/form/checkbox.vue';
import { get, post } from '#/src/api.js';
@@ -224,10 +237,12 @@ const domain = pageContext.routeParams.domain;
const actors = ref(pageContext.pageProps.actors);
const tags = ref(pageContext.pageProps.tags);
const movies = ref(pageContext.pageProps.movies);
const avatars = ref(pageContext.pageProps.avatars);
const actorsById = computed(() => Object.fromEntries(actors.value.map((actor) => [actor.id, actor])));
const tagsById = computed(() => Object.fromEntries(tags.value.map((tag) => [tag.id, tag])));
const moviesById = computed(() => Object.fromEntries(movies.value.map((movie) => [movie.id, movie])));
const avatarsById = computed(() => Object.fromEntries(avatars.value.map((avatar) => [avatar.id, avatar])));
const feedbacks = ref({});
const showReviewed = ref(false);
@@ -318,6 +333,7 @@ async function reloadRevisions() {
actors.value = updatedRevisions.actors;
tags.value = updatedRevisions.tags;
movies.value = updatedRevisions.movies;
avatars.value = updatedRevisions.avatars;
revisions.value = updatedRevisions.revisions;
}