Backport of chunked loading and leaner pollItems

appinfo/info.xml

@@ -4,7 +4,7 @@
   <name>Polls</name>
   <summary>A polls app, similar to Doodle/Dudle with the possibility to restrict access.</summary>
   <description>A polls app, similar to Doodle/Dudle with the possibility to restrict access (members, certain groups/users, hidden and public).</description>
-  <version>6.3.0-beta1</version>
+  <version>6.3.0-beta2</version>
   <licence>agpl</licence>
   <author>Vinzenz Rosenkranz</author>
   <author>René Gieling</author>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "polls",
 	"description": "Polls app for nextcloud",
-	"version": "6.3.0-beta1",
+	"version": "6.3.0-beta2",
 	"authors": [
 		{
 			"name": "Vinzenz Rosenkranz",

src/js/assets/scss/transitions.scss

@@ -1,7 +1,7 @@
 .transitions-active {
 	.list-enter-active,
 	.list-leave-active {
-		transition: all 2.5s ease;
+		transition: all 0.5s ease;
 	}
 
 	.list-enter,

src/js/components/Base/index.js

@@ -8,3 +8,4 @@ export { default as InputDiv } from './modules/InputDiv.vue'
 export { default as LoadingOverlay } from './modules/LoadingOverlay.vue'
 export { default as QrModal } from './modules/QrModal.vue'
 export { default as RadioGroupDiv } from './modules/RadioGroupDiv.vue'
+export { default as IntersectionObserver } from './modules/IntersectionObserver.vue'

src/js/components/Base/modules/BadgeDiv.vue

@@ -22,9 +22,7 @@
 
 <template>
 	<Component :is="tag" class="badge">
-		<div>
-			<slot name="icon" />
-		</div>
+		<slot name="icon" />
 		<span>
 			<slot />
 		</span>
@@ -50,12 +48,16 @@ export default {
 		gap: 5px;
 		border-radius: var(--border-radius);
 		padding: 5px;
-		margin: 8px 4px;
 		text-align: center;
 		line-height: 1.1em;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		font-size: 0.9em;
+		overflow: hidden;
+
+		span {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
 		h2 & {
 			font-size: 0.6em;

src/js/components/Base/modules/IntersectionObserver.vue

@@ -0,0 +1,56 @@
+<!--
+  - @copyright Copyright (c) 2024 René Gieling <github@dartcafe.de>
+  -
+  - @author René Gieling <github@dartcafe.de>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div ref="observerTarget">
+		<slot :in-viewport="inViewport" />
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			inViewport: false,
+			observer: null,
+		}
+	},
+	mounted() {
+		this.observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					this.inViewport = true
+					this.$emit('visible')
+				} else {
+					this.inViewport = false
+				}
+			})
+		})
+		this.observer.observe(this.$refs.observerTarget)
+	},
+	beforeDestroy() {
+		if (this.observer) {
+			this.observer.disconnect()
+		}
+	},
+}
+</script>

src/js/components/Poll/PollInformation.vue

@@ -270,11 +270,8 @@ export default {
 
 <style lang="scss">
 .poll-information {
-	padding: 8px;
-	> div {
-		opacity: 0.7;
-		margin: 8px 0 4px 0;
-		padding-left: 24px;
-	}
+	display: flex;
+	flex-direction: column;
+	row-gap: 8px;
 }
 </style>