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

assets/components/actors/actor.vue

@@ -8,11 +8,10 @@
         <div class="actor-header">
             <h2 class="header-name">
                 {{ actor.name }}
-                <span
-                    v-if="actor.gender"
+                <Gender
+                    :gender="actor.gender"
                     class="header-gender"
-                    :class="{ [actor.gender]: true }"
-                ><Icon :icon="actor.gender" /></span>
+                />
             </h2>
 
             <li
@@ -33,7 +32,7 @@
         <div class="actor-inner">
             <div
                 class="profile"
-                :class="{ expanded }"
+                :class="{ expanded, 'with-avatar': !!actor.avatar }"
             >
                 <a
                     v-if="actor.avatar"
@@ -247,6 +246,7 @@
 import Photos from './photos.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Gender from './gender.vue';
 import Social from './social.vue';
 
 async function fetchActor() {
@@ -270,6 +270,7 @@ export default {
         FilterBar,
         Photos,
         Releases,
+        Gender,
         Social,
     },
     data() {
@@ -325,6 +326,13 @@ export default {
     margin: 0 1rem 0 0;
 }
 
+.header-gender {
+    .icon {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+}
+
 .actor-inner {
     height: 100%;
     display: flex;
@@ -342,6 +350,10 @@ export default {
     flex-direction: row;
     flex-shrink: 0;
 
+    &.with-avatar {
+        height: 18rem; /* profile overlaps avatar in chrome */
+    }
+
     .avatar-link {
         font-size: 0;
         padding: 0 0 1rem 1rem;
@@ -421,36 +433,6 @@ export default {
     margin: 0;
 }
 
-.bio-gender {
-    display: inline-block;
-    font-weight: bold;
-    text-transform: capitalize;
-    font-weight: normal;
-
-    .icon {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-
-}
-
-.header-gender,
-.bio-gender {
-    &.female .icon {
-        fill: $female;
-    }
-
-    &.male .icon {
-        fill: $male;
-    }
-
-    &.transsexual .icon {
-        fill: $text-contrast;
-        filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
-            drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male);
-    }
-}
-
 .birthdate {
     display: block;
 }