pinafore/routes/_components/profile/AccountProfileDetails.html

144 lines
3.8 KiB
HTML
Raw Normal View History

<h2 class="sr-only">Stats and more options</h2>
2018-04-01 01:51:18 +02:00
<div class="account-profile-details">
<div class="account-profile-details-item">
2018-04-01 02:01:09 +02:00
<span class="account-profile-details-item-title">
Toots
</span>
2018-04-01 01:51:18 +02:00
<span class="account-profile-details-item-datum">
{numStatusesDisplay}
2018-04-01 02:01:09 +02:00
</span>
2018-04-01 01:51:18 +02:00
</div>
2018-04-27 06:09:39 +02:00
<a class="account-profile-details-item"
href='/accounts/{account.id}/follows'
aria-label={followingLabel}
2018-04-27 07:05:55 +02:00
>
2018-04-27 06:09:39 +02:00
<span class="account-profile-details-item-title">
Follows
</span>
<span class="account-profile-details-item-datum">
{numFollowingDisplay}
2018-04-27 06:09:39 +02:00
</span>
</a>
<a class="account-profile-details-item"
href='/accounts/{account.id}/followers'
aria-label={followersLabel}
2018-04-27 07:05:55 +02:00
>
2018-04-27 06:09:39 +02:00
<span class="account-profile-details-item-title">
Followers
</span>
<span class="account-profile-details-item-datum">
{numFollowersDisplay}
2018-04-27 06:09:39 +02:00
</span>
</a>
<!-- TODO: re-enable this when we support profile editing -->
{#if account && verifyCredentials && account.id !== verifyCredentials.id}
<div class="account-profile-more-options">
<IconButton
label="More options"
href="#fa-bars"
muted="true"
on:click="onMoreOptionsClick()"
/>
</div>
{/if}
2018-04-01 01:51:18 +02:00
</div>
<style>
.account-profile-details {
grid-area: details;
display: flex;
margin: 0 5px;
2018-04-05 06:45:19 +02:00
align-items: center;
2018-04-01 01:51:18 +02:00
}
.account-profile-details-item {
flex: 1;
display: flex;
flex-direction: row;
padding: 5px;
justify-content: center;
font-size: 1.1em;
}
.account-profile-details-item:hover {
2018-04-27 06:09:39 +02:00
text-decoration: none;
2018-04-01 01:51:18 +02:00
background: var(--button-bg-hover);
cursor: pointer;
}
.account-profile-details-item:active {
background: var(--button-bg-active);
}
.account-profile-details-item-title {
text-transform: uppercase;
color: var(--deemphasized-text-color);
margin-right: 5px;
}
.account-profile-details-item-datum {
color: var(--body-text-color);
margin-left: 5px;
font-weight: 600;
}
2018-04-01 02:01:09 +02:00
@media (max-width: 767px) {
.account-profile-details-item {
flex-direction: column;
margin-left: 5px;
margin-right: 5px;
}
.account-profile-details-item:last-child {
margin-right: 0;
}
.account-profile-details-item:first-child {
margin-left: 0;
}
.account-profile-details-item-title {
margin-right: 0;
text-align: center;
}
.account-profile-details-item-datum {
margin-left: 0;
text-align: center;
}
}
2018-04-13 07:13:05 +02:00
@media (max-width: 767px) {
.account-profile-details-item {
font-size: 1em;
}
}
2018-04-03 17:57:01 +02:00
</style>
<script>
2018-04-05 06:45:19 +02:00
import IconButton from '../IconButton.html'
import { importShowAccountProfileOptionsDialog } from '../dialog/asyncDialogs'
2018-04-05 06:45:19 +02:00
2018-04-03 17:57:01 +02:00
const numberFormat = new Intl.NumberFormat('en-US')
export default {
computed: {
numStatuses: ({ account }) => account.statuses_count || 0,
numFollowing: ({ account }) => account.following_count || 0,
numFollowers: ({ account }) => account.followers_count || 0,
numStatusesDisplay: ({ numStatuses }) => numberFormat.format(numStatuses),
numFollowingDisplay: ({ numFollowing }) => numberFormat.format(numFollowing),
numFollowersDisplay: ({ numFollowers }) => numberFormat.format(numFollowers),
followersLabel: ({ numFollowers }) => `Followed by ${numFollowers}`,
followingLabel: ({ numFollowing }) => `Follows ${numFollowing}`
2018-04-05 06:45:19 +02:00
},
methods: {
2018-04-20 06:38:01 +02:00
async onMoreOptionsClick () {
let { account, relationship, verifyCredentials } = this.get()
let showAccountProfileOptionsDialog = await importShowAccountProfileOptionsDialog()
showAccountProfileOptionsDialog(account, relationship, verifyCredentials)
2018-04-05 06:45:19 +02:00
}
},
components: {
IconButton
2018-04-03 17:57:01 +02:00
}
}
2018-04-22 20:06:54 +02:00
</script>