style: adjust notification layout
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 7s

This commit is contained in:
puriphatt 2025-03-10 10:23:43 +07:00
parent 8bc450f4d3
commit d428ac3ec5

View file

@ -301,6 +301,7 @@ onMounted(async () => {
:offset="[0, 10]" :offset="[0, 10]"
anchor="bottom middle" anchor="bottom middle"
self="top middle" self="top middle"
style="max-height: 30vh; width: 300px"
@before-hide=" @before-hide="
() => { () => {
state.notiOpen = false; state.notiOpen = false;
@ -327,7 +328,7 @@ onMounted(async () => {
@click="setActive(btn)" @click="setActive(btn)"
/> />
</div> </div>
<div style="max-height: 30vh; width: 400px; overflow-y: auto"> <div style="overflow-y: auto">
<section <section
v-if=" v-if="
state.filterUnread state.filterUnread
@ -348,13 +349,14 @@ onMounted(async () => {
:key="i" :key="i"
> >
<q-avatar <q-avatar
v-if="$q.screen.gt.xs"
color="positive" color="positive"
style="height: 36px; width: 36px" style="height: 36px; width: 36px"
> >
<q-icon color="white" name="mdi-check" /> <q-icon color="white" name="mdi-check" />
</q-avatar> </q-avatar>
<div class="col-6 column text-caption q-pl-md ellipsis"> <div class="col column text-caption q-pl-md ellipsis">
<span <span
class="block ellipsis full-width text-weight-bold" class="block ellipsis full-width text-weight-bold"
> >
@ -364,7 +366,10 @@ onMounted(async () => {
{{ item.detail }} {{ item.detail }}
</span> </span>
</div> </div>
<span align="right" class="col text-caption text-stone"> <span
align="right"
class="text-caption text-stone q-pl-sm"
>
{{ moment(item.createdAt).fromNow() }} {{ moment(item.createdAt).fromNow() }}
</span> </span>
<q-tooltip <q-tooltip
@ -373,6 +378,7 @@ onMounted(async () => {
:delay="1000" :delay="1000"
:offset="[10, 10]" :offset="[10, 10]"
> >
{{ item.title }}
{{ item.detail }} {{ item.detail }}
</q-tooltip> </q-tooltip>
</q-item> </q-item>