Merge pull request 'Only load timeline in active swiper slide' (#10200) from Freeplay/calckey:swiper into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10200

packages/client/src/components/MkSubNoteContent.vue

@@ -243,7 +243,7 @@ function focusFooter(ev) {
 </script>
 
 <style lang="scss" scoped>
-:deep(a) {
+:deep(a, button) {
 	position: relative;
 	z-index: 2;
 }

packages/client/src/pages/about.vue

@@ -7,7 +7,7 @@
 				:tabs="headerTabs"
 		/></template>
 		<MkSpacer :content-max="600" :margin-min="20">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/admin-file.vue

@@ -7,7 +7,7 @@
 				:tabs="headerTabs"
 		/></template>
 		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/channels.vue

@@ -7,7 +7,7 @@
 				:tabs="headerTabs"
 		/></template>
 		<MkSpacer :content-max="700">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/explore.vue

@@ -8,7 +8,7 @@
 		/></template>
 		<div class="lznhrdub">
 			<MkSpacer :content-max="1200">
-				<swiper
+				<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 					:modules="[Virtual]"
 					:space-between="20"
 					:virtual="true"

packages/client/src/pages/gallery/index.vue

@@ -8,7 +8,7 @@
 				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="1200">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/instance-info.vue

@@ -12,7 +12,7 @@
 			:margin-min="16"
 			:margin-max="32"
 		>
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/messaging/index.vue

@@ -8,7 +8,7 @@
 		/></template>
 		<div>
 			<MkSpacer :content-max="800">
-				<swiper
+				<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 					:modules="[Virtual]"
 					:space-between="20"
 					:virtual="true"

packages/client/src/pages/notifications.vue

@@ -9,7 +9,7 @@
 			/>
 		</template>
 		<MkSpacer :content-max="800">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/pages.vue

@@ -7,7 +7,7 @@
 				:tabs="headerTabs"
 		/></template>
 		<MkSpacer :content-max="700">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/search.vue

@@ -8,7 +8,7 @@
 				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="800">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/tag.vue

@@ -8,7 +8,7 @@
 				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="800">
-			<swiper
+			<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 				:modules="[Virtual]"
 				:space-between="20"
 				:virtual="true"

packages/client/src/pages/timeline.vue

@@ -32,7 +32,7 @@
 				/>
 			</div> *v-else on next div* -->
 				<div class="tl _block">
-					<swiper
+					<swiper :touch-angle="25" :threshold="10" :centeredSlides="true"
 						:modules="[Virtual]"
 						:space-between="20"
 						:virtual="true"
@@ -51,6 +51,7 @@
 							:virtual-index="index"
 						>
 							<XTimeline
+								v-if="index == timelines[swiperRef.activeIndex]"
 								ref="tl"
 								:key="src"
 								class="tl"

packages/client/src/style.scss

@@ -113,6 +113,10 @@ html, body {
 	padding: 0;
 }
 
+.swiper-slide {
+	height: unset !important;
+}
+
 a {
 	text-decoration: none;
 	cursor: pointer;