pinafore/routes/_components/AccountProfile.html

<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>