add label for bots (#479)

fixes #463
This commit is contained in:
Nolan Lawson 2018-08-23 18:41:43 -07:00 committed by GitHub
parent c4c128030e
commit 1753e20f29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 57 additions and 14 deletions

View file

@ -0,0 +1,27 @@
<div class="generic-label {className || ''}">
<span class="generic-label-span">
{label}
</span>
</div>
<style>
.generic-label {
display: flex;
align-items: center;
justify-content: center;
}
.generic-label-span {
text-transform: uppercase;
padding: 3px 7px 2px;
background: var(--nav-bg);
color: var(--nav-text-color);
font-size: 0.8em;
border-radius: 4px;
}
</style>
<script>
export default {
data: () => ({
className: void 0
})
}
</script>

View file

@ -24,11 +24,11 @@
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name followed-by follow"
"avatar username username follow"
"avatar note note follow"
"details details details details";
grid-template-columns: min-content auto 1fr min-content;
grid-template-areas: "avatar name label followed-by follow"
"avatar username username username follow"
"avatar note note note follow"
"details details details details details";
grid-template-columns: min-content auto 1fr 1fr min-content;
grid-column-gap: 10px;
grid-row-gap: 5px;
padding: 20px;
@ -53,6 +53,7 @@
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name follow"
"avatar label follow"
"avatar username follow"
"avatar followed-by follow"
"note note note"

View file

@ -2,14 +2,18 @@
<Avatar {account} size="big" />
</div>
<div class="account-profile-name">
<ExternalLink href={account.url}
<ExternalLink
className="account-profile-name-link"
href={account.url}
showIcon="true"
normalIconColor="true"
ariaLabel="{accessibleName} (opens in new window)"
>
ariaLabel="{accessibleName} (opens in new window)">
<AccountDisplayName {account} />
</ExternalLink>
</div>
{#if label}
<Label {label} className="account-profile-label" />
{/if}
<div class="account-profile-username">
{'@' + account.acct}
</div>
@ -56,15 +60,22 @@
text-overflow: ellipsis;
min-width: 0;
}
:global(.account-profile-name a) {
:global(.account-profile-name-link) {
color: var(--body-text-color);
text-decoration: none;
}
:global(.account-profile-name a:hover) {
:global(.account-profile-name-link:hover) {
color: var(--body-text-color);
text-decoration: underline;
}
:global(.account-profile-label) {
grid-area: label;
justify-content: left !important;
}
@media (max-width: 767px) {
.account-profile-name {
font-size: 1.3em;
@ -83,6 +94,7 @@
import AccountDisplayName from '../profile/AccountDisplayName.html'
import { removeEmoji } from '../../_utils/removeEmoji'
import { store } from '../../_store/store'
import Label from '../Label.html'
export default {
store: () => store,
@ -94,12 +106,15 @@
return removeEmoji(displayName, emojis) || displayName
}
return displayName
}
},
bot: ({ account }) => !!account.bot,
label: ({ bot }) => bot ? 'bot' : ''
},
components: {
Avatar,
ExternalLink,
AccountDisplayName
AccountDisplayName,
Label
}
}
</script>