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

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>