first stab at a profile page
This commit is contained in:
Nolan Lawson
parent
f469dc1272
commit
4620a79b17
|
|
@ -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-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-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'}
|
||||
]
|
||||
|
|
@ -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>
|
||||
|
|
@ -11,6 +11,9 @@
|
|||
dynamicIcon="#fa-user" >
|
||||
{{#if $isUserLoggedIn}}
|
||||
<DynamicPageBanner title="{{profileName}}" />
|
||||
{{#if $currentAccountProfile}}
|
||||
<AccountProfile profile="{{$currentAccountProfile}}" />
|
||||
{{/if}}
|
||||
<LazyTimeline timeline='account/{{params.accountId}}' />
|
||||
{{else}}
|
||||
<HiddenFromSSR>
|
||||
|
|
@ -30,6 +33,7 @@
|
|||
import HiddenFromSSR from '../_components/HiddenFromSSR'
|
||||
import DynamicPageBanner from '../_components/DynamicPageBanner.html'
|
||||
import { showAccountProfile } from './_actions/[accountId]'
|
||||
import AccountProfile from '../_components/AccountProfile.html'
|
||||
|
||||
export default {
|
||||
oncreate() {
|
||||
|
|
@ -50,7 +54,8 @@
|
|||
LazyTimeline,
|
||||
FreeTextLayout,
|
||||
HiddenFromSSR,
|
||||
DynamicPageBanner
|
||||
DynamicPageBanner,
|
||||
AccountProfile
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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-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-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>
|
||||
<!-- The application will be rendered inside this element,
|
||||
|
|
|
|||
Loading…
Reference in New Issue