Separated actor profile header for permanent display when scrolling.

assets/components/actors/actor.vue

@@ -5,6 +5,50 @@
     >
         <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
@@ -21,23 +65,6 @@
                 </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"
@@ -182,37 +209,10 @@
                     <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
                 </ul>
 
-                <div class="extra">
-                    <p
-                        v-if="actor.description"
-                        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>
+                <p
+                    v-if="actor.description"
+                    class="description"
+                >{{ actor.description }}</p>
             </div>
 
 
@@ -250,7 +250,7 @@ function scrollPhotos(event) {
 }
 
 async function mounted() {
-    this.fetchActor();
+    await this.fetchActor();
 
     if (this.actor) {
         this.pageTitle = this.actor.name;
@@ -282,6 +282,40 @@ 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;
@@ -298,7 +332,6 @@ export default {
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
-    padding: 1rem 0 0 0;
 
     .avatar-link {
         font-size: 0;
@@ -333,7 +366,7 @@ export default {
 }
 
 .bio-item {
-    width: calc(50% - 2rem);
+    width: calc(50% - 4rem);
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
@@ -390,6 +423,10 @@ export default {
         height: 1.25rem;
     }
 
+}
+
+.header-gender,
+.bio-gender {
     &.female .icon {
         fill: $female;
     }
@@ -437,15 +474,12 @@ 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;
@@ -461,12 +495,11 @@ export default {
 
 .social {
     display: block;
-    margin: 1rem 0;
 }
 
 .social-link {
     display: inline-block;
-    padding: 0 1rem 0 0;
+    padding: 0 0 0 1rem;
 
     .icon {
         color: $highlight;
@@ -515,8 +548,7 @@ export default {
 }
 
 @media(max-width: $breakpoint3) {
-    .profile .avatar-link,
-    .extra {
+    .profile .avatar-link {
         display: none;
     }
 
@@ -541,6 +573,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .profile {
+        height: auto;
         flex-direction: column;
         padding: 0 0 .5rem 0;
     }
@@ -551,8 +584,9 @@ export default {
         margin: 0;
     }
 
-    .bio-header {
-        margin: 1rem 0;
+    .bio-item {
+        width: auto;
+        margin: 0;
     }
 
     .city,
@@ -565,9 +599,15 @@ export default {
     .scraped {
         display: none;
     }
+}
 
-    .social {
-        padding: 0 1rem;
+@media(max-width: $breakpoint0) {
+    .header-social {
+        display: none;
+    }
+
+    .header-name {
+        flex-grow: 1;
     }
 }
 </style>

public/css/style.css

@@ -1018,6 +1018,41 @@
 
 /* $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;
@@ -1039,7 +1074,6 @@
   -webkit-box-direction: normal;
           flex-direction: row;
   flex-shrink: 0;
-  padding: 1rem 0 0 0;
 }
 .profile .avatar-link[data-v-ea0483c2] {
     font-size: 0;
@@ -1076,7 +1110,7 @@
   margin: 0 0 0 1rem;
 }
 .bio-item[data-v-ea0483c2] {
-  width: calc(50% - 2rem);
+  width: calc(50% - 4rem);
   display: -webkit-box;
   display: flex;
   -webkit-box-pack: justify;
@@ -1127,16 +1161,19 @@
     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;
-    -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);
+  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);
+          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;
@@ -1164,15 +1201,13 @@
   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;
@@ -1186,11 +1221,10 @@
 }
 .social[data-v-ea0483c2] {
   display: block;
-  margin: 1rem 0;
 }
 .social-link[data-v-ea0483c2] {
   display: inline-block;
-  padding: 0 1rem 0 0;
+  padding: 0 0 0 1rem;
 }
 .social-link .icon[data-v-ea0483c2] {
     color: rgba(255, 255, 255, 0.5);
@@ -1235,8 +1269,7 @@
 }
 }
 @media (max-width: 1200px) {
-.profile .avatar-link[data-v-ea0483c2],
-  .extra[data-v-ea0483c2] {
+.profile .avatar-link[data-v-ea0483c2] {
     display: none;
 }
 .actor-content[data-v-ea0483c2] {
@@ -1259,6 +1292,7 @@
 }
 @media (max-width: 720px) {
 .profile[data-v-ea0483c2] {
+    height: auto;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
             flex-direction: column;
@@ -1269,8 +1303,9 @@
     padding: 0 1rem;
     margin: 0;
 }
-.bio-header[data-v-ea0483c2] {
-    margin: 1rem 0;
+.bio-item[data-v-ea0483c2] {
+    width: auto;
+    margin: 0;
 }
 .city[data-v-ea0483c2],
   .state[data-v-ea0483c2],
@@ -1282,8 +1317,14 @@
   .scraped[data-v-ea0483c2] {
     display: none;
 }
-.social[data-v-ea0483c2] {
-    padding: 0 1rem;
+}
+@media (max-width: 540px) {
+.header-social[data-v-ea0483c2] {
+    display: none;
+}
+.header-name[data-v-ea0483c2] {
+    -webkit-box-flex: 1;
+            flex-grow: 1;
 }
 }