forked from Mirrors/elk
fix: sticky hover style on mobile (#1513)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
This commit is contained in:
parent
6abd2a8770
commit
01ed4f68dc
8 changed files with 20 additions and 19 deletions
|
@ -98,23 +98,23 @@ const buttonStyle = $computed(() => {
|
|||
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
|
||||
>
|
||||
<template v-if="relationship?.blocking">
|
||||
<span group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||
<span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
|
||||
</template>
|
||||
<template v-if="relationship?.muting">
|
||||
<span group-hover="hidden">{{ $t('account.muting') }}</span>
|
||||
<span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
|
||||
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.following : context === 'following'">
|
||||
<span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
||||
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship?.requested">
|
||||
<span>{{ $t('account.follow_requested') }}</span>
|
||||
</template>
|
||||
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
|
||||
<span group-hover="hidden">{{ $t('account.follows_you') }}</span>
|
||||
<span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
|
||||
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
|
||||
<span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
|
||||
|
|
|
@ -68,7 +68,7 @@ const toggleReblogs = async () => {
|
|||
<template>
|
||||
<CommonDropdown :eager-mount="command">
|
||||
<button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
|
||||
<div rounded-5 p2 group-hover="bg-purple/10">
|
||||
<div rounded-5 p2 elk-group-hover="bg-purple/10">
|
||||
<div i-ri:more-2-fill />
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
@ -60,7 +60,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
|
|||
px2 py2 mx3 sm:mxa
|
||||
xl="ml0 mr5 px5 w-auto"
|
||||
transition-100
|
||||
group-hover="bg-active" group-focus-visible:ring="2 current"
|
||||
elk-group-hover="bg-active" group-focus-visible:ring="2 current"
|
||||
>
|
||||
<slot name="icon">
|
||||
<div :class="icon" text-xl />
|
||||
|
|
|
@ -6,7 +6,7 @@ const { as = 'button', command, disabled, content, icon } = defineProps<{
|
|||
icon: string
|
||||
activeIcon?: string
|
||||
hover: string
|
||||
groupHover: string
|
||||
elkGroupHover: string
|
||||
active?: boolean
|
||||
disabled?: boolean
|
||||
as?: string
|
||||
|
@ -62,8 +62,8 @@ useCommand({
|
|||
<div
|
||||
rounded-full p2
|
||||
v-bind="disabled ? {} : {
|
||||
'group-hover': groupHover,
|
||||
'group-focus-visible': groupHover,
|
||||
'elk-group-hover': elkGroupHover,
|
||||
'group-focus-visible': elkGroupHover,
|
||||
'group-focus-visible:ring': '2 current',
|
||||
}"
|
||||
>
|
||||
|
|
|
@ -38,7 +38,7 @@ const reply = () => {
|
|||
<StatusActionButton
|
||||
:content="$t('action.reply')"
|
||||
:text="!getPreferences(userSettings, 'hideReplyCount') && status.repliesCount || ''"
|
||||
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
|
||||
color="text-blue" hover="text-blue" elk-group-hover="bg-blue/10"
|
||||
icon="i-ri:chat-1-line"
|
||||
:command="command"
|
||||
@click="reply"
|
||||
|
@ -56,7 +56,7 @@ const reply = () => {
|
|||
<StatusActionButton
|
||||
:content="$t('action.boost')"
|
||||
:text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
|
||||
color="text-green" hover="text-green" group-hover="bg-green/10"
|
||||
color="text-green" hover="text-green" elk-group-hover="bg-green/10"
|
||||
icon="i-ri:repeat-line"
|
||||
active-icon="i-ri:repeat-fill"
|
||||
:active="!!status.reblogged"
|
||||
|
@ -77,7 +77,7 @@ const reply = () => {
|
|||
<StatusActionButton
|
||||
:content="$t('action.favourite')"
|
||||
:text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
|
||||
color="text-rose" hover="text-rose" group-hover="bg-rose/10"
|
||||
color="text-rose" hover="text-rose" elk-group-hover="bg-rose/10"
|
||||
icon="i-ri:heart-3-line"
|
||||
active-icon="i-ri:heart-3-fill"
|
||||
:active="!!status.favourited"
|
||||
|
@ -97,7 +97,7 @@ const reply = () => {
|
|||
<div flex-none>
|
||||
<StatusActionButton
|
||||
:content="$t('action.bookmark')"
|
||||
color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
|
||||
color="text-yellow" hover="text-yellow" elk-group-hover="bg-yellow/10"
|
||||
icon="i-ri:bookmark-line"
|
||||
active-icon="i-ri:bookmark-fill"
|
||||
:active="!!status.bookmarked"
|
||||
|
|
|
@ -118,7 +118,7 @@ const showFavoritedAndBoostedBy = () => {
|
|||
:content="$t('action.more')"
|
||||
color="text-primary"
|
||||
hover="text-primary"
|
||||
group-hover="bg-primary-light"
|
||||
elk-group-hover="bg-primary-light"
|
||||
icon="i-ri:more-line"
|
||||
my--2
|
||||
/>
|
||||
|
|
|
@ -41,7 +41,7 @@ const toggleFollowTag = async () => {
|
|||
@click="toggleFollowTag()"
|
||||
>
|
||||
<CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
|
||||
<div rounded-full p2 group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
|
||||
<div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
|
||||
<div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
|
||||
</div>
|
||||
</CommonTooltip>
|
||||
|
|
|
@ -66,6 +66,7 @@ export default defineConfig({
|
|||
|
||||
'timeline-title-style': 'text-primary text-lg font-bold',
|
||||
},
|
||||
[/^elk-group-hover[:-](\S+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
|
||||
],
|
||||
presets: [
|
||||
presetUno({
|
||||
|
|
Loading…
Reference in a new issue