apps/ptpchat-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added slim variant for the profilecardcomponent

Browse Source
This commit is contained in:
joschuatonn
2024-05-30 09:19:39 +02:00
parent b32599e6af
commit 6e2525da87
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ProfileCardComponent.vue
View File

@@ -1,23 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import {message, ptpTestUser} from 'src/models';
const props = defineProps({ const props = defineProps({
user: Object, user: Object,
selected: Boolean, selected: Boolean,
slim: Boolean,
}) })
</script> </script>
<template> <template>
<div class="profileCard" :class="selected ? 'selected' : ''"> <div class="profileCard" :class="selected ? 'selected' : ''">
<div class="profilePicture" :style="{'background-image' : 'url('+props.user!.profilePictureUrl+')' }"></div> <div class="profilePicture" :style="{'background-image' : 'url('+props.user!.profilepicture+')' }"></div>
<div style="margin-left:10px;"> <div style="margin-left:10px;">
<p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;"> <p style="margin-bottom: 0;line-height: 25px;vertical-align: middle;height: 25px;display: table-cell;">
<span style="font-weight: bold;font-size: 1.2rem;">{{props.user!.firstName}} {{ props.user!.lastName }}</span> <span style="font-weight: bold;font-size: 1.2rem;">{{props.user!.firstName}} {{ props.user!.lastName }}</span>
@{{props.user!.username}} <span v-if="!props.slim">@{{props.user!.username}}</span>
</p> </p>
<p style="margin: 0;">{{ props.user!.status }}</p> <p v-if="!props.slim" style="margin: 0;">{{ props.user!.status }}</p>
<p v-else style="margin: 0;">Hier steht die letzte Nachricht</p>
</div> </div>
</div> </div>
</template> </template>