feat: better styling for username display
This commit is contained in:
parent
9630e47a2d
commit
5504fb0472
@ -2,7 +2,9 @@
|
||||
<div v-if="avatar" class="img-container">
|
||||
<img :alt="altText" :src="avatar" :height="size" :width="size" />
|
||||
</div>
|
||||
<i v-else :class="`gdrico-${icon}`"></i>
|
||||
<div v-else class="text-center">
|
||||
<i :class="`gdrico-${icon}`"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -37,5 +39,9 @@ onMounted(() => {
|
||||
object-fit: cover;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -3,8 +3,8 @@
|
||||
<UserAvatar
|
||||
:user="props.user"
|
||||
:icon="type === 'gamemaster' ? 'user-tie' : 'user'"
|
||||
:size="avatarSize"
|
||||
:style="'width: ${avatarSize}px'" />
|
||||
:size="20"
|
||||
:style="'width: 20px'" />
|
||||
<span>{{ props.user.displayName() }}</span>
|
||||
</div>
|
||||
</template>
|
||||
@ -17,12 +17,10 @@ import { computed } from 'vue';
|
||||
const props = defineProps<{
|
||||
user: SimpleUser;
|
||||
type?: 'gamemaster' | 'player';
|
||||
avatarSize?: number;
|
||||
align?: 'right' | 'center' | 'left';
|
||||
}>();
|
||||
|
||||
const type = computed(() => props.type ?? 'player');
|
||||
const avatarSize = computed(() => props.avatarSize ?? 20);
|
||||
const align = computed(() => props.align ?? 'center');
|
||||
</script>
|
||||
|
||||
|
@ -15,7 +15,7 @@
|
||||
<legend class="highlight" for="players" autocomplete="off">Joueurs</legend>
|
||||
<div v-for="user in users" :key="user.id" class="player">
|
||||
<input type="checkbox" v-model="players" :name="user.id" :value="user.id" :id="user.id" />
|
||||
<label :for="user.id">{{ user.displayName() }}</label>
|
||||
<label :for="user.id"><UserAvatarAndName :user="user" :align="'left'" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="buttons gap-1rem">
|
||||
@ -31,6 +31,7 @@ import router from '@/router';
|
||||
import { usePocketbaseStore } from '@/stores/pocketbase';
|
||||
import { type NewCampaign } from '@/models/Campaign';
|
||||
import { type SimpleUser } from '@/models/User';
|
||||
import UserAvatarAndName from '@/components/UserAvatarAndName.vue';
|
||||
|
||||
const pbStore = usePocketbaseStore();
|
||||
const users = ref<SimpleUser[]>([]);
|
||||
|
Loading…
Reference in New Issue
Block a user