assets/components/actors/actor.vue

@@ -5,50 +5,6 @@
     >
         <FilterBar :fetch-releases="fetchActor" />
 
-        <div class="actor-header">
-            <h2 class="header-name">
-                {{ actor.name }}
-                <span
-                    v-if="actor.gender"
-                    class="header-gender"
-                    :class="{ [actor.gender]: true }"
-                ><Icon :icon="actor.gender" /></span>
-            </h2>
-
-            <li
-                v-if="actor.aliases.length"
-                class="bio-item"
-            >
-                <dfn class="bio-label">Also known as</dfn>
-                <span>{{ actor.aliases.join(', ') }}</span>
-            </li>
-
-            <div
-                v-if="actor.social && actor.social.length > 0"
-                class="social header-social"
-            >
-                <a
-                    v-for="social in actor.social"
-                    :key="`social-${social.id}`"
-                    v-tooltip.bottom="social.url"
-                    :href="social.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="social-link"
-                >
-                    <Icon
-                        v-if="social.platform"
-                        :icon="social.platform"
-                    />
-
-                    <Icon
-                        v-else
-                        icon="link"
-                    />
-                </a>
-            </div>
-        </div>
-
         <div class="actor-inner">
             <div class="profile">
                 <a
@@ -65,6 +21,23 @@
                 </a>
 
                 <ul class="bio nolist">
+                    <li class="bio-header">
+                        <h2 class="bio-name">{{ actor.name }}</h2>
+                        <span
+                            v-if="actor.gender"
+                            class="bio-gender"
+                            :class="{ [actor.gender]: true }"
+                        ><Icon :icon="actor.gender" /></span>
+                    </li>
+
+                    <li
+                        v-if="actor.aliases.length"
+                        class="bio-item"
+                    >
+                        <dfn class="bio-label">Also known as</dfn>
+                        <span>{{ actor.aliases.join(', ') }}</span>
+                    </li>
+
                     <li
                         v-if="actor.birthdate"
                         class="bio-item"
@@ -209,10 +182,37 @@
                     <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
                 </ul>
 
-                <p
+                <div class="extra">
-                    v-if="actor.description"
+                    <p
-                    class="description"
+                        v-if="actor.description"
-                >{{ actor.description }}</p>
+                        class="description"
+                    >{{ actor.description }}</p>
+
+                    <li
+                        v-if="actor.social && actor.social.length > 0"
+                        class="social"
+                    >
+                        <a
+                            v-for="social in actor.social"
+                            :key="`social-${social.id}`"
+                            v-tooltip.bottom="social.url"
+                            :href="social.url"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="social-link"
+                        >
+                            <Icon
+                                v-if="social.platform"
+                                :icon="social.platform"
+                            />
+
+                            <Icon
+                                v-else
+                                icon="link"
+                            />
+                        </a>
+                    </li>
+                </div>
             </div>
 
 
@@ -250,7 +250,7 @@ function scrollPhotos(event) {
 }
 
 async function mounted() {
-    await this.fetchActor();
+    this.fetchActor();
 
     if (this.actor) {
         this.pageTitle = this.actor.name;
@@ -282,40 +282,6 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.actor-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: $highlight-extreme;
-    background: $profile;
-    padding: .75rem 1rem;
-}
-
-.header-name {
-    padding: 0;
-    margin: 0;
-    display: inline-flex;
-    justify-content: space-between;
-    flex-shrink: 0;
-}
-
-.header-gender {
-    display: inline-block;
-    margin: 0 0 0 .25rem;
-    transform: translate(0, .1rem);
-
-    .icon {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-}
-
-.header-social {
-    overflow: hidden;
-    white-space: nowrap;
-    margin: 0 1rem 0 0;
-}
-
 .actor-inner {
     height: 100%;
     display: flex;
@@ -332,6 +298,7 @@ export default {
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
+    padding: 1rem 0 0 0;
 
     .avatar-link {
         font-size: 0;
@@ -366,7 +333,7 @@ export default {
 }
 
 .bio-item {
-    width: calc(50% - 4rem);
+    width: calc(50% - 2rem);
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
@@ -423,10 +390,6 @@ export default {
         height: 1.25rem;
     }
 
-}
-
-.header-gender,
-.bio-gender {
     &.female .icon {
         fill: $female;
     }
@@ -474,12 +437,15 @@ export default {
     font-size: .8rem;
 }
 
+.extra {
+    flex-grow: 1;
+    max-width: 40rem;
+}
+
 .description {
-    max-width: 30rem;
     max-height: 12rem;
     position: relative;
     display: block;
-    flex-grow: 1;
     box-sizing: border-box;
     margin: 0 2rem 0 0;
     line-height: 1.5;
@@ -495,11 +461,12 @@ export default {
 
 .social {
     display: block;
+    margin: 1rem 0;
 }
 
 .social-link {
     display: inline-block;
-    padding: 0 0 0 1rem;
+    padding: 0 1rem 0 0;
 
     .icon {
         color: $highlight;
@@ -548,7 +515,8 @@ export default {
 }
 
 @media(max-width: $breakpoint3) {
-    .profile .avatar-link {
+    .profile .avatar-link,
+    .extra {
         display: none;
     }
 
@@ -573,7 +541,6 @@ export default {
 
 @media(max-width: $breakpoint) {
     .profile {
-        height: auto;
         flex-direction: column;
         padding: 0 0 .5rem 0;
     }
@@ -584,9 +551,8 @@ export default {
         margin: 0;
     }
 
-    .bio-item {
+    .bio-header {
-        width: auto;
+        margin: 1rem 0;
-        margin: 0;
     }
 
     .city,
@@ -599,15 +565,9 @@ export default {
     .scraped {
         display: none;
     }
-}
 
-@media(max-width: $breakpoint0) {
+    .social {
-    .header-social {
+        padding: 0 1rem;
-        display: none;
-    }
-
-    .header-name {
-        flex-grow: 1;
     }
 }
 </style>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "traxxx",
-  "version": "1.60.1",
+  "version": "1.60.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.60.1",
+    "version": "1.60.0",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {

public/css/style.css

@@ -1018,41 +1018,6 @@
 
 /* $primary: #ff886c; */
 /* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
-.actor-header[data-v-ea0483c2] {
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-          align-items: center;
-  color: rgba(255, 255, 255, 0.9);
-  background: #222;
-  padding: .75rem 1rem;
-}
-.header-name[data-v-ea0483c2] {
-  padding: 0;
-  margin: 0;
-  display: -webkit-inline-box;
-  display: inline-flex;
-  -webkit-box-pack: justify;
-          justify-content: space-between;
-  flex-shrink: 0;
-}
-.header-gender[data-v-ea0483c2] {
-  display: inline-block;
-  margin: 0 0 0 .25rem;
-  -webkit-transform: translate(0, 0.1rem);
-          transform: translate(0, 0.1rem);
-}
-.header-gender .icon[data-v-ea0483c2] {
-    width: 1.25rem;
-    height: 1.25rem;
-}
-.header-social[data-v-ea0483c2] {
-  overflow: hidden;
-  white-space: nowrap;
-  margin: 0 1rem 0 0;
-}
 .actor-inner[data-v-ea0483c2] {
   height: 100%;
   display: -webkit-box;
@@ -1074,6 +1039,7 @@
   -webkit-box-direction: normal;
           flex-direction: row;
   flex-shrink: 0;
+  padding: 1rem 0 0 0;
 }
 .profile .avatar-link[data-v-ea0483c2] {
     font-size: 0;
@@ -1110,7 +1076,7 @@
   margin: 0 0 0 1rem;
 }
 .bio-item[data-v-ea0483c2] {
-  width: calc(50% - 4rem);
+  width: calc(50% - 2rem);
   display: -webkit-box;
   display: flex;
   -webkit-box-pack: justify;
@@ -1161,19 +1127,16 @@
     width: 1.25rem;
     height: 1.25rem;
 }
-.header-gender.female .icon[data-v-ea0483c2],
 .bio-gender.female .icon[data-v-ea0483c2] {
-  fill: #f0a;
+    fill: #f0a;
 }
-.header-gender.male .icon[data-v-ea0483c2],
 .bio-gender.male .icon[data-v-ea0483c2] {
-  fill: #0af;
+    fill: #0af;
 }
-.header-gender.transsexual .icon[data-v-ea0483c2],
 .bio-gender.transsexual .icon[data-v-ea0483c2] {
-  fill: #fff;
+    fill: #fff;
-  -webkit-filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
+    -webkit-filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
-          filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
+            filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
 }
 .birthdate[data-v-ea0483c2] {
   display: block;
@@ -1201,13 +1164,15 @@
   color: rgba(255, 255, 255, 0.2);
   font-size: .8rem;
 }
+.extra[data-v-ea0483c2] {
+  -webkit-box-flex: 1;
+          flex-grow: 1;
+  max-width: 40rem;
+}
 .description[data-v-ea0483c2] {
-  max-width: 30rem;
   max-height: 12rem;
   position: relative;
   display: block;
-  -webkit-box-flex: 1;
-          flex-grow: 1;
   box-sizing: border-box;
   margin: 0 2rem 0 0;
   line-height: 1.5;
@@ -1221,10 +1186,11 @@
 }
 .social[data-v-ea0483c2] {
   display: block;
+  margin: 1rem 0;
 }
 .social-link[data-v-ea0483c2] {
   display: inline-block;
-  padding: 0 0 0 1rem;
+  padding: 0 1rem 0 0;
 }
 .social-link .icon[data-v-ea0483c2] {
     color: rgba(255, 255, 255, 0.5);
@@ -1269,7 +1235,8 @@
 }
 }
 @media (max-width: 1200px) {
-.profile .avatar-link[data-v-ea0483c2] {
+.profile .avatar-link[data-v-ea0483c2],
+  .extra[data-v-ea0483c2] {
     display: none;
 }
 .actor-content[data-v-ea0483c2] {
@@ -1292,7 +1259,6 @@
 }
 @media (max-width: 720px) {
 .profile[data-v-ea0483c2] {
-    height: auto;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
             flex-direction: column;
@@ -1303,9 +1269,8 @@
     padding: 0 1rem;
     margin: 0;
 }
-.bio-item[data-v-ea0483c2] {
+.bio-header[data-v-ea0483c2] {
-    width: auto;
+    margin: 1rem 0;
-    margin: 0;
 }
 .city[data-v-ea0483c2],
   .state[data-v-ea0483c2],
@@ -1317,14 +1282,8 @@
   .scraped[data-v-ea0483c2] {
     display: none;
 }
-}
+.social[data-v-ea0483c2] {
-@media (max-width: 540px) {
+    padding: 0 1rem;
-.header-social[data-v-ea0483c2] {
-    display: none;
-}
-.header-name[data-v-ea0483c2] {
-    -webkit-box-flex: 1;
-            flex-grow: 1;
 }
 }