<div class="account-profile {{headerIsMissing ? 'header-is-missing' : ''}}" style="background-image: url({{$autoplayGifs ? account.header : account.header_static}});"> <div class="account-profile-grid-wrapper"> <div class="account-profile-backdrop"></div> <div class="account-profile-grid"> <div class="account-profile-avatar"> <Avatar :account size="big" /> </div> <div class="account-profile-name"> <ExternalLink href="{{account.url}}" showIcon="true" normalIconColor="true"> {{account.display_name || account.acct}} </ExternalLink> </div> <div class="account-profile-username"> {{'@' + account.acct}} </div> <div class="account-profile-followed-by"> {{#if relationship && relationship.followed_by}} <span> Follows you </span> {{/if}} </div> <div class="account-profile-follow"> {{#if verifyCredentials && relationship && verifyCredentials.id !== relationship.id}} <IconButton label="{{followLabel}}" href="{{followIcon}}" pressable="true" pressed="{{following}}" big="true" on:click="onFollowButtonClick(event)" animation="{{animateFollowButton && followButtonAnimation}}" /> {{/if}} </div> <div class="account-profile-note"> {{{massagedNote}}} </div> <div class="account-profile-details"> <div class="account-profile-details-item"> <span class="account-profile-details-item-title"> Toots </span> <span class="account-profile-details-item-datum"> {{account.statuses_count || 0}} </span> </div> <div class="account-profile-details-item"> <span class="account-profile-details-item-title"> Follows </span> <span class="account-profile-details-item-datum"> {{account.following_count || 0}} </span> </div> <div class="account-profile-details-item"> <span class="account-profile-details-item-title"> Followers </span> <span class="account-profile-details-item-datum"> {{account.followers_count || 0}} </span> </div> </div> </div> </div> </div> <style> .account-profile { position: relative; background-size: cover; background-position: center; padding-top: 175px; } .account-profile.header-is-missing { padding-top: 0; background-color: #ccc; } .account-profile-backdrop { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 5; } .account-profile-grid { display: grid; grid-template-areas: "avatar name followed-by follow" "avatar username username follow" "avatar note note follow" "details details details details"; grid-template-columns: min-content auto 1fr min-content; grid-column-gap: 10px; grid-row-gap: 5px; padding: 20px; justify-content: center; z-index: 10; position: relative; } @supports (-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%)) { :global(.account-profile-grid-wrapper) { -webkit-backdrop-filter: blur(7px) saturate(110%); backdrop-filter: blur(7px) saturate(110%); background-color: rgba(255, 255, 255, 0.7); } } @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) { :global(.account-profile-grid-wrapper) { background-color: rgba(255, 255, 255, 0.9); } } .account-profile-followed-by { grid-area: followed-by; align-self: center; text-transform: uppercase; color: var(--deemphasized-text-color); font-size: 0.8em; } .account-profile-followed-by span { background: rgba(30, 30, 30, 0.2); border-radius: 4px; padding: 3px 5px; white-space: nowrap; } .account-profile-avatar { grid-area: avatar; } .account-profile-username { grid-area: username; color: var(--deemphasized-text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; } .account-profile-follow { grid-area: follow; align-self: flex-start; } .account-profile-name { grid-area: name; font-size: 1.5em; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } :global(.account-profile-name a) { color: var(--body-text-color); text-decoration: none; } :global(.account-profile-name a:hover) { color: var(--body-text-color); text-decoration: underline; } .account-profile-note { grid-area: note; padding: 10px 0; font-size: 0.9em; word-wrap: break-word; overflow: hidden; white-space: pre-wrap; } :global(.account-profile-note p) { margin: 0 0 20px; } :global(.account-profile-note p:first-child) { margin: 0 0 20px; } :global(.account-profile-note p:last-child) { margin: 0; } .account-profile-details { grid-area: details; display: flex; margin: 0 5px; } .account-profile-details-item { flex: 1; display: flex; flex-direction: row; padding: 5px; justify-content: center; font-size: 1.1em; } .account-profile-details-item:hover { background: var(--button-bg-hover); cursor: pointer; } .account-profile-details-item:active { background: var(--button-bg-active); } .account-profile-details-item-title { text-transform: uppercase; color: var(--deemphasized-text-color); margin-right: 5px; } .account-profile-details-item-datum { color: var(--body-text-color); margin-left: 5px; font-weight: 600; } @media (max-width: 767px) { .account-profile-name { font-size: 1.3em; } .account-profile-grid { display: grid; grid-template-areas: "avatar name follow" "avatar username follow" "avatar followed-by follow" "note note note" "details details details"; grid-template-columns: min-content minmax(auto, 1fr) min-content; grid-template-rows: min-content min-content 1fr min-content; padding: 10px; } .account-profile-note { padding: 5px 0; } .account-profile-username { font-size: 1.1em; } .account-profile-name, .account-profile-username { align-self: flex-start; } } </style> <script> import IconButton from './IconButton.html' import ExternalLink from './ExternalLink.html' import Avatar from './Avatar.html' import { store } from '../_store/store' import { setAccountFollowed } from '../_actions/follow' import { database } from '../_database/database' import { FOLLOW_BUTTON_ANIMATION } from '../_static/animations' export default { methods: { async onFollowButtonClick(e) { e.preventDefault() e.stopPropagation() let accountId = this.get('accountId') let instanceName = this.store.get('currentInstance') let following = this.get('following') let followRequested = this.get('followRequested') this.set({animateFollowButton: true}) await setAccountFollowed(accountId, !(following || followRequested)) let relationship = await database.getRelationship(instanceName, accountId) this.set({relationship}) } }, store: () => store, data: () => ({ followButtonAnimation: FOLLOW_BUTTON_ANIMATION }), computed: { accountId: (account) => account.id, headerIsMissing: (account) => account.header.endsWith('missing.png'), note: (account) => account.note, massagedNote: (note) => { // GNU Social / Pleroma don't add <p> tags if (!note.startsWith('<p>')) { note = `<p>${note}</p>` } return note }, following: (relationship) => relationship && relationship.following, followRequested: (relationship, account) => { return relationship && relationship.requested && account && account.locked }, followLabel: (following, followRequested) => { if (following) { return 'Unfollow' } else if (followRequested) { return 'Unfollow (follow requested)' } else { return 'Follow' } }, followIcon: (following, followRequested) => { if (following) { return '#fa-user-times' } else if (followRequested) { return '#fa-hourglass' } else { return '#fa-user-plus' } } }, components: { IconButton, ExternalLink, Avatar } } </script>