pinafore/routes/_components/search/AccountSearchResult.html

97 lines
2.4 KiB
HTML
Raw Normal View History

<SearchResult href="/accounts/{account.id}">
2018-02-07 05:54:49 +01:00
<div class="search-result-account">
<Avatar {account} size="small" className="search-result-account-avatar"/>
2018-02-07 05:54:49 +01:00
<div class="search-result-account-name">
<AccountDisplayName {account} />
2018-02-07 05:54:49 +01:00
</div>
<div class="search-result-account-username">
{'@' + account.acct}
2018-02-07 05:54:49 +01:00
</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}
2018-02-07 05:54:49 +01:00
</div>
</SearchResult>
<style>
.search-result-account {
display: grid;
grid-template-areas:
"avatar name buttons"
"avatar username buttons";
2018-02-07 05:54:49 +01:00
grid-column-gap: 20px;
grid-template-columns: max-content 1fr max-content;
2018-02-07 05:54:49 +01:00
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;
}
2018-02-07 06:20:33 +01:00
@media (max-width: 767px) {
.search-result-account {
grid-column-gap: 10px;
}
:global(.search-result-account-buttons .icon-button) {
margin-right: 10px;
}
2018-02-07 06:20:33 +01:00
}
2018-02-07 05:54:49 +01:00
</style>
<script>
2018-02-09 02:56:20 +01:00
import Avatar from '../Avatar.html'
2018-02-07 05:54:49 +01:00
import SearchResult from './SearchResult.html'
import IconButton from '../IconButton.html'
import AccountDisplayName from '../profile/AccountDisplayName.html'
2018-02-07 05:54:49 +01:00
export default {
2018-04-30 18:57:49 +02:00
data: () => ({
actions: void 0
}),
methods: {
onButtonClick (event, action, accountId) {
event.preventDefault()
event.stopPropagation()
this.fire('click', {
action,
accountId
})
}
2018-04-30 18:57:49 +02:00
},
components: {
Avatar,
SearchResult,
IconButton,
AccountDisplayName
2018-02-07 05:54:49 +01:00
}
}
</script>