Added basic actor and network overview. Added DDF Network actor scraper. Various bug fixes and layout improvements.

assets/components/actors/actor.vue

@@ -24,6 +24,7 @@
                     <li class="bio-header">
                         <h2 class="bio-name">{{ actor.name }}</h2>
                         <span
+                            v-if="actor.gender"
                             class="bio-gender"
                             :class="{ male: actor.gender === 'male', female: actor.gender === 'female' }"
                         ><Icon :icon="actor.gender" /></span>
@@ -60,7 +61,7 @@
                                 v-if="actor.origin.city"
                                 class="city"
                             >{{ actor.origin.city }}</span><span
-                                v-if="actor.origin.state && actor.origin.country && actor.origin.country.alpha2 === 'US'"
+                                v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
                                 class="state"
                             >{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
 
@@ -71,7 +72,7 @@
                                 <img
                                     class="flag"
                                     :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
-                                >{{ actor.origin.country.name }}
+                                >{{ actor.origin.country.alias || actor.origin.country.name }}
                             </span>
                         </span>
                     </li>
@@ -98,7 +99,7 @@
                                 <img
                                     class="flag"
                                     :src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
-                                >{{ actor.residence.country.name }}
+                                >{{ actor.residence.country.alias || actor.residence.country.name }}
                             </span>
                         </span>
                     </li>
@@ -180,10 +181,10 @@
                         <span v-else>Yes</span>
                     </li>
 
-                    <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
+                    <span class="scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</span>
                 </ul>
 
-                <div>
+                <div class="extra">
                     <p
                         v-if="actor.description"
                         class="description"
@@ -223,38 +224,13 @@
                     v-if="actor.photos && actor.photos.length > 0"
                     class="photos-container"
                 >
-                    <div
-                        class="photos"
-                        :class="{ wide: actor.photos.length > 2 }"
-                        @wheel.prevent="scrollPhotos"
-                    >
-                        <a
-                            v-if="actor.avatar"
-                            :href="`/media/${actor.avatar.path}`"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="avatar-link photo-link"
-                        >
-                            <img
-                                :src="`/media/${actor.avatar.thumbnail}`"
-                                class="avatar photo"
-                            >
-                        </a>
+                    <Photos :actor="actor" />
 
-                        <a
-                            v-for="photo in actor.photos"
-                            :key="`photo-${photo.id}`"
-                            :href="`/media/${photo.path}`"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="photo-link"
-                        >
-                            <img
-                                :src="`/media/${photo.thumbnail}`"
-                                class="photo"
-                            >
-                        </a>
-                    </div>
+                    <Photos
+                        :actor="actor"
+                        class="compact"
+                        @wheel.native.prevent="scrollPhotos"
+                    />
                 </div>
 
                 <Releases :releases="releases" />
@@ -268,6 +244,7 @@ import dayjs from 'dayjs';
 
 import { cmToFeetInches, kgToLbs } from '../../../src/utils/convert';
 
+import Photos from './photos.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 
@@ -296,7 +273,7 @@ function scrollDescription(event) {
 }
 
 async function mounted() {
-    [[this.actor]] = await Promise.all([
+    [this.actor] = await Promise.all([
         this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
         this.fetchReleases(),
     ]);
@@ -309,6 +286,7 @@ async function mounted() {
 export default {
     components: {
         FilterBar,
+        Photos,
         Releases,
     },
     data() {
@@ -358,7 +336,7 @@ export default {
     }
 
     .avatar {
-        height: 12rem;
+        height: 15rem;
         width: 12rem;
         flex-shrink: 0;
         margin: 0 1rem 0 0;
@@ -385,24 +363,28 @@ export default {
 .bio-item {
     display: flex;
     justify-content: space-between;
-    margin: 0 0 .5rem 0;
+    padding: 0 0 .25rem 0;
+    margin: 0 0 .25rem 0;
     line-height: 1.75;
     text-align: right;
     font-size: .9rem;
+    font-weight: 600;
+
+    &:not(:last-of-type) {
+        border-bottom: solid 1px $highlight-hint;
+    }
 }
 
 .bio-label {
     color: $highlight;
-    display: flex;
-    align-items: center;
     margin: 0 1rem 0 0;
     flex-shrink: 0;
     font-style: normal;
-    font-weight: bold;
+    font-weight: 400;
 
     .icon {
         fill: $highlight;
-        margin: 0 .5rem .5rem 0;
+        margin: 0 .5rem 0 0;
     }
 }
 
@@ -469,9 +451,18 @@ export default {
     padding: 0 .5rem;
 }
 
-.description {
-    max-height: 10rem;
+.scraped {
+    color: $highlight-weak;
+    margin: 1rem 0 0 0;
+    font-size: .8rem;
+}
+
+.extra {
     flex-grow: 1;
+}
+
+.description {
+    max-height: 12rem;
     position: relative;
     display: block;
     box-sizing: border-box;
@@ -480,7 +471,6 @@ export default {
     line-height: 1.5;
     text-overflow: ellipsis;
     font-size: .9rem;
-    cursor: pointer;
     overflow: auto;
     scrollbar-width: none;
 
@@ -509,12 +499,6 @@ export default {
     }
 }
 
-.scraped {
-    color: $highlight-weak;
-    margin: 1rem 0 0 0;
-    font-size: .8rem;
-}
-
 .actor-content {
     display: flex;
     flex-grow: 1;
@@ -534,27 +518,8 @@ export default {
     margin: 0 .5rem 0 0;
 }
 
-.photos {
-    display: inline-grid;
-    grid-template-columns: repeat(auto-fit, 15rem);
-    grid-gap: .5rem;
-    font-size: 0;
-
-    .avatar-link {
-        display: none;
-    }
-}
-
-.photo-link {
-    height: 15rem;
-}
-
-.photo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: 50% 0;
-    box-shadow: 0 0 3px $shadow-weak;
+.photos.compact {
+    display: none;
 }
 
 .releases {
@@ -568,15 +533,9 @@ export default {
     }
 }
 
-@media(min-width: $breakpoint3) {
-    .photos.wide {
-        max-width: 35vw;
-    }
-}
-
 @media(max-width: $breakpoint3) {
     .profile .avatar-link,
-    .social {
+    .extra {
         display: none;
     }
 
@@ -592,25 +551,11 @@ export default {
     }
 
     .photos {
-        width: 100%;
-        max-width: 100%;
-        display: flex;
-        overflow-x: scroll;
-        scrollbar-width: none;
-
-        .avatar-link {
-            display: inline-block;
-        }
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
+        display: none;
     }
 
-    .photo-link {
-        height: 15rem;
-        flex-shrink: 0;
-        margin: 0 .5rem 0 0;
+    .photos.compact {
+        display: flex;
     }
 }
 

assets/components/actors/actors.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="actors">
+        <Actor
+            v-for="actor in actors"
+            :key="`actor-${actor.id}`"
+            :actor="actor"
+        />
+    </div>
+</template>
+
+<script>
+import Actor from '../tile/actor.vue';
+
+async function mounted() {
+    this.actors = await this.$store.dispatch('fetchActors');
+}
+
+export default {
+    components: {
+        Actor,
+    },
+    data() {
+        return {
+            actors: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.actors {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 10rem);
+    grid-gap: 0 .5rem;
+    padding: 1rem;
+}
+</style>

assets/components/actors/photos.vue

@@ -0,0 +1,100 @@
+<template>
+    <div
+        class="photos"
+        :class="{ wide: actor.photos.length > 2 }"
+    >
+        <a
+            v-if="actor.avatar"
+            :href="`/media/${actor.avatar.path}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="avatar-link photo-link"
+        >
+            <img
+                :src="`/media/${actor.avatar.thumbnail}`"
+                class="avatar photo"
+            >
+        </a>
+
+        <a
+            v-for="photo in actor.photos"
+            :key="`photo-${photo.id}`"
+            :href="`/media/${photo.path}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="photo-link"
+        >
+            <img
+                :src="`/media/${photo.thumbnail}`"
+                class="photo"
+            >
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        actor: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.photos {
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fit, 12rem);
+    grid-gap: .5rem;
+    font-size: 0;
+
+    .avatar-link {
+        display: none;
+    }
+}
+
+.photo-link {
+    height: 15rem;
+}
+
+.photo {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    box-shadow: 0 0 3px $shadow-weak;
+}
+
+@media(min-width: $breakpoint3) {
+    .photos.wide {
+        max-width: 30vw;
+    }
+}
+
+@media(max-width: $breakpoint3) {
+    .photos {
+        width: 100%;
+        max-width: 100%;
+        display: flex;
+        overflow-x: scroll;
+        scrollbar-width: none;
+
+        .avatar-link {
+            display: inline-block;
+        }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .photo-link {
+        height: 15rem;
+        flex-shrink: 0;
+        margin: 0 .5rem 0 0;
+    }
+}
+</style>

assets/components/header/header.vue

@@ -1,11 +1,40 @@
 <template>
     <header class="header">
-        <router-link
-            :to="{ name: 'home' }"
+        <a
+            href="/"
             class="logo-link"
-        >
-            <h1 class="logo">traxxx</h1>
-        </router-link>
+        ><h1 class="logo">traxxx</h1></a>
+
+        <nav class="nav">
+            <ul class="nolist">
+                <li class="nav-item">
+                    <Icon icon="stars" />
+
+                    <a
+                        href="/actors"
+                        class="nav-link"
+                    >Actors</a>
+                </li>
+
+                <li class="nav-item">
+                    <Icon icon="earth2" />
+
+                    <a
+                        href="/networks"
+                        class="nav-link"
+                    >Networks</a>
+                </li>
+
+                <li class="nav-item">
+                    <Icon icon="price-tags" />
+
+                    <a
+                        href="/tags"
+                        class="nav-link"
+                    >Categories</a>
+                </li>
+            </ul>
+        </nav>
     </header>
 </template>
 
@@ -13,19 +42,41 @@
 @import 'theme';
 
 .header {
+    display: flex;
+    align-items: center;
     background: $background;
     color: $primary;
-    padding: .5rem 1rem;
     border-bottom: solid 1px $shadow-hint;
+    font-size: 0;
 }
 
 .logo-link {
     color: inherit;
+    display: inline-block;
     text-decoration: none;
 }
 
 .logo {
     display: inline-block;
-    margin: 0;
+    padding: .5rem 1rem;
+    margin: 0 1rem 0 0;
+    font-size: 2rem;
+}
+
+.nav {
+    display: inline-block;
+}
+
+.nav-link {
+    display: inline-block;
+    color: $shadow;
+    padding: 1rem;
+    text-decoration: none;
+    font-size: 1rem;
+    font-weight: bold;
+
+    &:hover {
+        color: $primary;
+    }
 }
 </style>

assets/components/networks/networks.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="networks">
+        <Network
+            v-for="network in networks"
+            :key="`network-${network.id}`"
+            :network="network"
+        />
+    </div>
+</template>
+
+<script>
+import Network from '../tile/network.vue';
+
+async function mounted() {
+    this.networks = await this.$store.dispatch('fetchNetworks');
+
+    console.log(this.networks);
+}
+
+export default {
+    components: {
+        Network,
+    },
+    data() {
+        return {
+            networks: [],
+        };
+    },
+    mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.networks {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 15rem);
+    grid-gap: 1rem;
+    padding: 1rem;
+}
+</style>

assets/components/tile/actor.vue

@@ -7,11 +7,14 @@
             :href="`/actor/${actor.slug}`"
             class="link"
         >
-            <span class="name">{{ actor.name }}</span>
+            <span
+                v-tooltip.top="actor.name"
+                class="name"
+            >{{ actor.name }}</span>
 
             <img
                 v-if="actor.avatar"
-                :src="`/media/${actor.avatar}`"
+                :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
                 class="avatar"
             >
 
@@ -38,6 +41,7 @@ export default {
 @import 'theme';
 
 .actor {
+    width: 10rem;
     background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;
@@ -57,6 +61,9 @@ export default {
 .name {
     display: block;
     padding: .5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-weight: bold;
 }
 
@@ -64,10 +71,11 @@ export default {
     color: $shadow-weak;
     background: $shadow-hint;
     height: 12rem;
-    width: 10rem;
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     object-fit: cover;
+    object-position: 50% 0;
 }
 </style>

assets/components/tile/network.vue

@@ -0,0 +1,66 @@
+<template>
+    <a
+        :href="`/network/${network.slug}`"
+        :title="network.name"
+        class="tile"
+    >
+        <object
+            :data="`/img/logos/${network.slug}/network.png`"
+            type="image/png"
+            class="logo"
+        >{{ network.name }}</object>
+    </a>
+</template>
+
+<script>
+export default {
+    props: {
+        network: {
+            type: Object,
+            default: null,
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.tile {
+    background: $background;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    padding: .5rem 1rem;
+    border-radius: .25rem;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .25);
+    height: 100%;
+    text-align: center;
+}
+
+.link {
+    text-decoration: none;
+}
+
+.logo {
+    width: 100%;
+    height: 5rem;
+    color: $text;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    object-fit: contain;
+    font-size: 1rem;
+    font-weight: bold;
+    filter: drop-shadow(0 0 1px $shadow);
+}
+
+.title {
+    color: $text;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+}
+</style>

assets/components/tile/site.vue

@@ -53,6 +53,7 @@ export default {
     object-fit: contain;
     font-size: 1rem;
     font-weight: bold;
+    filter: drop-shadow(0 0 1px $shadow);
 }
 
 .title {