forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat(profile): use useDraggableScroll for stats scroll
+20
-1
+20
-1
src/views/Profile/ProfileView.vue
+20
-1
src/views/Profile/ProfileView.vue
···
19
19
import { useToastStore } from '@/stores/toast'
20
20
import { useEnvironmentStore } from '@/stores/environment'
21
21
22
+
import { useDraggableScroll } from '@/composables/useDraggableScroll'
23
+
22
24
import BackButton from '@/components/Navigation/BackButton.vue'
23
25
import PageLayout from '@/components/Navigation/PageLayout.vue'
24
26
import FeedItem from '@/components/Feed/FeedItem.vue'
···
37
39
const postStore = usePostStore()
38
40
const toast = useToastStore()
39
41
const env = useEnvironmentStore()
42
+
43
+
const { element: statsBarRef, events: statsDragEvents, isDragging } = useDraggableScroll()
40
44
41
45
const profile = ref<AppBskyActorDefs.ProfileViewDetailed | null>(null)
42
46
const feed = ref<AppBskyFeedDefs.FeedViewPost[]>([])
···
485
489
<span class="header-handle" v-else>@{{ profile?.handle }}</span>
486
490
</div>
487
491
488
-
<div class="stats">
492
+
<div
493
+
class="stats"
494
+
ref="statsBarRef"
495
+
v-on="statsDragEvents"
496
+
:class="{ 'is-dragging': isDragging }"
497
+
>
489
498
<div class="stat alt" v-if="profile.pronouns">
490
499
<span class="stat-count">{{ profile.pronouns }}</span>
491
500
<span class="stat-label">Pronouns</span>
···
737
746
margin-top: 0.75rem;
738
747
overflow-x: auto;
739
748
border-radius: 1rem;
749
+
transition: none;
750
+
margin: 0 -1.5rem;
751
+
width: calc(100% + 3rem);
752
+
padding: 0 1.5rem;
753
+
754
+
scrollbar-width: none;
755
+
-ms-overflow-style: none;
756
+
&::-webkit-scrollbar {
757
+
display: none;
758
+
}
740
759
741
760
.stat {
742
761
display: flex;