Added gender indicator to actor tiles. Fixed PornHub scraper fetching default avatars.

assets/components/tile/actor.vue

@@ -5,6 +5,8 @@
     >
         <a
             :href="`/actor/${actor.slug}`"
+            target="_blank"
+            rel="noopener noreferrer"
             class="link"
         >
             <span
@@ -12,54 +14,69 @@
                 class="name"
             >{{ actor.name }}</span>
 
-            <img
-                v-if="actor.avatar"
-                :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
-                class="avatar"
-            >
-
-            <span
-                v-else
-                class="avatar"
-            ><img
-                :src="`/img/avatar_${actor.gender || 'female'}.png`"
-                class="avatar-fallback"
-            ></span>
-
-            <span
-                class="details"
-            >
-                <span>
-                    <span
-                        v-if="actor.age"
-                        v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
-                        class="age"
-                    >{{ actor.age }}</span>
-
-                    <span
-                        v-if="actor.ageThen && actor.ageThen < actor.age"
-                        v-tooltip="`${actor.ageThen} years old on release date`"
-                        class="age-then"
-                    >{{ actor.ageThen }}</span>
-                </span>
-                <span
-                    v-if="actor.origin"
-                    v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
-                    class="country"
+            <div class="avatar-container">
+                <img
+                    v-if="actor.avatar"
+                    :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
+                    class="avatar"
                 >
-                    {{ actor.origin.country.alpha2 }}
-                    <img
-                        class="flag"
-                        :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
+
+                <span
+                    v-else
+                    class="avatar"
+                ><img
+                    :src="`/img/avatar_${actor.gender || 'female'}.png`"
+                    class="avatar-fallback"
+                ></span>
+
+                <span
+                    class="details"
+                >
+                    <span class="age">
+                        <span
+                            v-if="actor.age"
+                            v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
+                            class="age-now"
+                        >{{ actor.age }}</span>
+
+                        <span
+                            v-if="actor.ageThen && actor.ageThen < actor.age"
+                            v-tooltip="`${actor.ageThen} years old on release date`"
+                            class="age-then"
+                        >{{ actor.ageThen }}</span>
+                    </span>
+
+                    <Gender :gender="actor.gender" />
+
+                    <span
+                        v-if="actor.origin"
+                        v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
+                        class="country"
                     >
+                        {{ actor.origin.country.alpha2 }}
+                        <img
+                            class="flag"
+                            :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
+                        >
+                    </span>
+
+                    <span
+                        v-else
+                        class="country"
+                    />
                 </span>
-            </span>
+            </div>
         </a>
     </div>
 </template>
 
 <script>
+import Gender from '../actors/gender.vue';
+
 export default {
+    components: {
+        Gender,
+    },
     props: {
         actor: {
             type: Object,
@@ -77,33 +94,26 @@ export default {
     background: $background;
     display: inline-block;
     margin: 0 .5rem .5rem 0;
-    position: relative;
     box-shadow: 0 0 3px $shadow-weak;
 }
 
 .link {
-    color: $link;
+    color: $text;
     text-decoration: none;
-    text-align: center;
 
     &:hover {
         color: $primary;
     }
 }
 
-.name {
-    display: block;
-    padding: .5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: bold;
+.avatar-container {
+    position: relative;
 }
 
 .avatar {
     color: $shadow-weak;
     background: $shadow-hint;
-    height: 12rem;
+    height: 13rem;
     width: 100%;
     display: flex;
     align-items: center;
@@ -125,7 +135,6 @@ export default {
     height: 1.75rem;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     box-sizing: border-box;
     padding: .5rem;
     position: absolute;
@@ -134,7 +143,31 @@ export default {
     font-weight: bold;
 }
 
+.age,
+.country,
+.gender {
+    flex: 1;
+}
+
+.gender {
+    text-align: center;
+}
+
+.country {
+    text-align: right;
+}
+
 .age-then {
     color: $highlight;
 }
+
+.name {
+    display: block;
+    padding: .5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    font-weight: bold;
+}
 </style>