fix tag on explore

This commit is contained in:
ThatOneCalculator 2023-04-19 21:00:01 -07:00
parent c6f0047aed
commit f584c460e3
No known key found for this signature in database
GPG key ID: 8703CACD01000000
4 changed files with 74 additions and 25 deletions

View file

@ -367,11 +367,7 @@ export default defineComponent({
MkA,
{
key: Math.random(),
to: this.isNote
? `/tags/${encodeURIComponent(token.props.hashtag)}`
: `/explore/tags/${encodeURIComponent(
token.props.hashtag,
)}`,
to: `/tags/${encodeURIComponent(token.props.hashtag)}`,
style: "color:var(--hashtag);",
},
`#${token.props.hashtag}`,

View file

@ -80,14 +80,14 @@
<MkA
v-for="tag in tagsLocal"
:key="'local:' + tag.tag"
:to="`/explore/tags/${tag.tag}`"
:to="`/tags/${tag.tag}`"
class="local"
>{{ tag.tag }}</MkA
>
<MkA
v-for="tag in tagsRemote"
:key="'remote:' + tag.tag"
:to="`/explore/tags/${tag.tag}`"
:to="`/tags/${tag.tag}`"
>{{ tag.tag }}</MkA
>
</div>

View file

@ -39,7 +39,6 @@ import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import XFeatured from "./explore.featured.vue";
import XUsers from "./explore.users.vue";
import type MkFolder from "@/components/MkFolder.vue";
import { definePageMetadata } from "@/scripts/page-metadata";
import { deviceKind } from "@/scripts/device-kind";
import { i18n } from "@/i18n";
@ -47,23 +46,10 @@ import { defaultStore } from "@/store";
import "swiper/scss";
import "swiper/scss/virtual";
const props = defineProps<{
tag?: string;
}>();
const tabs = ["featured", "users"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
watch(
() => props.tag,
() => {
if (tagsEl) tagsEl.toggleContent(props.tag == null);
}
);
const headerActions = $computed(() => []);
const headerTabs = $computed(() => [

View file

@ -1,24 +1,58 @@
<template>
<MkStickyContainer>
<template #header
><MkPageHeader :actions="headerActions" :tabs="headerTabs"
><MkPageHeader
v-model:tab="tab"
:actions="headerActions"
:tabs="headerTabs"
:display-back-button="true"
/></template>
<MkSpacer :content-max="800">
<XNotes class="_content" :pagination="pagination" />
<swiper
:modules="[Virtual]"
:space-between="20"
:virtual="true"
:allow-touch-move="
!(
deviceKind === 'desktop' &&
!defaultStore.state.swipeOnDesktop
)
"
@swiper="setSwiperRef"
@slide-change="onSlideChange"
>
<swiper-slide>
<XNotes ref="notes" :pagination="notesPagination" />
</swiper-slide>
<swiper-slide>
<XUserList
ref="users"
class="_gap"
:pagination="usersPagination"
/>
</swiper-slide>
</swiper>
</MkSpacer>
</MkStickyContainer>
</template>
<script lang="ts" setup>
import { computed } from "vue";
import { computed, watch, onMounted } from "vue";
import { Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import XNotes from "@/components/MkNotes.vue";
import XUserList from "@/components/MkUserList.vue";
import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import { defaultStore } from "@/store";
import "swiper/scss";
import "swiper/scss/virtual";
const props = defineProps<{
tag: string;
}>();
const pagination = {
const notesPagination = {
endpoint: "notes/search-by-tag" as const,
limit: 10,
params: computed(() => ({
@ -26,10 +60,43 @@ const pagination = {
})),
};
const usersPagination = {
endpoint: "users/search" as const,
limit: 10,
params: computed(() => ({
query: `#${props.tag}`,
origin: "combined",
})),
};
const tabs = ["notes", "users"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
let swiperRef = null;
function setSwiperRef(swiper) {
swiperRef = swiper;
syncSlide(tabs.indexOf(tab));
}
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
definePageMetadata(
computed(() => ({
title: props.tag,