first stab at a profile page

This commit is contained in:
Nolan Lawson 2018-01-28 00:29:45 -08:00
parent f469dc1272
commit 4620a79b17
4 changed files with 138 additions and 2 deletions

View File

@ -15,5 +15,7 @@ module.exports = [
{id:'fa-eye-slash', src:'node_modules/font-awesome-svg-png/white/svg/eye-slash.svg', title: 'Hide Sensitive Content'}, {id:'fa-eye-slash', src:'node_modules/font-awesome-svg-png/white/svg/eye-slash.svg', title: 'Hide Sensitive Content'},
{id:'fa-hashtag', src:'node_modules/font-awesome-svg-png/white/svg/hashtag.svg', title: 'Hashtag'}, {id:'fa-hashtag', src:'node_modules/font-awesome-svg-png/white/svg/hashtag.svg', title: 'Hashtag'},
{id:'fa-lock', src:'node_modules/font-awesome-svg-png/white/svg/lock.svg', title: 'Locked'}, {id:'fa-lock', src:'node_modules/font-awesome-svg-png/white/svg/lock.svg', title: 'Locked'},
{id:'fa-envelope', src:'node_modules/font-awesome-svg-png/white/svg/envelope.svg', title: 'Sealed Envelope'} {id:'fa-envelope', src:'node_modules/font-awesome-svg-png/white/svg/envelope.svg', title: 'Sealed Envelope'},
{id:'fa-user-times', src:'node_modules/font-awesome-svg-png/white/svg/user-times.svg', title: 'Stop Following'},
{id:'fa-user-plus', src:'node_modules/font-awesome-svg-png/white/svg/user-plus.svg', title: 'Follow'}
] ]

View File

@ -0,0 +1,127 @@
<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{profile.header}});">
<div class="account-profile-grid">
<div class="account-profile-avatar">
<img src="{{profile.avatar}}">
</div>
<div class="account-profile-name">
{{profile.display_name}}
</div>
<div class="account-profile-following">
<span>
Follows you
</span>
</div>
<div class="account-profile-follow">
<svg>
<use xlink:href="#fa-user-plus" />
</svg>
</div>
<div class="account-profile-note">
{{{profile.note}}}
</div>
</div>
<div class="account-profile-background"></div>
</div>
<style>
.account-profile {
position: relative;
background-size: cover;
background-position: center;
padding-top: 175px;
}
.account-profile.header-is-missing {
padding-top: 0;
}
.account-profile-background {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 5;
}
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name following follow"
"avatar note note note";
grid-template-columns: min-content min-content 1fr min-content;
grid-column-gap: 10px;
grid-row-gap: 2px;
padding: 10px;
justify-content: center;
}
@supports (-webkit-backdrop-filter: blur(20px) saturate(130%)) or (backdrop-filter: blur(20px) saturate(130%)) {
:global(.account-profile-grid) {
-webkit-backdrop-filter: blur(20px) saturate(130%);
backdrop-filter: blur(20px) saturate(130%);
background-color: rgba(255, 255, 255, 0.5);
}
}
@supports not ((-webkit-backdrop-filter: blur(20px) saturate(130%)) or (backdrop-filter: blur(20px) saturate(130%))) {
:global(.account-profile-grid) {
background-color: rgba(255, 255, 255, 0.9);
}
}
.account-profile-following, .account-profile-avatar, .account-profile-follow,
.account-profile-name, .account-profile-username, .account-profile-note {
z-index: 10;
}
.account-profile-following {
grid-area: following;
align-self: center;
text-transform: uppercase;
color: var(--deemphasized-text-color);
font-size: 0.8em;
}
.account-profile-following span {
background: rgba(30, 30, 30, 0.2);
border-radius: 4px;
padding: 3px 5px;
}
.account-profile-avatar {
grid-area: avatar;
}
.account-profile-avatar img {
border-radius: 4px;
width: 100px;
height: 100px;
}
.account-profile-follow {
grid-area: follow;
align-self: center;
}
.account-profile-follow svg {
width: 32px;
height: 32px;
fill: var(--svg-fill);
}
.account-profile-name {
grid-area: name;
font-size: 1.5em;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-profile-note {
grid-area: note;
}
:global(.account-profile-note p) {
font-size: 1em;
}
</style>
<script>
export default {
computed: {
headerIsMissing: (profile) => profile.header.endsWith('missing.png')
}
}
</script>

View File

@ -11,6 +11,9 @@
dynamicIcon="#fa-user" > dynamicIcon="#fa-user" >
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<DynamicPageBanner title="{{profileName}}" /> <DynamicPageBanner title="{{profileName}}" />
{{#if $currentAccountProfile}}
<AccountProfile profile="{{$currentAccountProfile}}" />
{{/if}}
<LazyTimeline timeline='account/{{params.accountId}}' /> <LazyTimeline timeline='account/{{params.accountId}}' />
{{else}} {{else}}
<HiddenFromSSR> <HiddenFromSSR>
@ -30,6 +33,7 @@
import HiddenFromSSR from '../_components/HiddenFromSSR' import HiddenFromSSR from '../_components/HiddenFromSSR'
import DynamicPageBanner from '../_components/DynamicPageBanner.html' import DynamicPageBanner from '../_components/DynamicPageBanner.html'
import { showAccountProfile } from './_actions/[accountId]' import { showAccountProfile } from './_actions/[accountId]'
import AccountProfile from '../_components/AccountProfile.html'
export default { export default {
oncreate() { oncreate() {
@ -50,7 +54,8 @@
LazyTimeline, LazyTimeline,
FreeTextLayout, FreeTextLayout,
HiddenFromSSR, HiddenFromSSR,
DynamicPageBanner DynamicPageBanner,
AccountProfile
} }
} }
</script> </script>

View File

@ -81,6 +81,8 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
<symbol id="fa-hashtag" viewBox="0 0 1792 1792"><title>Hashtag</title><path d="M991 1024l64-256H801l-64 256h254zm768-504l-56 224q-7 24-31 24h-327l-64 256h311q15 0 25 12 10 14 6 28l-56 224q-5 24-31 24h-327l-81 328q-7 24-31 24H873q-16 0-26-12-9-12-6-28l78-312H665l-81 328q-7 24-31 24H328q-15 0-25-12-9-12-6-28l78-312H64q-15 0-25-12-9-12-6-28l56-224q7-24 31-24h327l64-256H200q-15 0-25-12-10-14-6-28l56-224q5-24 31-24h327l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h254l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h311q15 0 25 12 9 12 6 28z"></path></symbol> <symbol id="fa-hashtag" viewBox="0 0 1792 1792"><title>Hashtag</title><path d="M991 1024l64-256H801l-64 256h254zm768-504l-56 224q-7 24-31 24h-327l-64 256h311q15 0 25 12 10 14 6 28l-56 224q-5 24-31 24h-327l-81 328q-7 24-31 24H873q-16 0-26-12-9-12-6-28l78-312H665l-81 328q-7 24-31 24H328q-15 0-25-12-9-12-6-28l78-312H64q-15 0-25-12-9-12-6-28l56-224q7-24 31-24h327l64-256H200q-15 0-25-12-10-14-6-28l56-224q5-24 31-24h327l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h254l81-328q7-24 32-24h224q15 0 25 12 9 12 6 28l-78 312h311q15 0 25 12 9 12 6 28z"></path></symbol>
<symbol id="fa-lock" viewBox="0 0 1792 1792"><title>Locked</title><path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z"></path></symbol> <symbol id="fa-lock" viewBox="0 0 1792 1792"><title>Locked</title><path d="M640 768h512V576q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28H416q-40 0-68-28t-28-68V864q0-40 28-68t68-28h32V576q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z"></path></symbol>
<symbol id="fa-envelope" viewBox="0 0 1792 1792"><title>Sealed Envelope</title><path d="M1792 710v794q0 66-47 113t-113 47H160q-66 0-113-47T0 1504V710q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38T639 1015q-91-64-262-182.5T172 690q-62-42-117-115.5T0 438q0-78 41.5-130T160 256h1472q65 0 112.5 47t47.5 113z"></path></symbol> <symbol id="fa-envelope" viewBox="0 0 1792 1792"><title>Sealed Envelope</title><path d="M1792 710v794q0 66-47 113t-113 47H160q-66 0-113-47T0 1504V710q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38T639 1015q-91-64-262-182.5T172 690q-62-42-117-115.5T0 438q0-78 41.5-130T160 256h1472q65 0 112.5 47t47.5 113z"></path></symbol>
<symbol id="fa-user-times" viewBox="0 0 2048 1792"><title>Stop Following</title><path d="M704 896q-159 0-271.5-112.5T320 512t112.5-271.5T704 128t271.5 112.5T1088 512 975.5 783.5 704 896zm1077 320l249 249q9 9 9 23 0 13-9 22l-136 136q-9 9-22 9-14 0-23-9l-249-249-249 249q-9 9-23 9-13 0-22-9l-136-136q-9-9-9-22 0-14 9-23l249-249-249-249q-9-9-9-23 0-13 9-22l136-136q9-9 22-9 14 0 23 9l249 249 249-249q9-9 23-9 13 0 22 9l136 136q9 9 9 22 0 14-9 23zm-498 0l-181 181q-37 37-37 91 0 53 37 90l83 83q-21 3-44 3H267q-121 0-194-69T0 1405q0-53 3.5-103.5t14-109T44 1084t43-97.5 62-81 85.5-53.5T346 832q19 0 39 17 154 122 319 122t319-122q20-17 39-17 28 0 57 6-28 27-41 50t-13 56q0 54 37 91z"></path></symbol>
<symbol id="fa-user-plus" viewBox="0 0 2048 1792"><title>Follow</title><path d="M704 896q-159 0-271.5-112.5T320 512t112.5-271.5T704 128t271.5 112.5T1088 512 975.5 783.5 704 896zm960 128h352q13 0 22.5 9.5t9.5 22.5v192q0 13-9.5 22.5t-22.5 9.5h-352v352q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-352h-352q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h352V672q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5v352zm-736 224q0 52 38 90t90 38h256v238q-68 50-171 50H267q-121 0-194-69T0 1405q0-53 3.5-103.5t14-109T44 1084t43-97.5 62-81 85.5-53.5T346 832q19 0 39 17 79 61 154.5 91.5T704 971t164.5-30.5T1023 849q20-17 39-17 132 0 217 96h-223q-52 0-90 38t-38 90v192z"></path></symbol>
</svg><!-- end insert svg here --> </svg><!-- end insert svg here -->
</svg> </svg>
<!-- The application will be rendered inside this element, <!-- The application will be rendered inside this element,