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

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

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

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

@ -24,6 +24,7 @@
@slide-change="onSlideChange"
>
<swiper-slide>
<template v-if="tab == 'featured'">
<div class="rknalgpo">
<MkPagination
v-slot="{ items }"
@ -37,12 +38,15 @@
/>
</MkPagination>
</div>
</template>
</swiper-slide>
<swiper-slide>
<template v-if="tab == 'liked'">
<div class="rknalgpo liked">
<MkPagination
v-slot="{ items }"
:pagination="likedPagesPagination"
key="likedPagesPagination"
>
<MkPagePreview
v-for="like in items"
@ -52,8 +56,10 @@
/>
</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()"
@ -73,6 +79,7 @@
/>
</MkPagination>
</div>
</template>
</swiper-slide>
</swiper>
</MkSpacer>
@ -96,8 +103,8 @@ import "swiper/scss/virtual";
const router = useRouter();
let tab = $ref("featured");
const tabs = ["featured", "liked", "my"];
let tab = $ref(tabs[0]);
watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
const featuredPagesPagination = {
@ -166,7 +173,7 @@ function syncSlide(index) {
}
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
syncSlide(tabs.indexOf(tab));
});
</script>