diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue index cdde7db2..7923540e 100644 --- a/assets/components/actors/actor.vue +++ b/assets/components/actors/actor.vue @@ -5,6 +5,50 @@ > +
+

+ {{ actor.name }} + +

+ +
  • + Also known as + {{ actor.aliases.join(', ') }} +
  • + + +
    +
    @@ -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 { diff --git a/public/css/style.css b/public/css/style.css index 47ff7f0e..7e252bcc 100644 --- a/public/css/style.css +++ b/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; } }