forked from treehouse/mastodon
[Glitch] Display verified links in glitch flavor
Port front-end changes from f4d549d300
to glitch-soc
rebase/4.0.0rc2
parent
5833cc41c2
commit
9e8d776a77
|
@ -16,8 +16,18 @@ const messages = defineMessages({
|
||||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
||||||
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
||||||
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
||||||
|
link_verified_on: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const dateFormatOptions = {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
hour12: false,
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
};
|
||||||
|
|
||||||
@injectIntl
|
@injectIntl
|
||||||
export default class Header extends ImmutablePureComponent {
|
export default class Header extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
@ -122,7 +132,9 @@ export default class Header extends ImmutablePureComponent {
|
||||||
{fields.map((pair, i) => (
|
{fields.map((pair, i) => (
|
||||||
<dl key={i}>
|
<dl key={i}>
|
||||||
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
|
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
|
||||||
<dd dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} title={pair.get('value_plain')} />
|
<dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
|
||||||
|
{pair.get('verified_at') && <span title={intl.formatMessage(messages.link_verified_on, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fa fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
|
||||||
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,17 +4,11 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 20px -10px -20px;
|
margin: 20px -10px -20px;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
|
border-top: 0;
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover{
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
border-top: 1px solid lighten($ui-base-color, 4%);
|
||||||
|
border-bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,10 +29,6 @@
|
||||||
width: 120px;
|
width: 120px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
a {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
|
@ -46,8 +36,9 @@
|
||||||
color: $primary-text-color;
|
color: $primary-text-color;
|
||||||
background: $ui-base-color;
|
background: $ui-base-color;
|
||||||
|
|
||||||
a {
|
&.verified {
|
||||||
color: $highlight-text-color;
|
border: 1px solid rgba($valid-value-color, 0.5);
|
||||||
|
background: rgba($valid-value-color, 0.25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue