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