Reinitialized commit. Update and actors overview with some filters.

2023-12-30 06:29:53 +01:00
commit 3f099b5e95
1208 changed files with 134732 additions and 0 deletions
--- a/components/actors/tile.vue
+++ b/components/actors/tile.vue
@@ -0,0 +1,147 @@
+<template>
+	<div class="actor">
+		<span class="name">{{ actor.name }}</span>
+
+		<Link
+			:href="`/actor/${actor.id}/${actor.slug}`"
+			class="avatar-link no-link"
+		>
+			<img
+				v-if="actor.avatar"
+				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
+				class="avatar"
+			>
+		</Link>
+
+		<div class="details">
+			<span class="birth">
+				<Gender :gender="actor.gender" />
+
+				<span
+					v-if="actor.ageFromBirth"
+					:title="`Born ${formatDate(actor.dateOfBirth, 'MMMM d, yyyy')}`"
+					class="age"
+				>{{ actor.ageFromBirth }}</span>
+
+				<span
+					v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
+					class="age age-then"
+				>{{ actor.ageThen }}</span>
+			</span>
+
+			<span
+				v-if="actor.birthCountry"
+				:title="`Born in ${actor.birthCountry.name}`"
+				class="country"
+			>
+				{{ actor.birthCountry.alpha2 }}
+				<img
+					:src="`/flags/${actor.birthCountry.alpha2.toLowerCase()}.svg`"
+					class="flag"
+				>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { formatDate } from '#/src/format.js';
+
+import Gender from './gender.vue';
+
+defineProps({
+	actor: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.actor {
+	display: flex;
+	flex-direction: column;
+	width: 10rem;
+	height: 15rem;
+	position: relative;
+	border-radius: .25rem;
+	margin: .25rem;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+
+		.name {
+			color: var(--primary);
+		}
+	}
+}
+
+.name {
+	padding: .25rem .5rem;
+	font-weight: bold;
+	font-size: .9rem;
+	user-select: all;
+}
+
+.avatar-link {
+	display: block;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+.avatar {
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+	object-position: center 0;
+	background-size: cover;
+	background-position: center 0;
+}
+
+.details {
+	width: 100%;
+	height: 1.5rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: absolute;
+	bottom: 0;
+	padding: 0 .5rem;
+	color: var(--text-light);
+	background: var(--shadow);
+	font-size: .9rem;
+	font-weight: bold;
+}
+
+.gender {
+	display: inline-block;
+	padding: .25rem 0;
+	margin-right: .25rem;
+	transform: translateY(1px);
+}
+
+.birth {
+	display: flex;
+	align-items: center;
+}
+
+.age {
+	margin-right: .25rem;
+}
+
+.age-then {
+	color: var(--shadow-weak-10);
+}
+
+.country {
+	display: flex;
+	align-items: center;
+}
+
+.flag {
+	height: .75rem;
+	margin-left: .25rem;
+}
+</style>