forked from kaverti/website
71 lines
2.2 KiB
Vue
71 lines
2.2 KiB
Vue
<template>
|
|
<div
|
|
class='user_display'
|
|
@click='$router.push("/user/" + user.username)'
|
|
>
|
|
<avatar-icon :user='user' size='small'></avatar-icon>
|
|
<div class='user_display__username'>
|
|
{{user.username}}
|
|
<tooltips style="padding-left: 5px;">
|
|
<b-tooltip v-if='user && user.system' class="is-success" label="This user is a system user operated by administrators that mainly run API operations.">
|
|
<b-tag rounded class="is-success"> SYSTEM <i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
|
|
<b-tooltip v-if='user && user.bot' class="is-info" label="This user is a bot account that can run automated API operations.">
|
|
<b-tag rounded class="is-info"> BOT <i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
|
|
<b-tooltip v-if='user && user.admin' class="is-danger" label="User is an official Kaverti administrator.">
|
|
<b-tag class="is-danger" rounded> ADMIN <i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
|
|
<b-tooltip v-if='user && user.hidden' class="is-info" label="User is not discoverable in the user list.">
|
|
<b-tag rounded> HIDDEN <i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
|
|
<b-tooltip v-if='user && user.booster' class="is-light" label="User is boosting the Kaverti Discord server.">
|
|
<b-tag class="is-light" rounded> BOOSTER <i class="fas fa-info-circle"></i></b-tag>
|
|
</b-tooltip>
|
|
|
|
</tooltips>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import AvatarIcon from './AvatarIcon';
|
|
|
|
export default {
|
|
name: 'UserDisplay',
|
|
props: ['user'],
|
|
components: { AvatarIcon }
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
@import '../assets/scss/variables.scss';
|
|
|
|
.user_display {
|
|
align-items: center;
|
|
background: #fff;
|
|
border: thin solid $color__gray--darker;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 1rem;
|
|
padding: 0.25rem 0.5rem;
|
|
transition: box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
@extend .shadow_border--hover;
|
|
}
|
|
|
|
@at-root #{&}__username {
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|