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

52 wiersze
1.3 KiB
HTML

<div class="generic-instance-settings 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>
<GenericInstanceSettingsStyle />
<style>
.acct-current-user {
line-height: 1.4;
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 '../../ExternalLink.html'
import Avatar from '../../Avatar.html'
import AccountDisplayName from '../../profile/AccountDisplayName.html'
import GenericInstanceSettingsStyle from './GenericInstanceSettingsStyle.html'
export default {
components: {
Avatar,
ExternalLink,
AccountDisplayName,
GenericInstanceSettingsStyle
}
}
</script>