Mastodon
/
Pinafore-Web-Client-Frontend
mirror of https://github.com/nolanlawson/pinafore
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(metadata): add verified metadata checkmark (#642) 

fixes #641
This commit is contained in:
Nolan Lawson 2018-11-12 16:20:54 -08:00 committed by GitHub
parent 0964442815
commit 94baf9e396
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
routes/_components/profile/AccountProfileMeta.html
View File

@ -1,8 +1,8 @@
{#if emojifiedFields.length} {#if massagedFields.length}
<h2 class="sr-only">Fields</h2> <h2 class="sr-only">Fields</h2>
<div class="account-profile-meta"> <div class="account-profile-meta">
<div class="account-profile-meta-border"></div> <div class="account-profile-meta-border"></div>
{#each emojifiedFields as field, i} {#each massagedFields as field, i}
<div <div
id="account-profile-meta-name-{i}" id="account-profile-meta-name-{i}"
class="account-profile-meta-cell account-profile-meta-name" class="account-profile-meta-cell account-profile-meta-name"
@ -17,6 +17,13 @@
> >
{@html field.value} {@html field.value}
</div> </div>
<div class="account-profile-meta-cell account-profile-meta-verified">
{#if field.verified}
<svg class="account-profile-meta-verified-svg">
<use xlink:href='#fa-check' />
</svg>
{/if}
</div>
{/each} {/each}
<div class="account-profile-meta-border"></div> <div class="account-profile-meta-border"></div>
</div> </div>
@ -25,7 +32,7 @@
.account-profile-meta { .account-profile-meta {
grid-area: meta; grid-area: meta;
display: grid; display: grid;
grid-template-columns: max-content 1fr; grid-template-columns: max-content 1fr min-content;
grid-row-gap: 5px; grid-row-gap: 5px;
align-items: center; align-items: center;
padding: 10px 0; padding: 10px 0;
@ -34,7 +41,7 @@
.account-profile-meta-border { .account-profile-meta-border {
height: 1px; height: 1px;
width: 100%; width: 100%;
grid-column: 1 / 3; grid-column: 1 / 4;
background: var(--main-border); background: var(--main-border);
justify-self: center; justify-self: center;
} }
@ -47,6 +54,12 @@
font-size: 1.1em; font-size: 1.1em;
} }
.account-profile-meta-verified-svg {
width: 24px;
height: 24px;
fill: var(--svg-fill);
}
.account-profile-meta-name { .account-profile-meta-name {
padding: 10px 20px 10px 0; padding: 10px 20px 10px 0;
text-transform: uppercase; text-transform: uppercase;
@ -92,9 +105,10 @@
computed: { computed: {
emojis: ({ account }) => account.emojis || [], emojis: ({ account }) => account.emojis || [],
fields: ({ account }) => account.fields || [], fields: ({ account }) => account.fields || [],
emojifiedFields: ({ fields, emojis, $autoplayGifs }) => (fields.map(field => ({ massagedFields: ({ fields, emojis, $autoplayGifs }) => (fields.map(field => ({
name: field.name, name: field.name,
value: emojifyText(field.value, emojis, $autoplayGifs) value: emojifyText(field.value, emojis, $autoplayGifs),
verified: !!field.verified_at
}))) })))
} }
} }