Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: unable to scroll through reactions on mobile

Browse Source
This commit is contained in:
freeplay 2023-07-16 17:24:34 -04:00
parent 48c52c3ee8
commit 6fbbef1a8e
8 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/client/src/components/MkNote.vue
View File

@ -148,7 +148,7 @@
{{ appearNote.channel.name }}</MkA
>
</div>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
<footer ref="footerEl" class="footer" tabindex="-1">
<XReactionsViewer
v-if="enableEmojiReactions"
ref="reactionsViewer"
@ -157,7 +157,7 @@
<button
v-tooltip.noDelay.bottom="i18n.ts.reply"
class="button _button"
@click="reply()"
@click.stop="reply()"
>
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template
@ -202,7 +202,7 @@
ref="reactButton"
v-tooltip.noDelay.bottom="i18n.ts.reaction"
class="button _button"
@click="react()"
@click.stop="react()"
>
<i class="ph-smiley ph-bold ph-lg"></i>
</button>
@ -213,7 +213,7 @@
"
ref="reactButton"
class="button _button reacted"
@click="undoReact(appearNote)"
@click.stop="undoReact(appearNote)"
v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
>
<i class="ph-minus ph-bold ph-lg"></i>
@ -223,7 +223,7 @@
ref="menuButton"
v-tooltip.noDelay.bottom="i18n.ts.more"
class="button _button"
@click="menu()"
@click.stop="menu()"
>
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button>
@ -862,7 +862,6 @@ defineExpose({
z-index: 2;
display: flex;
flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
margin-top: 0.4em;
> :deep(.button) {
position: relative;
@ -876,7 +875,6 @@ defineExpose({
max-width: 3.5em;
width: max-content;
min-width: max-content;
pointer-events: all;
height: auto;
transition: opacity 0.2s;
&::before {

12
packages/client/src/components/MkNoteSub.vue
View File

@ -56,7 +56,7 @@
</div>
</div>
</div>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
<footer ref="footerEl" class="footer" tabindex="-1">
<XReactionsViewer
v-if="enableEmojiReactions"
ref="reactionsViewer"
@ -65,7 +65,7 @@
<button
v-tooltip.noDelay.bottom="i18n.ts.reply"
class="button _button"
@click="reply()"
@click.stop="reply()"
>
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0">
@ -107,7 +107,7 @@
ref="reactButton"
v-tooltip.noDelay.bottom="i18n.ts.reaction"
class="button _button"
@click="react()"
@click.stop="react()"
>
<i class="ph-smiley ph-bold ph-lg"></i>
</button>
@ -118,7 +118,7 @@
"
ref="reactButton"
class="button _button reacted"
@click="undoReact(appearNote)"
@click.stop="undoReact(appearNote)"
v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
>
<i class="ph-minus ph-bold ph-lg"></i>
@ -128,7 +128,7 @@
ref="menuButton"
v-tooltip.noDelay.bottom="i18n.ts.more"
class="button _button"
@click="menu()"
@click.stop="menu()"
>
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button>
@ -470,7 +470,6 @@ function noteClick(e) {
z-index: 2;
display: flex;
flex-wrap: wrap;
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
> :deep(.button) {
position: relative;
@ -484,7 +483,6 @@ function noteClick(e) {
max-width: 3.5em;
width: max-content;
min-width: max-content;
pointer-events: all;
height: auto;
transition: opacity 0.2s;
&::before {

2
packages/client/src/components/MkQuoteButton.vue
View File

@ -3,7 +3,7 @@
v-if="canRenote && $store.state.seperateRenoteQuote"
v-tooltip.noDelay.bottom="i18n.ts.quote"
class="eddddedb _button"
@click="quote()"
@click.stop="quote()"
>
<i class="ph-quotes ph-bold ph-lg"></i>
</button>

26
packages/client/src/components/MkReactionsViewer.reaction.vue
View File

@ -9,7 +9,7 @@
canToggle,
newlyAdded: !isInitial,
}"
@click="toggleReaction()"
@click.stop="toggleReaction()"
>
<XReactionIcon
class="icon"
@ -100,13 +100,20 @@ useTooltip(
<style lang="scss" scoped>
.hkzvhatu {
position: relative;
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
border-radius: 4px;
margin-block: 2px;
padding: 0 8px;
pointer-events: all;
min-width: max-content;
&::before {
content: "";
position: absolute;
inset: 0 2px;
border-radius: 4px;
z-index: -1;
}
&.newlyAdded {
animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
:deep(.mk-emoji) {
@ -126,9 +133,10 @@ useTooltip(
}
}
&.canToggle {
background: rgba(0, 0, 0, 0.05);
&:hover {
&::before {
background: rgba(0, 0, 0, 0.05);
}
&:hover:not(.reacted)::before {
background: rgba(0, 0, 0, 0.1);
}
}
@ -139,9 +147,7 @@ useTooltip(
&.reacted {
order: -1;
background: var(--accent);
&:hover {
&::before {
background: var(--accent);
}

7
packages/client/src/components/MkReactionsViewer.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="reactionsEl" class="reactions-list tdflqwzn" :class="{ isMe }">
<div ref="reactionsEl" class="reactions-list swiper-no-swiping tdflqwzn" :class="{ isMe }">
<XReaction
v-for="(count, reaction) in note.reactions"
:key="reaction"
@ -50,6 +50,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
transparent
);
scrollbar-width: none;
pointer-events: none;
:deep(*) {
pointer-events: all;
}
&::-webkit-scrollbar {
display: none;
}

2
packages/client/src/components/MkRenoteButton.vue
View File

@ -5,7 +5,7 @@
v-tooltip.noDelay.bottom="i18n.ts.renote"
class="button _button canRenote"
:class="{ renoted: hasRenotedBefore }"
@click="renote(false, $event)"
@click.stop="renote(false, $event)"
>
<i class="ph-repeat ph-bold ph-lg"></i>
<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>

2
packages/client/src/components/MkStarButton.vue
View File

@ -2,7 +2,7 @@
<button
v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
class="button _button"
@click="star($event)"
@click.stop="star($event)"
>
<svg
v-if="defaultStore.state.woozyMode === true"

2
packages/client/src/components/MkStarButtonNoEmoji.vue
View File

@ -4,7 +4,7 @@
class="button _button"
:class="$style.root"
ref="buttonRef"
@click="toggleStar($event)"
@click.stop="toggleStar($event)"
>
<span v-if="!reacted">
<i