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

fix: Personnel => card status

Browse source
This commit is contained in:
puriphatt 2024-04-05 10:37:00 +07:00
parent ebd9e118c2
commit ef7a95b6b3
1 changed files with 9 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/home/PersonCard.vue
View file

@ -35,6 +35,7 @@ const status = ref(false);
:key="i" :key="i"
> >
<div class="q-pa-md column items-center"> <div class="q-pa-md column items-center">
<!-- kebab menu -->
<div class="full-width text-right"> <div class="full-width text-right">
<q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm"> <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
<q-menu :offset="[0, 10]" style="width: 130px"> <q-menu :offset="[0, 10]" style="width: 130px">
@ -81,6 +82,7 @@ const status = ref(false);
</q-btn> </q-btn>
</div> </div>
<!-- profile -->
<div style="position: relative"> <div style="position: relative">
<AppCircle <AppCircle
bordered bordered
@ -91,16 +93,17 @@ const status = ref(false);
<div class="status-circle"> <div class="status-circle">
<q-icon <q-icon
:name="`mdi-${v.disabled ? 'close' : 'check'}`" :name="`mdi-${v.disabled ? 'close' : 'check'}`"
:style="`color:${v.disabled ? 'var(--border-color)' : 'white'}`" :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
/> />
</div> </div>
</AppCircle> </AppCircle>
</div> </div>
<!-- name symbol -->
<span class="items-center row q-my-sm"> <span class="items-center row q-my-sm">
{{ v.name }} {{ v.name }}
<iconify-icon <iconify-icon
class="q-px-sm" class="q-pl-sm"
:class="{ :class="{
'symbol-gender': v.male || v.female, 'symbol-gender': v.male || v.female,
'symbol-gender__male': !v.disabled && v.male, 'symbol-gender__male': !v.disabled && v.male,
@ -110,7 +113,7 @@ const status = ref(false);
:icon="`material-symbols:${v.male ? 'male' : 'female'}`" :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
width="20px" width="20px"
/> />
<iconify-icon class="locale" icon="circle-flags:th" /> <!-- <iconify-icon class="locale q-pl-sm" icon="circle-flags:th" /> -->
</span> </span>
<span <span
class="badge q-px-sm" class="badge q-px-sm"
@ -124,6 +127,8 @@ const status = ref(false);
{{ v.badge }} {{ v.badge }}
</span> </span>
</div> </div>
<!-- detail -->
<q-separator /> <q-separator />
<div <div
class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b" class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
@ -160,7 +165,7 @@ const status = ref(false);
opacity: 0.4; opacity: 0.4;
.status-circle { .status-circle {
background-color: var(--surface-2); background-color: var(--surface-1);
} }
.locale { .locale {