pinafore/routes/_components/search/AccountSearchResult.html

99 lines
2.4 KiB
HTML

<SearchResult href="/accounts/{account.id}">
<div class="search-result-account">
<div class="search-result-account-avatar">
<Avatar {account} size="small" />
</div>
<div class="search-result-account-name">
<AccountDisplayName {account} />
</div>
<div class="search-result-account-username">
{'@' + account.acct}
</div>
{#if actions && actions.length}
<div class="search-result-account-buttons">
{#each actions as action}
<IconButton
label={action.label}
on:click="onButtonClick(event, action, account.id)"
href={action.icon}
big="true"
/>
{/each}
</div>
{/if}
</div>
</SearchResult>
<style>
.search-result-account {
display: grid;
grid-template-areas:
"avatar name buttons"
"avatar username buttons";
grid-column-gap: 20px;
grid-template-columns: max-content 1fr max-content;
align-items: center;
}
:global(.search-result-account-avatar) {
grid-area: avatar;
}
.search-result-account-name {
grid-area: name;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1.2em;
}
.search-result-account-username {
grid-area: username;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--deemphasized-text-color);
}
.search-result-account-buttons {
grid-area: buttons;
display: flex;
}
:global(.search-result-account-buttons .icon-button) {
margin-right: 20px;
}
:global(.search-result-account-buttons .icon-button:last-child) {
margin-right: 0;
}
@media (max-width: 767px) {
.search-result-account {
grid-column-gap: 10px;
}
:global(.search-result-account-buttons .icon-button) {
margin-right: 10px;
}
}
</style>
<script>
import Avatar from '../Avatar.html'
import SearchResult from './SearchResult.html'
import IconButton from '../IconButton.html'
import AccountDisplayName from '../profile/AccountDisplayName.html'
export default {
data: () => ({
actions: void 0
}),
methods: {
onButtonClick (event, action, accountId) {
event.preventDefault()
event.stopPropagation()
this.fire('click', {
action,
accountId
})
}
},
components: {
Avatar,
SearchResult,
IconButton,
AccountDisplayName
}
}
</script>