pinafore/routes/_components/settings/instance/InstanceUserProfile.html

51 lines
1.2 KiB
HTML
Raw Normal View History

2018-10-28 22:28:22 +00:00
<div class="acct-current-user">
<div class="acct-avatar">
<Avatar account={verifyCredentials} size="big" />
</div>
<ExternalLink className="acct-handle"
href={verifyCredentials.url} >
{'@' + verifyCredentials.acct}
</ExternalLink>
<span class="acct-display-name">
<AccountDisplayName account={verifyCredentials} />
</span>
</div>
<style>
.acct-current-user {
background: var(--form-bg);
border: 1px solid var(--main-border);
border-radius: 4px;
padding: 20px;
display: grid;
align-items: center;
font-size: 1.3em;
grid-template-areas:
"avatar handle"
"avatar display-name";
grid-template-columns: min-content 1fr;
grid-column-gap: 20px;
grid-row-gap: 10px;
}
:global(.acct-avatar) {
grid-area: avatar;
}
:global(.acct-handle) {
grid-area: handle;
}
.acct-display-name {
grid-area: display-name;
}
</style>
<script>
import ExternalLink from '../../../_components/ExternalLink.html'
import Avatar from '../../../_components/Avatar.html'
import AccountDisplayName from '../../../_components/profile/AccountDisplayName.html'
export default {
components: {
Avatar,
ExternalLink,
AccountDisplayName
}
}
</script>