Pinafore-Web-Client-Frontend/src/routes/_components/profile/AccountProfile.html

<h1 class="sr-only">{profileForAccount}</h1>
{#if moved}
  <AccountProfileMovedBanner {account} />
{/if}
<div class={className}
     style="background-image: url({headerImage});"
     ref:accountProfile>
  <div class="account-profile-grid-wrapper">
    <div class="account-profile-grid">
      <AccountProfileHeader {account} {relationship} {verifyCredentials} />
      <AccountProfileFollow {account} {relationship} {verifyCredentials} />
      <AccountProfileNote {account} />
      <AccountProfileMeta {account} />
      <AccountProfileDetails {account} {relationship} {verifyCredentials} />
    </div>
  </div>
  <AccountProfileFilters account={$currentAccountProfile} {filter} />
</div>
<style>
  .account-profile {
    position: relative;
    background-size: cover;
    background-position: center;
    padding-top: 175px;
  }

  .account-profile.moved {
    filter: grayscale(0.8);
  }

  .account-profile.header-image-is-missing {
    padding-top: 0;
    background-color: #ccc;
  }

  .account-profile-grid {
    display: grid;
    grid-template-areas: "avatar     name        label     followed-by   follow"
                         "avatar     username    username  username      follow"
                         "avatar     note        note      note          follow"
                         "meta       meta        meta      meta          meta"
                         "details    details     details   details       details";
    grid-template-columns: min-content auto 1fr 1fr min-content;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
    padding: 20px;
    justify-content: center;
  }

  @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: var(--account-profile-bg-backdrop-filter);
    }
  }

  @supports not ((-webkit-backdrop-filter: blur(1px) saturate(1%)) or (backdrop-filter: blur(1px) saturate(1%))) {
    :global(.account-profile-grid-wrapper) {
      background-color: var(--account-profile-bg);
    }
  }

  @media (max-width: 767px) {
    .account-profile {
      padding-top: 100px;
    }

    .account-profile-grid {
      display: grid;
      grid-template-areas: "avatar     name          follow"
                           "avatar     label         follow"
                           "avatar     username      follow"
                           "avatar     followed-by   follow"
                           "note       note          note"
                           "meta       meta          meta"
                           "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;
    }
  }

  @media (max-width: 320px) {
    .account-profile {
      padding-top: 50px;
    }
  }

  @media (max-width: 240px) {
    .account-profile {
      padding-top: 0;
    }
    .account-profile-grid {
      grid-template-areas: "avatar      name"
                           "avatar      label"
                           "username    username"
                           "followed-by followed-by"
                           "follow      follow"
                           "note        note"
                           "meta        meta"
                           "details     details";
      grid-template-columns: min-content 1fr;
      grid-column-gap: 5px;
      grid-row-gap: 0;
    }
  }
</style>
<script>
  import AccountProfileHeader from './AccountProfileHeader.html'
  import AccountProfileFollow from './AccountProfileFollow.html'
  import AccountProfileNote from './AccountProfileNote.html'
  import AccountProfileMeta from './AccountProfileMeta.html'
  import AccountProfileDetails from './AccountProfileDetails.html'
  import AccountProfileMovedBanner from './AccountProfileMovedBanner.html'
  import AccountProfileFilters from './AccountProfileFilters.html'
  import { store } from '../../_store/store.js'
  import { classname } from '../../_utils/classname.js'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask.js'
  import { addEmojiTooltips } from '../../_utils/addEmojiTooltips.js'
  import { formatIntl } from '../../_utils/formatIntl.js'

  export default {
    oncreate () {
      scheduleIdleTask(() => addEmojiTooltips(this.refs.accountProfile))
    },
    store: () => store,
    computed: {
      headerImageIsMissing: ({ account }) => account.header.endsWith('missing.png'),
      headerImage: ({ $autoplayGifs, account }) => $autoplayGifs ? account.header : account.header_static,
      accountName: ({ account }) => (account && (account.display_name || account.username)) || '',
      moved: ({ account }) => account.moved,
      className: ({ headerImageIsMissing, $underlineLinks, moved }) => (classname(
        'account-profile',
        moved && 'moved',
        headerImageIsMissing && 'header-image-is-missing',
        $underlineLinks && 'underline-links'
      )),
      profileForAccount: ({ accountName }) => (
        formatIntl('intl.profileForAccount', { account: accountName })
      )
    },
    components: {
      AccountProfileHeader,
      AccountProfileFollow,
      AccountProfileNote,
      AccountProfileMeta,
      AccountProfileDetails,
      AccountProfileMovedBanner,
      AccountProfileFilters
    }
  }
</script>