e2net/iceshrimp
3
0
Fork 0
forked from mirrors/iceshrimp
Code Pull requests Activity

[client] Fix pages and gallery tab navigation

Browse source 
This also adds a much nicer "add new gallery post" button to the gallery page
This commit is contained in:
Laura Hausmann 2023-12-08 13:45:32 +01:00
parent ffb1e11648
commit 8a642be6d9
Signed by: zotan
GPG key ID: D044E84C5BE01605
2 changed files with 132 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
packages/client/src/pages/gallery/index.vue
View file

@ -25,80 +25,88 @@
@slide-change="onSlideChange" @slide-change="onSlideChange"
> >
<swiper-slide> <swiper-slide>
<MkFolder class="_gap"> <template v-if="tab == 'explore'">
<template #header <MkFolder class="_gap">
><i class="ph-clock ph-bold ph-lg"></i> <template #header
{{ i18n.ts.recentPosts }}</template ><i class="ph-clock ph-bold ph-lg"></i>
> {{ i18n.ts.recentPosts }}</template
>
<MkPagination
v-slot="{ items }"
:pagination="recentPostsPagination"
:disable-auto-load="true"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="post in items"
:key="post.id"
:post="post"
class="post"
/>
</div>
</MkPagination>
</MkFolder>
<MkFolder class="_gap">
<template #header
><i class="ph-fire-simple ph-bold ph-lg"></i>
{{ i18n.ts.popularPosts }}</template
>
<MkPagination
v-slot="{ items }"
:pagination="popularPostsPagination"
:disable-auto-load="true"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="post in items"
:key="post.id"
:post="post"
class="post"
/>
</div>
</MkPagination>
</MkFolder>
</template>
</swiper-slide>
<swiper-slide>
<template v-if="tab == 'liked'">
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="recentPostsPagination" :pagination="likedPostsPagination"
:disable-auto-load="true"
> >
<div class="vfpdbgtk"> <div class="vfpdbgtk">
<MkGalleryPostPreview <MkGalleryPostPreview
v-for="post in items" v-for="like in items"
:key="post.id" :key="like.id"
:post="post" :post="like.post"
class="post" class="post"
/> />
</div> </div>
</MkPagination> </MkPagination>
</MkFolder> </template>
<MkFolder class="_gap"> </swiper-slide>
<template #header <swiper-slide>
><i class="ph-fire-simple ph-bold ph-lg"></i> <template v-if="tab == 'my'">
{{ i18n.ts.popularPosts }}</template <div class="buttoncontainer">
> <MkButton class="new primary" @click="create()"
><i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts.postToGallery }}</MkButton
>
</div>
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="popularPostsPagination" :pagination="myPostsPagination"
:disable-auto-load="true"
> >
<div class="vfpdbgtk"> <div class="vfpdbgtk">
<MkGalleryPostPreview <MkGalleryPostPreview
v-for="post in items" v-for="mypost in items"
:key="post.id" :key="mypost.id"
:post="post" :post="mypost"
class="post" class="post"
/> />
</div> </div>
</MkPagination> </MkPagination>
</MkFolder> </template>
</swiper-slide>
<swiper-slide>
<MkPagination
v-slot="{ items }"
:pagination="likedPostsPagination"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="like in items"
:key="like.id"
:post="like.post"
class="post"
/>
</div>
</MkPagination>
</swiper-slide>
<swiper-slide>
<MkA to="/gallery/new" class="_link" style="margin: 16px"
><i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts.postToGallery }}</MkA
>
<MkPagination
v-slot="{ items }"
:pagination="myPostsPagination"
>
<div class="vfpdbgtk">
<MkGalleryPostPreview
v-for="mypost in items"
:key="mypost.id"
:post="mypost"
class="post"
/>
</div>
</MkPagination>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</MkSpacer> </MkSpacer>
@ -119,6 +127,7 @@ import { useRouter } from "@/router";
import { defaultStore } from "@/store"; import { defaultStore } from "@/store";
import "swiper/scss"; import "swiper/scss";
import "swiper/scss/virtual"; import "swiper/scss/virtual";
import MkButton from "@/components/MkButton.vue";
const router = useRouter(); const router = useRouter();
@ -205,11 +214,21 @@ function syncSlide(index) {
} }
onMounted(() => { onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex)); syncSlide(tabs.indexOf(tab));
}); });
function create() {
router.push("/gallery/new");
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.buttoncontainer {
display: grid;
justify-content: center;
margin-bottom: 1rem;
}
.vfpdbgtk { .vfpdbgtk {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

105
packages/client/src/pages/pages.vue
View file

@ -24,55 +24,62 @@
@slide-change="onSlideChange" @slide-change="onSlideChange"
> >
<swiper-slide> <swiper-slide>
<div class="rknalgpo"> <template v-if="tab == 'featured'">
<MkPagination <div class="rknalgpo">
v-slot="{ items }" <MkPagination
:pagination="featuredPagesPagination" v-slot="{ items }"
> :pagination="featuredPagesPagination"
<MkPagePreview
v-for="page in items"
:key="page.id"
class="ckltabjg"
:page="page"
/>
</MkPagination>
</div>
</swiper-slide>
<swiper-slide>
<div class="rknalgpo liked">
<MkPagination
v-slot="{ items }"
:pagination="likedPagesPagination"
>
<MkPagePreview
v-for="like in items"
:key="like.page.id"
class="ckltabjg"
:page="like.page"
/>
</MkPagination>
</div>
</swiper-slide>
<swiper-slide>
<div class="rknalgpo my">
<div class="buttoncontainer">
<MkButton class="new primary" @click="create()"
><i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts._pages.newPage }}</MkButton
> >
<MkPagePreview
v-for="page in items"
:key="page.id"
class="ckltabjg"
:page="page"
/>
</MkPagination>
</div> </div>
<MkPagination </template>
v-slot="{ items }" </swiper-slide>
:pagination="myPagesPagination" <swiper-slide>
> <template v-if="tab == 'liked'">
<MkPagePreview <div class="rknalgpo liked">
v-for="mypage in items" <MkPagination
:key="mypage.id" v-slot="{ items }"
class="ckltabjg" :pagination="likedPagesPagination"
:page="mypage" key="likedPagesPagination"
/> >
</MkPagination> <MkPagePreview
</div> v-for="like in items"
:key="like.page.id"
class="ckltabjg"
:page="like.page"
/>
</MkPagination>
</div>
</template>
</swiper-slide>
<swiper-slide>
<template v-if="tab == 'my'">
<div class="rknalgpo my">
<div class="buttoncontainer">
<MkButton class="new primary" @click="create()"
><i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts._pages.newPage }}</MkButton
>
</div>
<MkPagination
v-slot="{ items }"
:pagination="myPagesPagination"
>
<MkPagePreview
v-for="mypage in items"
:key="mypage.id"
class="ckltabjg"
:page="mypage"
/>
</MkPagination>
</div>
</template>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</MkSpacer> </MkSpacer>
@ -96,8 +103,8 @@ import "swiper/scss/virtual";
const router = useRouter(); const router = useRouter();
let tab = $ref("featured");
const tabs = ["featured", "liked", "my"]; const tabs = ["featured", "liked", "my"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab))); watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const featuredPagesPagination = { const featuredPagesPagination = {
@ -166,7 +173,7 @@ function syncSlide(index) {
} }
onMounted(() => { onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex)); syncSlide(tabs.indexOf(tab));
}); });
</script> </script>