91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
|
<div class="account-profile-moved-banner">
|
||
|
|
<Avatar className="from-avatar" size="extra-small" {account} />
|
||
|
|
<div class="moved-label">
|
||
|
|
<svg class="moved-svg">
|
||
|
|
<use xlink:href="#fa-suitcase"/>
|
||
|
|
</svg>
|
||
|
|
{accessibleName} has moved:
|
||
|
|
</div>
|
||
|
|
<a class="moved-avatar" href="/accounts/{moved.id}">
|
||
|
|
<Avatar account={moved} />
|
||
|
|
</a>
|
||
|
|
<a class="moved-to-name" href="/accounts/{moved.id}" title="@{moved.acct}">{movedAccessibleName}</a>
|
||
|
|
<a class="moved-to-acct" href="/accounts/{moved.id}">@{moved.acct}</a>
|
||
|
|
</div>
|
||
|
|
<style>
|
||
|
|
.account-profile-moved-banner {
|
||
|
|
display: grid;
|
||
|
|
grid-template-areas: "from-avatar label"
|
||
|
|
"avatar name"
|
||
|
|
"avatar acct";
|
||
|
|
grid-template-columns: max-content 1fr;
|
||
|
|
margin: 10px 20px;
|
||
|
|
grid-row-gap: 10px;
|
||
|
|
grid-column-gap: 20px;
|
||
|
|
}
|
||
|
|
:global(.from-avatar) {
|
||
|
|
grid-area: from-avatar;
|
||
|
|
justify-self: flex-end;
|
||
|
|
}
|
||
|
|
.moved-svg {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
fill: var(--deemphasized-text-color);
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.moved-label, .moved-to-acct, .moved-to-name {
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.moved-avatar {
|
||
|
|
grid-area: avatar;
|
||
|
|
}
|
||
|
|
.moved-label {
|
||
|
|
grid-area: label;
|
||
|
|
}
|
||
|
|
.moved-to-acct {
|
||
|
|
grid-area: acct;
|
||
|
|
font-size: 1.2em;
|
||
|
|
}
|
||
|
|
.moved-to-name {
|
||
|
|
grid-area: name;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1em;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--body-text-color);
|
||
|
|
}
|
||
|
|
.moved-to-name:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
import { removeEmoji } from '../../_utils/removeEmoji'
|
||
|
|
import Avatar from '../Avatar.html'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
computed: {
|
||
|
|
emojis: ({ account }) => (account.emojis || []),
|
||
|
|
displayName: ({ account }) => account.display_name || account.username,
|
||
|
|
accessibleName: ({ displayName, emojis, $omitEmojiInDisplayNames }) => {
|
||
|
|
return $omitEmojiInDisplayNames
|
||
|
|
? removeEmoji(displayName, emojis) || displayName
|
||
|
|
: displayName
|
||
|
|
},
|
||
|
|
moved: ({ account }) => account.moved,
|
||
|
|
movedEmojis: ({ moved }) => (moved.emojis || []),
|
||
|
|
movedDisplayName: ({ moved }) => moved.display_name || moved.username,
|
||
|
|
movedAccessibleName: ({ movedDisplayName, movedEmojis, $omitEmojiInDisplayNames }) => {
|
||
|
|
return $omitEmojiInDisplayNames
|
||
|
|
? removeEmoji(movedDisplayName, movedEmojis) || movedDisplayName
|
||
|
|
: movedDisplayName
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
Avatar
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|