limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-25 03:17:38 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

[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
No known key found for this signature in database
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" @slide-change="onSlideChange"
> >
<swiper-slide> <swiper-slide>
<template v-if="tab == 'explore'">
<MkFolder class="_gap"> <MkFolder class="_gap">
<template #header <template #header
><i class="ph-clock ph-bold ph-lg"></i> ><i class="ph-clock ph-bold ph-lg"></i>
@ -65,8 +66,10 @@
</div> </div>
</MkPagination> </MkPagination>
</MkFolder> </MkFolder>
</template>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<template v-if="tab == 'liked'">
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="likedPostsPagination" :pagination="likedPostsPagination"
@ -80,12 +83,16 @@
/> />
</div> </div>
</MkPagination> </MkPagination>
</template>
</swiper-slide> </swiper-slide>
<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> ><i class="ph-plus ph-bold ph-lg"></i>
{{ i18n.ts.postToGallery }}</MkA {{ i18n.ts.postToGallery }}</MkButton
> >
</div>
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="myPostsPagination" :pagination="myPostsPagination"
@ -99,6 +106,7 @@
/> />
</div> </div>
</MkPagination> </MkPagination>
</template>
</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));

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

@ -24,6 +24,7 @@
@slide-change="onSlideChange" @slide-change="onSlideChange"
> >
<swiper-slide> <swiper-slide>
<template v-if="tab == 'featured'">
<div class="rknalgpo"> <div class="rknalgpo">
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
@ -37,12 +38,15 @@
/> />
</MkPagination> </MkPagination>
</div> </div>
</template>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<template v-if="tab == 'liked'">
<div class="rknalgpo liked"> <div class="rknalgpo liked">
<MkPagination <MkPagination
v-slot="{ items }" v-slot="{ items }"
:pagination="likedPagesPagination" :pagination="likedPagesPagination"
key="likedPagesPagination"
> >
<MkPagePreview <MkPagePreview
v-for="like in items" v-for="like in items"
@ -52,8 +56,10 @@
/> />
</MkPagination> </MkPagination>
</div> </div>
</template>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<template v-if="tab == 'my'">
<div class="rknalgpo my"> <div class="rknalgpo my">
<div class="buttoncontainer"> <div class="buttoncontainer">
<MkButton class="new primary" @click="create()" <MkButton class="new primary" @click="create()"
@ -73,6 +79,7 @@
/> />
</MkPagination> </MkPagination>
</div> </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>