From 05bd7b703d6619efb3f45f3f57c67b7000c940a1 Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Wed, 23 Oct 2024 01:28:54 +0200 Subject: [PATCH] Added actor revision overviews to actor and user pages. --- common | 2 +- components/actors/bio.vue | 101 +++++++---- components/admin/admin.vue | 2 + components/edit/avatar.vue | 110 ++++++++++++ components/edit/revisions.vue | 18 +- pages/actors/@actorId/+Page.vue | 52 ++++-- pages/actors/@actorId/edit/+Page.vue | 162 ++++-------------- pages/actors/@actorId/revisions/+Page.vue | 14 +- .../@actorId/revisions/+onBeforeRender.js | 11 +- pages/actors/@actorId/revisions/+route.js | 20 ++- pages/admin/+Page.vue | 27 +++ .../admin/revisions/actors/+onBeforeRender.js | 2 + pages/scene/+Page.vue | 2 +- pages/scene/edit/+Page.vue | 4 +- pages/scene/revisions/+onBeforeRender.js | 2 +- pages/scene/revisions/+route.js | 20 ++- pages/users/@username/+Page.vue | 37 ++-- pages/users/@username/+onBeforeRender.js | 36 +++- pages/users/@username/+route.js | 5 +- public/img/favicon/site.webmanifest | 1 + src/actors.js | 15 +- 21 files changed, 424 insertions(+), 219 deletions(-) create mode 100644 components/edit/avatar.vue diff --git a/common b/common index 40011a6..e55818a 160000 --- a/common +++ b/common @@ -1 +1 @@ -Subproject commit 40011a62dae9da8deda71e9f8daf39665a8b7958 +Subproject commit e55818ab448d463c4765c3394a6049280799ec33 diff --git a/components/actors/bio.vue b/components/actors/bio.vue index 363c0a3..6cd81bb 100644 --- a/components/actors/bio.vue +++ b/components/actors/bio.vue @@ -12,6 +12,11 @@ :title="actor.avatar.credit && `© ${actor.avatar.credit}`" class="avatar" > + + {{ actor.avatar.credit }} @@ -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; diff --git a/components/admin/admin.vue b/components/admin/admin.vue index eb0183f..447523c 100644 --- a/components/admin/admin.vue +++ b/components/admin/admin.vue @@ -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); diff --git a/components/edit/avatar.vue b/components/edit/avatar.vue new file mode 100644 index 0000000..f012015 --- /dev/null +++ b/components/edit/avatar.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/components/edit/revisions.vue b/components/edit/revisions.vue index f44db35..58eb113 100644 --- a/components/edit/revisions.vue +++ b/components/edit/revisions.vue @@ -116,6 +116,12 @@ >{{ item.name || item.id || item }} ] + + @@ -135,6 +141,12 @@ >{{ item.name || item.id || item }} ] + + @@ -156,7 +168,7 @@ @click="expanded.add(rev.id)" > - @{{ rev.hash.slice(0, 6) }} + @{{ rev.hash.slice(0, 6) }} 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; } diff --git a/pages/actors/@actorId/+Page.vue b/pages/actors/@actorId/+Page.vue index a75ddb2..939ceb3 100644 --- a/pages/actors/@actorId/+Page.vue +++ b/pages/actors/@actorId/+Page.vue @@ -39,18 +39,27 @@ class="photos nobar" :class="{ 'has-avatar': actor.avatar, 'has-photos': actor.avatar ? photos.length > 1 : photos.length > 0 }" > - + + + {{ photo.credit }} + Go to actor revisions @@ -86,9 +86,20 @@ v-if="item.type === 'string'" v-model="edits[item.key]" class="string input" + :list="item.suggestions && `suggestions-${item.key}`" :disabled="!editing.has(item.key)" > + + + +