chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: User Detail Card

Browse source
This commit is contained in:
puriphatt 2024-07-30 09:44:37 +00:00
parent 6f501da99b
commit 2eac88cf70
1 changed files with 166 additions and 186 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/UsersDetailCardComponent.vue
View file

@ -47,19 +47,15 @@ defineEmits<{
</script> </script>
<template> <template>
<div v-if="metadata">
<div <div
:style="`${noBg ? 'height: 228px' : 'min-height: 310px'}`" v-if="metadata"
class="flip" class="full-width"
:class="{ :class="{
'person-box__no-hover': noHover,
'status-inactive': list.status === 'INACTIVE', 'status-inactive': list.status === 'INACTIVE',
}" }"
> >
<AppBox <div
no-padding class="surface-1 full-height front bordered rounded"
class="surface-1 front"
bordered
:class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`" :class="`${$q.dark.isActive ? 'dark ' : ''} color__${color} ${noBg ? 'front__no-bg' : ''}`"
@click="$emit('enterCard')" @click="$emit('enterCard')"
> >
@ -182,21 +178,10 @@ defineEmits<{
</div> </div>
</AppCircle> </AppCircle>
</div> </div>
<!-- <q-avatar size="80px">
<img :src="list.imageUrl ?? '/no-profile.png'" />
</q-avatar>
<div class="status-circle">
<q-icon
:name="`mdi-${list.status === 'INACTIVE' ? 'close' : 'check'}`"
:style="`color:${list.status === 'INACTIVE' ? 'var(--gray-6)' : 'white'}`"
/>
</div> -->
</q-card-section> </q-card-section>
</div> </div>
<div class="box-title"> <div class="box-title">
<div class="rounded title"> <div class="rounded-type title text-center q-pa-xs">
{{ {{
$t( $t(
list.type === 'CORP' list.type === 'CORP'
@ -206,6 +191,7 @@ defineEmits<{
}} }}
</div> </div>
</div> </div>
<q-card-section class="no-padding"> <q-card-section class="no-padding">
<div class="column items-center justify-center q-mb-md"> <div class="column items-center justify-center q-mb-md">
<div class="row">{{ list.name }}</div> <div class="row">{{ list.name }}</div>
@ -230,16 +216,11 @@ defineEmits<{
</q-card-section> </q-card-section>
</div> </div>
</div> </div>
</AppBox>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.container {
height: 500px;
}
.flip { .flip {
width: 100%; width: 100%;
position: relative; position: relative;
@ -255,8 +236,6 @@ defineEmits<{
.front { .front {
width: 100%; width: 100%;
height: 310px;
position: absolute;
backface-visibility: hidden; backface-visibility: hidden;
} }
@ -274,8 +253,7 @@ defineEmits<{
} }
.title { .title {
width: 50%; width: 68px;
height: 25px;
background: hsl(var(--_color)) !important; background: hsl(var(--_color)) !important;
position: relative; position: relative;
bottom: 16px; bottom: 16px;
@ -283,15 +261,16 @@ defineEmits<{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
margin-top: -3px;
} }
.front-scroll { .front-scroll {
background: var(--_bg-front-scroll) !important; background: var(--_bg-front-scroll) !important;
height: 150px; /* height: 150px; */
} }
.back-scroll { .back-scroll {
height: 268px; /* height: 268px; */
.bg-color-text-1 { .bg-color-text-1 {
background: var(--_bg-back-detail-1); background: var(--_bg-back-detail-1);
@ -323,8 +302,9 @@ defineEmits<{
} }
} }
.rounded { .rounded-type {
border-radius: var(--radius-1); border-bottom-left-radius: var(--radius-2);
border-bottom-right-radius: var(--radius-2);
} }
.box-title { .box-title {