pinafore/routes/_components/search/AccountSearchResult.html

92 lines
2.3 KiB
HTML
Raw Normal View History

2018-02-07 05:54:49 +01:00
<SearchResult href="/accounts/{{account.id}}">
<div class="search-result-account">
<Avatar :account size="small" className="search-result-account-avatar"/>
<div class="search-result-account-name">
2018-02-22 03:39:53 +01:00
{{account.display_name || account.acct}}
2018-02-07 05:54:49 +01:00
</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}}
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'
2018-02-07 05:54:49 +01:00
export default {
components: {
Avatar,
SearchResult,
IconButton
},
methods: {
onButtonClick (event, action, accountId) {
event.preventDefault()
event.stopPropagation()
this.fire('click', {
action,
accountId
})
}
2018-02-07 05:54:49 +01:00
}
}
</script>