92 lines
1.7 KiB
Vue
92 lines
1.7 KiB
Vue
<template>
|
|
<div :class="{'user-card': !mobile, 'mobile': mobile}">
|
|
<Avatar :mobile="mobile" :avatar-url="user?.identity?.avatar" :user-id="user?.identity?.id"
|
|
:isMod="user?.identity?.isMod"
|
|
:isOwner="user?.identity?.isOwner"
|
|
:isAdmin="user?.identity?.isAdmin"/>
|
|
<div class="user-info">
|
|
<p class="global">{{ user?.identity?.global_name || 'Nom d\'affichage inconnu' }}</p>
|
|
<p class="username">{{ user?.identity?.username || 'Identifiant inconnu' }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import Avatar from './Avatar.vue';
|
|
const props = defineProps({
|
|
user: {
|
|
type: Object,
|
|
default: () => ({
|
|
identity: {
|
|
id: '261175887393718273',
|
|
username: 'Identifiant inconnu',
|
|
global_name: 'Nom d\'affichage inconnu',
|
|
avatar: '96ecebdefe9fb9483b2e1b17a417ba32'
|
|
}
|
|
})
|
|
},
|
|
mobile: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<style scoped>
|
|
img {
|
|
border-radius: 100%;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.user-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
user-select: none;
|
|
}
|
|
|
|
.mobile {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
.mobile .user-info {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.mobile .username {
|
|
font-size: 1.2em !important;
|
|
}
|
|
|
|
|
|
.mobile .global {
|
|
font-size: 1.6em !important;
|
|
}
|
|
|
|
|
|
.user-info {
|
|
display: flex;
|
|
gap: 5px ;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.global {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.username {
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
|
|
}
|
|
</style> |