zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

ui: improve hover hint

zio/stable
Anthony Fu 2022-11-27 12:45:26 +08:00
parent 4d3d05ae5c
commit fcde653efe
3 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/account/AccountHeader.vue
View File

@ -30,6 +30,7 @@ const fieldNameIcons: Record<string, string> = {
instagram: 'i-ri:instagram-line', instagram: 'i-ri:instagram-line',
website: 'i-ri:link', website: 'i-ri:link',
site: 'i-ri:link', site: 'i-ri:link',
portfolio: 'i-ri:link',
blog: 'i-ri:newspaper-line', blog: 'i-ri:newspaper-line',
home: 'i-ri:home-2-line', home: 'i-ri:home-2-line',
sponsors: 'i-ri:heart-3-line', sponsors: 'i-ri:heart-3-line',
@ -37,6 +38,10 @@ const fieldNameIcons: Record<string, string> = {
city: 'i-ri:map-pin-2-line', city: 'i-ri:map-pin-2-line',
joined: 'i-ri:user-add-line', joined: 'i-ri:user-add-line',
birth: 'i-ri:calendar-line', birth: 'i-ri:calendar-line',
tumblr: 'i-ri:tumblr-fill',
linkedin: 'i-ri:linkedin-box-fill',
facebook: 'i-ri:facebook-fill',
patreon: 'i-ri:patreon-fill',
} }
function getFieldNameIcon(fieldName: string) { function getFieldNameIcon(fieldName: string) {

2
components/nav/NavSideItem.vue
View File

@ -8,7 +8,7 @@ defineProps<{
<template> <template>
<NuxtLink :to="to" active-class="text-primary" group focus:outline-none> <NuxtLink :to="to" active-class="text-primary" group focus:outline-none>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 group-hover:bg-active group-focus-visible:ring="2 current"> <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
<slot name="icon"> <slot name="icon">
<div :class="icon" /> <div :class="icon" />
</slot> </slot>

8
components/status/StatusDetails.vue
View File

@ -17,8 +17,12 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
</script> </script>
<template> <template>
<div flex flex-col gap-2 py3 px-4 :id="`status-${status.id}`"> <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4>
<AccountInfo :account="status.account" :hover="true" /> <NuxtLink :to="getAccountPath(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account">
<AccountInfo :account="status.account" />
</AccountHoverWrapper>
</NuxtLink>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>