ui: improve
This commit is contained in:
parent
fd55abea03
commit
84cdea945f
|
@ -7,7 +7,7 @@ defineProps<{
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div flex="~ col gap2" rounded w-100 z-900 overflow-hidden p-4>
|
<div flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
|
||||||
<div flex="~ gap2" items-center>
|
<div flex="~ gap2" items-center>
|
||||||
<NuxtLink :to="getAccountPath(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
|
<NuxtLink :to="getAccountPath(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
|
||||||
<AccountInfo :account="account" />
|
<AccountInfo :account="account" />
|
||||||
|
|
|
@ -11,7 +11,7 @@ const { link = true } = defineProps<{
|
||||||
<AccountHoverWrapper :account="account">
|
<AccountHoverWrapper :account="account">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="link ? getAccountPath(account) : undefined"
|
:to="link ? getAccountPath(account) : undefined"
|
||||||
:class="link ? 'text-link-rounded' : ''"
|
:class="link ? 'text-link-rounded ml-0 pl-0' : ''"
|
||||||
min-w-0 flex gap-1 items-center
|
min-w-0 flex gap-1 items-center
|
||||||
>
|
>
|
||||||
<AccountAvatar :account="account" w-5 h-5 />
|
<AccountAvatar :account="account" w-5 h-5 />
|
||||||
|
|
|
@ -24,13 +24,13 @@ function toValidName(otpion: string) {
|
||||||
display="none"
|
display="none"
|
||||||
@change="modelValue = option"
|
@change="modelValue = option"
|
||||||
><label
|
><label
|
||||||
flex flex-auto cursor-pointer p3 m1 rounded transition-all
|
flex flex-auto cursor-pointer px3 m1 rounded transition-all
|
||||||
:for="`tab-${toValidName(option)}`"
|
:for="`tab-${toValidName(option)}`"
|
||||||
tabindex="1"
|
tabindex="1"
|
||||||
hover:bg-active transition-100
|
hover:bg-active transition-100
|
||||||
@keypress.enter="modelValue = option"
|
@keypress.enter="modelValue = option"
|
||||||
><span
|
><span
|
||||||
mxa px2 text-center
|
mxa px4 py3 text-center
|
||||||
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
|
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
|
||||||
>{{ option }}</span>
|
>{{ option }}</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
Loading…
Reference in a new issue