51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
|
<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>
|