pinafore/routes/_components/profile/AccountProfileMeta.html

{#if emojifiedFields.length}
  <h2 class="sr-only">Fields</h2>
  <div class="account-profile-meta">
    <div class="account-profile-meta-border"></div>
    {#each emojifiedFields as field, i}
      <div
        id="account-profile-meta-name-{i}"
        class="account-profile-meta-cell account-profile-meta-name"
        role="term"
      >
        {field.name}
      </div>
      <div
        class="account-profile-meta-cell account-profile-meta-value"
        role="definition"
        aria-labelledby="account-profile-meta-name-{i}"
      >
        {@html field.value}
      </div>
    {/each}
    <div class="account-profile-meta-border"></div>
  </div>
{/if}
<style>
  .account-profile-meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-row-gap: 5px;
    align-items: center;
    padding: 10px 0;
  }

  .account-profile-meta-border {
    height: 1px;
    width: 100%;
    grid-column: 1 / 3;
    background: var(--main-border);
    justify-self: center;
  }

  .account-profile-meta-cell {
    word-wrap: break-word;
    overflow: hidden;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    font-size: 1.1em;
  }

  .account-profile-meta-name {
    padding: 10px 20px 10px 0;
    text-transform: uppercase;
    color: var(--deemphasized-text-color);
    position: relative;
    max-width: 40vw;
  }

  .account-profile-meta-name:after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    border-right: 1px solid var(--main-border);
  }

  .account-profile-meta-value {
    padding: 10px 10px 10px 20px;
  }

  @media (max-width: 767px) {
    .account-profile-meta {
      padding: 5px 0;
    }
    .account-profile-meta-cell {
      font-size: 1em;
    }
    .account-profile-meta-name {
      padding: 5px 10px 5px 0;
    }
    .account-profile-meta-value {
      padding: 5px 10px 5px 10px;
    }
  }
</style>
<script>
  import { emojifyText } from '../../_utils/emojifyText'
  import { store } from '../../_store/store'

  export default {
    store: () => store,
    computed: {
      emojis: ({ account }) => account.emojis || [],
      fields: ({ account }) => account.fields || [],
      emojifiedFields: ({ fields, emojis, $autoplayGifs }) => (fields.map(field => ({
        name: field.name,
        value: emojifyText(field.value, emojis, $autoplayGifs)
      })))
    }
  }
</script>