phundrak/gege-jdr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: better styling for username display

Browse Source
This commit is contained in:
Lucien Cartier-Tilet 2024-02-17 04:37:24 +01:00
parent 9630e47a2d
commit 5504fb0472
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/UserAvatar.vue
View File

@ -2,7 +2,9 @@
<div v-if="avatar" class="img-container"> <div v-if="avatar" class="img-container">
<img :alt="altText" :src="avatar" :height="size" :width="size" /> <img :alt="altText" :src="avatar" :height="size" :width="size" />
</div> </div>
<i v-else :class="`gdrico-${icon}`"></i> <div v-else class="text-center">
<i :class="`gdrico-${icon}`"></i>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -37,5 +39,9 @@ onMounted(() => {
object-fit: cover; object-fit: cover;
border-radius: 1rem; border-radius: 1rem;
} }
i {
text-align: center;
}
} }
</style> </style>

6
src/components/UserAvatarAndName.vue
View File

@ -3,8 +3,8 @@
<UserAvatar <UserAvatar
:user="props.user" :user="props.user"
:icon="type === 'gamemaster' ? 'user-tie' : 'user'" :icon="type === 'gamemaster' ? 'user-tie' : 'user'"
:size="avatarSize" :size="20"
:style="'width: ${avatarSize}px'" /> :style="'width: 20px'" />
<span>{{ props.user.displayName() }}</span> <span>{{ props.user.displayName() }}</span>
</div> </div>
</template> </template>
@ -17,12 +17,10 @@ import { computed } from 'vue';
const props = defineProps<{ const props = defineProps<{
user: SimpleUser; user: SimpleUser;
type?: 'gamemaster' | 'player'; type?: 'gamemaster' | 'player';
avatarSize?: number;
align?: 'right' | 'center' | 'left'; align?: 'right' | 'center' | 'left';
}>(); }>();
const type = computed(() => props.type ?? 'player'); const type = computed(() => props.type ?? 'player');
const avatarSize = computed(() => props.avatarSize ?? 20);
const align = computed(() => props.align ?? 'center'); const align = computed(() => props.align ?? 'center');
</script> </script>

3
src/views/CreateCampaignView.vue
View File

@ -15,7 +15,7 @@
<legend class="highlight" for="players" autocomplete="off">Joueurs</legend> <legend class="highlight" for="players" autocomplete="off">Joueurs</legend>
<div v-for="user in users" :key="user.id" class="player"> <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" /> <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> </div>
</fieldset> </fieldset>
<div class="buttons gap-1rem"> <div class="buttons gap-1rem">
@ -31,6 +31,7 @@ import router from '@/router';
import { usePocketbaseStore } from '@/stores/pocketbase'; import { usePocketbaseStore } from '@/stores/pocketbase';
import { type NewCampaign } from '@/models/Campaign'; import { type NewCampaign } from '@/models/Campaign';
import { type SimpleUser } from '@/models/User'; import { type SimpleUser } from '@/models/User';
import UserAvatarAndName from '@/components/UserAvatarAndName.vue';
const pbStore = usePocketbaseStore(); const pbStore = usePocketbaseStore();
const users = ref<SimpleUser[]>([]); const users = ref<SimpleUser[]>([]);