From a9c6c6b7b39349fe09182e6ddeeb60f32d298b57 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 20 Apr 2024 09:34:41 +0200
Subject: [PATCH 1/8] fix #3270

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/views/Navigation.vue | 47 +++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/js/views/Navigation.vue b/src/js/views/Navigation.vue
index 504ff9127..83cf44524 100644
--- a/src/js/views/Navigation.vue
+++ b/src/js/views/Navigation.vue
@@ -51,26 +51,27 @@
 		</template>
 
 		<template #footer>
-			<NcAppNavigationItem v-if="isComboActivated"
-				:name="t('polls', 'Combine polls')"
-				:to="{ name: 'combo' }">
-				<template #icon>
-					<ComboIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem v-if="showAdminSection"
-				:name="t('polls', 'Administration')"
-				:to="{ name: 'administration' }">
-				<template #icon>
-					<AdministrationIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem :name="t('polls', 'Preferences')"
-				@click="showSettings()">
-				<template #icon>
-					<SettingsIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
+			<ul class="app-navigation-footer">
+				<NcAppNavigationItem v-if="isComboActivated"
+					:name="t('polls', 'Combine polls')"
+					:to="{ name: 'combo' }">
+					<template #icon>
+						<ComboIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="showAdminSection"
+					:name="t('polls', 'Administration')"
+					:to="{ name: 'administration' }">
+					<template #icon>
+						<AdministrationIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem :name="t('polls', 'Preferences')" @click="showSettings()">
+					<template #icon>
+						<SettingsIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+			</ul>
 		</template>
 	</NcAppNavigation>
 </template>
@@ -222,4 +223,10 @@ export default {
 		}
 	}
 
+	.app-navigation-footer {
+		// height: auto !important;
+		// overflow: hidden !important;
+		// padding-top: 0 !important;
+		flex: 0 0 auto;
+	}
 </style>

From c4d7074c020f47ffff418d7ba0118dcfef5c9adb Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Wed, 24 Apr 2024 08:04:07 +0200
Subject: [PATCH 2/8] tidy flexbox in pollItem

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/components/Base/modules/BadgeDiv.vue |  15 +-
 src/js/components/Poll/PollInformation.vue  |   9 +-
 src/js/components/PollList/PollItem.vue     | 262 ++++++++++----------
 3 files changed, 145 insertions(+), 141 deletions(-)

diff --git a/src/js/components/Base/modules/BadgeDiv.vue b/src/js/components/Base/modules/BadgeDiv.vue
index a529a1afc..27a0cf0d4 100644
--- a/src/js/components/Base/modules/BadgeDiv.vue
+++ b/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,17 @@ export default {
 		gap: 5px;
 		border-radius: var(--border-radius);
 		padding: 5px;
-		margin: 8px 4px;
+		// 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;
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 883b80ac4..2da5cd363 100644
--- a/src/js/components/Poll/PollInformation.vue
+++ b/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>
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index b1a35e25b..7e88d0154 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -21,49 +21,53 @@
   -->
 
 <template>
-	<div v-if="header" class="poll-item__header">
-		<div class="item__title sortable" @click="$emit('sort-list', { sortBy: 'title'})">
+	<div v-if="header" class="poll-item header">
+		<div class="item__type" />
+		<div :class="['item__title', 'sortable', { 'sort': sortBy === 'title'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'title'})">
 			{{ t('polls', 'Title') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="item__icon-spacer" />
+		<div class="item__action" />
 
-		<div class="item__access sortable" @click="$emit('sort-list', { sortBy: 'access'})">
+		<div :class="['item__access', 'sortable', { 'sort': sortBy === 'access'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'access'})">
 			{{ t('polls', 'Access') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="item__owner sortable" @click="$emit('sort-list', { sortBy: 'owner.displayName'})">
+		<div :class="['item__owner', 'sortable', { 'sort': sortBy === 'owner.displayName'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'owner.displayName'})">
 			{{ t('polls', 'Owner') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="wrapper">
-			<div class="item__created sortable" @click="$emit('sort-list', { sortBy: 'created'})">
+		<div class="poll-item__wrapper">
+			<div :class="['item__created', 'sortable', { 'sort': sortBy === 'created'}, { reverse }]"
+				@click="$emit('sort-list', { sortBy: 'created'})">
 				{{ t('polls', 'Created') }}
-				<span :class="['sort-indicator', { 'hidden': sortBy !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+				<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 			</div>
 
-			<div class="item__expiry sortable" @click="$emit('sort-list', { sortBy: 'expire'})">
+			<div :class="['item__expiry', 'sortable', { 'sort': sortBy === 'expire'}, { reverse }]"
+				@click="$emit('sort-list', { sortBy: 'expire'})">
 				{{ t('polls', 'Closing date') }}
-				<span :class="['sort-indicator', { 'hidden': sortBy !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+				<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 			</div>
 		</div>
 	</div>
 
-	<div v-else class="poll-item__item">
-		<div :title="pollTypeName" class="item__icon-spacer">
-			<TextPollIcon v-if="pollType === 'textPoll'" />
-			<DatePollIcon v-else />
-		</div>
+	<div v-else class="poll-item content">
+		<TextPollIcon v-if="pollType === 'textPoll'" class="item__type" :title="pollTypeName" />
+		<DatePollIcon v-else class="item__type" :title="pollTypeName" />
 
 		<div v-if="noLink" class="item__title" :class="{ closed: closed }">
-			<div class="item__title__title">
+			<div class="title">
 				{{ poll.title }}
 			</div>
 
-			<div class="item__title__description">
+			<div class="description">
 				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
 			</div>
 		</div>
@@ -72,43 +76,38 @@
 			class="item__title"
 			:to="{ name: 'vote', params: { id: poll.id }}"
 			:class="{ closed: closed, active: (poll.id === $store.state.poll.id) }">
-			<div class="item__title__title">
+			<div class="title">
 				{{ poll.title }}
 			</div>
 
-			<div class="item__title__description">
+			<div class="description">
 				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
 			</div>
 		</router-link>
 
 		<slot name="actions" />
-		<div :title="accessType" class="item__access">
-			<ArchivedPollIcon v-if="poll.deleted" />
-			<OpenPollIcon v-else-if="poll.access === 'open'" />
-			<PrivatePollIcon v-else />
-		</div>
+
+		<ArchivedPollIcon v-if="poll.deleted" :title="accessType" class="item__access" />
+		<OpenPollIcon v-else-if="poll.access === 'open'" :title="accessType" class="item__access" />
+		<PrivatePollIcon v-else :title="accessType" class="item__access" />
 
 		<div class="item__owner">
 			<UserItem :user="poll.owner" condensed />
 		</div>
 
-		<div class="wrapper">
-			<div class="item__created">
-				<BadgeDiv>
-					<template #icon>
-						<CreationIcon />
-					</template>
-					{{ timeCreatedRelative }}
-				</BadgeDiv>
-			</div>
-			<div class="item__expiry">
-				<BadgeDiv :class="expiryClass">
-					<template #icon>
-						<ExpirationIcon />
-					</template>
-					{{ timeExpirationRelative }}
-				</BadgeDiv>
-			</div>
+		<div class="poll-item__wrapper">
+			<BadgeDiv class="item__created">
+				<template #icon>
+					<CreationIcon />
+				</template>
+				{{ timeCreatedRelative }}
+			</BadgeDiv>
+			<BadgeDiv :class="['item__expiry', expiryClass]">
+				<template #icon>
+					<ExpirationIcon />
+				</template>
+				{{ timeExpirationRelative }}
+			</BadgeDiv>
 		</div>
 	</div>
 </template>
@@ -155,7 +154,7 @@ export default {
 
 	computed: {
 		...mapState({
-			sortBy: (state) => state.polls.sort.sortby,
+			sortBy: (state) => state.polls.sort.by,
 			reverse: (state) => state.polls.sort.reverse,
 		}),
 
@@ -222,110 +221,115 @@ export default {
 </script>
 
 <style lang="scss">
-	[class^='poll-item__'] {
-		display: flex;
-		flex: 1;
-		padding: 4px 8px;
-		border-bottom: 1px solid var(--color-border-dark);
-	}
 
-	[class^='item__'],
-	.poll-item__item .action-item {
+	.poll-item {
 		display: flex;
+		column-gap: 4px;
 		align-items: center;
-		flex: 0 0 auto;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.item__title {
-		display: flex;
-		flex-direction: column;
-		flex: 1 0 155px;
-		align-items: stretch;
-		justify-content: center;
+		padding: 4px 0;
+		border-bottom: 1px solid var(--color-border-dark);
 
-		.item__title__title {
-			display: block;
+		.item__type {
+			flex: 0 0 44px;
 		}
 
-		.item__title__description {
-			opacity: 0.5;
-			display: block;
+		.item__title {
+			flex: 1 0 170px;
 		}
-	}
-
-	.poll-item__header {
-		opacity: 0.7;
-		flex: auto;
-		height: 4em;
-		align-items: center;
-		padding-left: 52px;
 
-		.sortable {
-			cursor: pointer;
-			&:hover {
-				.sort-indicator.hidden {
-					visibility: visible;
-					display: block;
-				}
-			}
+		.item__action,
+		.action-item,
+		.item__access,
+		.item__owner {
+			display: flex;
+			flex: 0 0 80px;
+			justify-content: center;
 		}
 
-		.item__title {
-			flex-direction: row;
-			justify-content: flex-start;
+		.item__created,
+		.item__expiry {
+			flex: 0 1 148px;
 		}
-	}
 
-	.poll-item__item {
-		&> .action-item {
+		.poll-item__wrapper {
 			display: flex;
+			flex: 0 1 300px;
+			column-gap: 4px;
+			flex-wrap: wrap;
+			align-items: center;
+			overflow: hidden;
+
+			.badge {
+				height: 2.5em;
+			}
 		}
-		&.active {
-			background-color: var(--color-primary-element-light);
-		}
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
-	}
 
-	.item__icon-spacer {
-		width: 44px;
-		min-width: 44px;
-	}
+		&.header {
+			opacity: 0.7;
+			height: 4em;
 
-	.wrapper {
-		display: flex;
-		flex: 0 1 auto;
-		flex-wrap: wrap;
-	}
+			[class^="item__"] {
+				display: flex;
+				align-items: baseline;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 
-	.item__access,
-	.item__owner {
-		width: 78px;
-		justify-content: center;
-	}
+			.sortable {
+				cursor: pointer;
+			}
 
-	.item__created,
-	.item__expiry {
-		width: 145px;
-		.badge {
-			width: 100%;
+			.sort::after {
+				display: inline-block;
+				content: '';
+				width: 8px;
+				height: 8px;
+				margin-left: 4px;
+				background-image: var(--icon-triangle-n-dark);
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+
+			.sort.reverse::after {
+				background-image: var(--icon-triangle-s-dark);
+			}
 		}
-	}
 
-	[class^='item__type'] {
-		width: 44px;
-		min-width: 16px;
-		min-height: 16px;
-	}
+		&.content {
+			.item__title {
+				overflow: hidden;
+
+				> * {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.title {
+					font-weight: 600;
+				}
+
+				.description {
+					opacity: 0.5;
+				}
+			}
+
+			.item__created,
+			.item__expiry {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&.active {
+				background-color: var(--color-primary-element-light);
+			}
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+		}
 
-	[class^='item__access'] {
-		width: 70px;
-		min-width: 16px;
-		min-height: 16px;
-		justify-content: center;
 	}
 </style>

From 50e651917a54dc596edfdaad3008c4d1cd5c6625 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 20 Apr 2024 09:34:41 +0200
Subject: [PATCH 3/8] fix #3270

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/views/Navigation.vue | 47 +++++++++++++++++++++----------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/js/views/Navigation.vue b/src/js/views/Navigation.vue
index 504ff9127..83cf44524 100644
--- a/src/js/views/Navigation.vue
+++ b/src/js/views/Navigation.vue
@@ -51,26 +51,27 @@
 		</template>
 
 		<template #footer>
-			<NcAppNavigationItem v-if="isComboActivated"
-				:name="t('polls', 'Combine polls')"
-				:to="{ name: 'combo' }">
-				<template #icon>
-					<ComboIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem v-if="showAdminSection"
-				:name="t('polls', 'Administration')"
-				:to="{ name: 'administration' }">
-				<template #icon>
-					<AdministrationIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem :name="t('polls', 'Preferences')"
-				@click="showSettings()">
-				<template #icon>
-					<SettingsIcon :size="iconSize" />
-				</template>
-			</NcAppNavigationItem>
+			<ul class="app-navigation-footer">
+				<NcAppNavigationItem v-if="isComboActivated"
+					:name="t('polls', 'Combine polls')"
+					:to="{ name: 'combo' }">
+					<template #icon>
+						<ComboIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem v-if="showAdminSection"
+					:name="t('polls', 'Administration')"
+					:to="{ name: 'administration' }">
+					<template #icon>
+						<AdministrationIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+				<NcAppNavigationItem :name="t('polls', 'Preferences')" @click="showSettings()">
+					<template #icon>
+						<SettingsIcon :size="iconSize" />
+					</template>
+				</NcAppNavigationItem>
+			</ul>
 		</template>
 	</NcAppNavigation>
 </template>
@@ -222,4 +223,10 @@ export default {
 		}
 	}
 
+	.app-navigation-footer {
+		// height: auto !important;
+		// overflow: hidden !important;
+		// padding-top: 0 !important;
+		flex: 0 0 auto;
+	}
 </style>

From a47652c1c3524e649583674817188d03a4e8fdc5 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Wed, 24 Apr 2024 08:04:07 +0200
Subject: [PATCH 4/8] tidy flexbox in pollItem

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/components/Base/modules/BadgeDiv.vue |  15 +-
 src/js/components/Poll/PollInformation.vue  |   9 +-
 src/js/components/PollList/PollItem.vue     | 262 ++++++++++----------
 3 files changed, 145 insertions(+), 141 deletions(-)

diff --git a/src/js/components/Base/modules/BadgeDiv.vue b/src/js/components/Base/modules/BadgeDiv.vue
index a529a1afc..27a0cf0d4 100644
--- a/src/js/components/Base/modules/BadgeDiv.vue
+++ b/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,17 @@ export default {
 		gap: 5px;
 		border-radius: var(--border-radius);
 		padding: 5px;
-		margin: 8px 4px;
+		// 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;
diff --git a/src/js/components/Poll/PollInformation.vue b/src/js/components/Poll/PollInformation.vue
index 883b80ac4..2da5cd363 100644
--- a/src/js/components/Poll/PollInformation.vue
+++ b/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>
diff --git a/src/js/components/PollList/PollItem.vue b/src/js/components/PollList/PollItem.vue
index b1a35e25b..7e88d0154 100644
--- a/src/js/components/PollList/PollItem.vue
+++ b/src/js/components/PollList/PollItem.vue
@@ -21,49 +21,53 @@
   -->
 
 <template>
-	<div v-if="header" class="poll-item__header">
-		<div class="item__title sortable" @click="$emit('sort-list', { sortBy: 'title'})">
+	<div v-if="header" class="poll-item header">
+		<div class="item__type" />
+		<div :class="['item__title', 'sortable', { 'sort': sortBy === 'title'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'title'})">
 			{{ t('polls', 'Title') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'title'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="item__icon-spacer" />
+		<div class="item__action" />
 
-		<div class="item__access sortable" @click="$emit('sort-list', { sortBy: 'access'})">
+		<div :class="['item__access', 'sortable', { 'sort': sortBy === 'access'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'access'})">
 			{{ t('polls', 'Access') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'access'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="item__owner sortable" @click="$emit('sort-list', { sortBy: 'owner.displayName'})">
+		<div :class="['item__owner', 'sortable', { 'sort': sortBy === 'owner.displayName'}, { reverse }]"
+			@click="$emit('sort-list', { sortBy: 'owner.displayName'})">
 			{{ t('polls', 'Owner') }}
-			<span :class="['sort-indicator', { 'hidden': sortBy !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+			<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'owner.displayName'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 		</div>
 
-		<div class="wrapper">
-			<div class="item__created sortable" @click="$emit('sort-list', { sortBy: 'created'})">
+		<div class="poll-item__wrapper">
+			<div :class="['item__created', 'sortable', { 'sort': sortBy === 'created'}, { reverse }]"
+				@click="$emit('sort-list', { sortBy: 'created'})">
 				{{ t('polls', 'Created') }}
-				<span :class="['sort-indicator', { 'hidden': sortBy !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+				<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'created'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 			</div>
 
-			<div class="item__expiry sortable" @click="$emit('sort-list', { sortBy: 'expire'})">
+			<div :class="['item__expiry', 'sortable', { 'sort': sortBy === 'expire'}, { reverse }]"
+				@click="$emit('sort-list', { sortBy: 'expire'})">
 				{{ t('polls', 'Closing date') }}
-				<span :class="['sort-indicator', { 'hidden': sortBy !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" />
+				<!-- <span :class="['sort-indicator', { 'hidden': sortBy !== 'expire'}, reverse ? 'icon-triangle-s' : 'icon-triangle-n']" /> -->
 			</div>
 		</div>
 	</div>
 
-	<div v-else class="poll-item__item">
-		<div :title="pollTypeName" class="item__icon-spacer">
-			<TextPollIcon v-if="pollType === 'textPoll'" />
-			<DatePollIcon v-else />
-		</div>
+	<div v-else class="poll-item content">
+		<TextPollIcon v-if="pollType === 'textPoll'" class="item__type" :title="pollTypeName" />
+		<DatePollIcon v-else class="item__type" :title="pollTypeName" />
 
 		<div v-if="noLink" class="item__title" :class="{ closed: closed }">
-			<div class="item__title__title">
+			<div class="title">
 				{{ poll.title }}
 			</div>
 
-			<div class="item__title__description">
+			<div class="description">
 				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
 			</div>
 		</div>
@@ -72,43 +76,38 @@
 			class="item__title"
 			:to="{ name: 'vote', params: { id: poll.id }}"
 			:class="{ closed: closed, active: (poll.id === $store.state.poll.id) }">
-			<div class="item__title__title">
+			<div class="title">
 				{{ poll.title }}
 			</div>
 
-			<div class="item__title__description">
+			<div class="description">
 				{{ poll.description ? poll.description : t('polls', 'No description provided') }}
 			</div>
 		</router-link>
 
 		<slot name="actions" />
-		<div :title="accessType" class="item__access">
-			<ArchivedPollIcon v-if="poll.deleted" />
-			<OpenPollIcon v-else-if="poll.access === 'open'" />
-			<PrivatePollIcon v-else />
-		</div>
+
+		<ArchivedPollIcon v-if="poll.deleted" :title="accessType" class="item__access" />
+		<OpenPollIcon v-else-if="poll.access === 'open'" :title="accessType" class="item__access" />
+		<PrivatePollIcon v-else :title="accessType" class="item__access" />
 
 		<div class="item__owner">
 			<UserItem :user="poll.owner" condensed />
 		</div>
 
-		<div class="wrapper">
-			<div class="item__created">
-				<BadgeDiv>
-					<template #icon>
-						<CreationIcon />
-					</template>
-					{{ timeCreatedRelative }}
-				</BadgeDiv>
-			</div>
-			<div class="item__expiry">
-				<BadgeDiv :class="expiryClass">
-					<template #icon>
-						<ExpirationIcon />
-					</template>
-					{{ timeExpirationRelative }}
-				</BadgeDiv>
-			</div>
+		<div class="poll-item__wrapper">
+			<BadgeDiv class="item__created">
+				<template #icon>
+					<CreationIcon />
+				</template>
+				{{ timeCreatedRelative }}
+			</BadgeDiv>
+			<BadgeDiv :class="['item__expiry', expiryClass]">
+				<template #icon>
+					<ExpirationIcon />
+				</template>
+				{{ timeExpirationRelative }}
+			</BadgeDiv>
 		</div>
 	</div>
 </template>
@@ -155,7 +154,7 @@ export default {
 
 	computed: {
 		...mapState({
-			sortBy: (state) => state.polls.sort.sortby,
+			sortBy: (state) => state.polls.sort.by,
 			reverse: (state) => state.polls.sort.reverse,
 		}),
 
@@ -222,110 +221,115 @@ export default {
 </script>
 
 <style lang="scss">
-	[class^='poll-item__'] {
-		display: flex;
-		flex: 1;
-		padding: 4px 8px;
-		border-bottom: 1px solid var(--color-border-dark);
-	}
 
-	[class^='item__'],
-	.poll-item__item .action-item {
+	.poll-item {
 		display: flex;
+		column-gap: 4px;
 		align-items: center;
-		flex: 0 0 auto;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.item__title {
-		display: flex;
-		flex-direction: column;
-		flex: 1 0 155px;
-		align-items: stretch;
-		justify-content: center;
+		padding: 4px 0;
+		border-bottom: 1px solid var(--color-border-dark);
 
-		.item__title__title {
-			display: block;
+		.item__type {
+			flex: 0 0 44px;
 		}
 
-		.item__title__description {
-			opacity: 0.5;
-			display: block;
+		.item__title {
+			flex: 1 0 170px;
 		}
-	}
-
-	.poll-item__header {
-		opacity: 0.7;
-		flex: auto;
-		height: 4em;
-		align-items: center;
-		padding-left: 52px;
 
-		.sortable {
-			cursor: pointer;
-			&:hover {
-				.sort-indicator.hidden {
-					visibility: visible;
-					display: block;
-				}
-			}
+		.item__action,
+		.action-item,
+		.item__access,
+		.item__owner {
+			display: flex;
+			flex: 0 0 80px;
+			justify-content: center;
 		}
 
-		.item__title {
-			flex-direction: row;
-			justify-content: flex-start;
+		.item__created,
+		.item__expiry {
+			flex: 0 1 148px;
 		}
-	}
 
-	.poll-item__item {
-		&> .action-item {
+		.poll-item__wrapper {
 			display: flex;
+			flex: 0 1 300px;
+			column-gap: 4px;
+			flex-wrap: wrap;
+			align-items: center;
+			overflow: hidden;
+
+			.badge {
+				height: 2.5em;
+			}
 		}
-		&.active {
-			background-color: var(--color-primary-element-light);
-		}
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
-	}
 
-	.item__icon-spacer {
-		width: 44px;
-		min-width: 44px;
-	}
+		&.header {
+			opacity: 0.7;
+			height: 4em;
 
-	.wrapper {
-		display: flex;
-		flex: 0 1 auto;
-		flex-wrap: wrap;
-	}
+			[class^="item__"] {
+				display: flex;
+				align-items: baseline;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 
-	.item__access,
-	.item__owner {
-		width: 78px;
-		justify-content: center;
-	}
+			.sortable {
+				cursor: pointer;
+			}
 
-	.item__created,
-	.item__expiry {
-		width: 145px;
-		.badge {
-			width: 100%;
+			.sort::after {
+				display: inline-block;
+				content: '';
+				width: 8px;
+				height: 8px;
+				margin-left: 4px;
+				background-image: var(--icon-triangle-n-dark);
+				background-repeat: no-repeat;
+				background-position: center;
+			}
+
+			.sort.reverse::after {
+				background-image: var(--icon-triangle-s-dark);
+			}
 		}
-	}
 
-	[class^='item__type'] {
-		width: 44px;
-		min-width: 16px;
-		min-height: 16px;
-	}
+		&.content {
+			.item__title {
+				overflow: hidden;
+
+				> * {
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				.title {
+					font-weight: 600;
+				}
+
+				.description {
+					opacity: 0.5;
+				}
+			}
+
+			.item__created,
+			.item__expiry {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&.active {
+				background-color: var(--color-primary-element-light);
+			}
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+		}
 
-	[class^='item__access'] {
-		width: 70px;
-		min-width: 16px;
-		min-height: 16px;
-		justify-content: center;
 	}
 </style>

From e25fb26f1c25a8f934d93eb50d9f2472b2d66a76 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 27 Apr 2024 19:56:39 +0200
Subject: [PATCH 5/8] remove outcommented line

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/components/Base/modules/BadgeDiv.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/components/Base/modules/BadgeDiv.vue b/src/js/components/Base/modules/BadgeDiv.vue
index 27a0cf0d4..641ccac55 100644
--- a/src/js/components/Base/modules/BadgeDiv.vue
+++ b/src/js/components/Base/modules/BadgeDiv.vue
@@ -48,7 +48,6 @@ export default {
 		gap: 5px;
 		border-radius: var(--border-radius);
 		padding: 5px;
-		// margin: 8px 4px;
 		text-align: center;
 		line-height: 1.1em;
 		font-size: 0.9em;

From 0d92a387e8ea9dd8b22c30da495ee4f4f903e317 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 27 Apr 2024 20:11:10 +0200
Subject: [PATCH 6/8] always show header and reduce component usage

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/views/PollList.vue | 144 ++++++++++++++++++++------------------
 1 file changed, 75 insertions(+), 69 deletions(-)

diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index 62f384e7b..db36c509a 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -30,73 +30,65 @@
 		</HeaderBar>
 
 		<div class="area__main">
-			<NcEmptyContent v-if="noPolls && isLoading"
-				:name="t('polls', 'Loading polls…')">
-				<NcLoadingIcon slot="icon" :size="64" />
-			</NcEmptyContent>
-			<NcEmptyContent v-else-if="noPolls"
-				:name="t('polls', 'No polls found for this category')"
-				:description="t('polls', 'Add one or change category!')">
+			<TransitionGroup tag="div" name="list" class="poll-list__list">
+				<PollItem key="0" :header="true" @sort-list="setSortColumn($event)" />
+
+				<template v-if="!emptyPollListnoPolls">
+					<PollItem v-for="(poll) in pollList"
+						:key="poll.id"
+						:poll="poll"
+						@goto-poll="gotoPoll(poll.id)"
+						@load-poll="loadPoll(poll.id)">
+						<template #actions>
+							<NcActions force-menu>
+								<NcActionButton v-if="isPollCreationAllowed"
+									:name="t('polls', 'Clone poll')"
+									close-after-click
+									@click="clonePoll(poll.id)">
+									<template #icon>
+										<ClonePollIcon />
+									</template>
+								</NcActionButton>
+
+								<NcActionButton v-if="poll.permissions.edit && !poll.deleted"
+									:name="t('polls', 'Archive poll')"
+									close-after-click
+									@click="toggleArchive(poll.id)">
+									<template #icon>
+										<ArchivePollIcon />
+									</template>
+								</NcActionButton>
+
+								<NcActionButton v-if="poll.permissions.edit && poll.deleted"
+									:name="t('polls', 'Restore poll')"
+									close-after-click
+									@click="toggleArchive(poll.id)">
+									<template #icon>
+										<RestorePollIcon />
+									</template>
+								</NcActionButton>
+
+								<NcActionButton v-if="poll.permissions.edit && poll.deleted"
+									class="danger"
+									:name="t('polls', 'Delete poll')"
+									close-after-click
+									@click="deletePoll(poll.id)">
+									<template #icon>
+										<DeletePollIcon />
+									</template>
+								</NcActionButton>
+							</NcActions>
+						</template>
+					</PollItem>
+				</template>
+			</TransitionGroup>
+
+			<NcEmptyContent v-if="emptyPollListnoPolls" v-bind="emptyContent">
 				<template #icon>
-					<PollsAppIcon />
+					<NcLoadingIcon v-if="isLoading" :size="64" />
+					<PollsAppIcon v-else />
 				</template>
 			</NcEmptyContent>
-
-			<TransitionGroup v-else
-				tag="div"
-				name="list"
-				class="poll-list__list">
-				<PollItem key="0"
-					:header="true"
-					@sort-list="setSortColumn($event)" />
-
-				<PollItem v-for="(poll) in pollList"
-					:key="poll.id"
-					:poll="poll"
-					@goto-poll="gotoPoll(poll.id)"
-					@load-poll="loadPoll(poll.id)">
-					<template #actions>
-						<NcActions force-menu>
-							<NcActionButton v-if="isPollCreationAllowed"
-								:name="t('polls', 'Clone poll')"
-								close-after-click
-								@click="clonePoll(poll.id)">
-								<template #icon>
-									<ClonePollIcon />
-								</template>
-							</NcActionButton>
-
-							<NcActionButton v-if="poll.permissions.edit && !poll.deleted"
-								:name="t('polls', 'Archive poll')"
-								close-after-click
-								@click="toggleArchive(poll.id)">
-								<template #icon>
-									<ArchivePollIcon />
-								</template>
-							</NcActionButton>
-
-							<NcActionButton v-if="poll.permissions.edit && poll.deleted"
-								:name="t('polls', 'Restore poll')"
-								close-after-click
-								@click="toggleArchive(poll.id)">
-								<template #icon>
-									<RestorePollIcon />
-								</template>
-							</NcActionButton>
-
-							<NcActionButton v-if="poll.permissions.edit && poll.deleted"
-								class="danger"
-								:name="t('polls', 'Delete poll')"
-								close-after-click
-								@click="deletePoll(poll.id)">
-								<template #icon>
-									<DeletePollIcon />
-								</template>
-							</NcActionButton>
-						</NcActions>
-					</template>
-				</PollItem>
-			</TransitionGroup>
 		</div>
 	</NcAppContent>
 </template>
@@ -116,15 +108,15 @@ export default {
 	name: 'PollList',
 
 	components: {
+		ArchivePollIcon,
+		ClonePollIcon,
+		DeletePollIcon,
+		HeaderBar,
 		NcAppContent,
 		NcActions,
 		NcActionButton,
 		NcEmptyContent,
 		NcLoadingIcon,
-		HeaderBar,
-		DeletePollIcon,
-		ClonePollIcon,
-		ArchivePollIcon,
 		RestorePollIcon,
 		PollsAppIcon,
 		PollItem: () => import('../components/PollList/PollItem.vue'),
@@ -141,6 +133,20 @@ export default {
 			filteredPolls: 'polls/filtered',
 		}),
 
+		emptyContent() {
+			if (this.isLoading) {
+				return {
+					name: t('polls', 'Loading polls…'),
+					description: '',
+				}
+			}
+
+			return {
+				name: t('polls', 'No polls found for this category'),
+				description: t('polls', 'Add one or change category!'),
+			}
+		},
+
 		title() {
 			return this.pollCategories.find((category) => (category.id === this.$route.params.type))?.titleExt
 		},
@@ -158,7 +164,7 @@ export default {
 			return this.filteredPolls(this.$route.params.type)
 		},
 
-		noPolls() {
+		emptyPollListnoPolls() {
 			return this.pollList.length < 1
 		},
 

From 5d46d46d881b18ec0b10bebd37d57ef214644f59 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 27 Apr 2024 20:14:43 +0200
Subject: [PATCH 7/8] Adopt change to administration view

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/views/Administration.vue | 129 ++++++++++++++++++--------------
 1 file changed, 71 insertions(+), 58 deletions(-)

diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue
index ce6db9bb1..a2a3e9f86 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -30,62 +30,58 @@
 		</HeaderBar>
 
 		<div class="area__main">
-			<NcEmptyContent v-if="noPolls"
-				:name="t('polls', 'No polls found for this category')"
-				:description="t('polls', 'Add one or change category!')">
-				<template #icon>
-					<PollsAppIcon />
-				</template>
-			</NcEmptyContent>
-
-			<TransitionGroup is="div"
-				v-else
-				name="list"
-				class="poll-list__list">
+			<TransitionGroup is="div" name="list" class="poll-list__list">
 				<PollItem key="0"
 					:header="true"
 					:sort="sort"
 					:reverse="reverse"
 					@sort-list="setSort($event)" />
 
-				<PollItem v-for="(poll) in sortedList"
-					:key="poll.id"
-					:poll="poll"
-					no-link>
-					<template #actions>
-						<NcActions :force-menu="true">
-							<NcActionButton :name="t('polls', 'Take over')"
-								close-after-click
-								@click="confirmTakeOver(poll.id, poll.owner)">
-								<template #icon>
-									<PlusIcon />
-								</template>
-							</NcActionButton>
-
-							<NcActionButton :name="poll.deleted ? t('polls', 'Restore poll') : t('polls', 'Archive poll')"
-								close-after-click
-								@click="toggleArchive(poll.id)">
-								<template #icon>
-									<RestorePollIcon v-if="poll.deleted" />
-									<ArchivePollIcon v-else />
-								</template>
-							</NcActionButton>
-
-							<NcActionButton class="danger"
-								:name="t('polls', 'Delete poll')"
-								close-after-click
-								@click="confirmDelete(poll.id, poll.owner)">
-								<template #icon>
-									<DeleteIcon />
-								</template>
-							</NcActionButton>
-						</NcActions>
-					</template>
-				</PollItem>
+				<template v-if="!isEmptyPollList">
+					<PollItem v-for="(poll) in sortedList"
+						:key="poll.id"
+						:poll="poll"
+						no-link>
+						<template #actions>
+							<NcActions :force-menu="true">
+								<NcActionButton :name="t('polls', 'Take over')"
+									close-after-click
+									@click="confirmTakeOver(poll.id, poll.owner)">
+									<template #icon>
+										<PlusIcon />
+									</template>
+								</NcActionButton>
+
+								<NcActionButton :name="poll.deleted ? t('polls', 'Restore poll') : t('polls', 'Archive poll')"
+									close-after-click
+									@click="toggleArchive(poll.id)">
+									<template #icon>
+										<RestorePollIcon v-if="poll.deleted" />
+										<ArchivePollIcon v-else />
+									</template>
+								</NcActionButton>
+
+								<NcActionButton class="danger"
+									:name="t('polls', 'Delete poll')"
+									close-after-click
+									@click="confirmDelete(poll.id, poll.owner)">
+									<template #icon>
+										<DeleteIcon />
+									</template>
+								</NcActionButton>
+							</NcActions>
+						</template>
+					</PollItem>
+				</template>
 			</TransitionGroup>
-		</div>
 
-		<LoadingOverlay v-if="isLoading" />
+			<NcEmptyContent v-if="isEmptyPollList" v-bind="emptyContent">
+				<template #icon>
+					<NcLoadingIcon v-if="isLoading" :size="64" />
+					<PollsAppIcon v-else />
+				</template>
+			</NcEmptyContent>
+		</div>
 
 		<NcModal v-if="takeOverModal" size="small" @close="takeOverModal = false">
 			<div class="modal__content">
@@ -133,9 +129,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { showError } from '@nextcloud/dialogs'
-import { NcActions, NcActionButton, NcAppContent, NcButton, NcEmptyContent, NcModal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcAppContent, NcButton, NcEmptyContent, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { sortBy } from 'lodash'
 import { HeaderBar } from '../components/Base/index.js'
 import { PollsAppIcon } from '../components/AppIcons/index.js'
@@ -149,24 +145,23 @@ export default {
 
 	components: {
 		ArchivePollIcon,
-		RestorePollIcon,
-		PlusIcon,
 		DeleteIcon,
-		PollsAppIcon,
+		HeaderBar,
 		NcAppContent,
 		NcActions,
 		NcActionButton,
+		NcButton,
 		NcEmptyContent,
-		HeaderBar,
+		NcLoadingIcon,
 		NcModal,
-		NcButton,
-		LoadingOverlay: () => import('../components/Base/modules/LoadingOverlay.vue'),
+		PlusIcon,
+		PollsAppIcon,
+		RestorePollIcon,
 		PollItem: () => import('../components/PollList/PollItem.vue'),
 	},
 
 	data() {
 		return {
-			isLoading: false,
 			sort: 'created',
 			reverse: true,
 			takeOverModal: false,
@@ -179,10 +174,28 @@ export default {
 	},
 
 	computed: {
+		...mapState({
+			isLoading: (state) => state.polls.pollsLoading,
+		}),
+
 		...mapGetters({
 			filteredPolls: 'pollsAdmin/filtered',
 		}),
 
+		emptyContent() {
+			if (this.isLoading) {
+				return {
+					name: t('polls', 'Loading polls…'),
+					description: '',
+				}
+			}
+
+			return {
+				name: t('polls', 'No polls found for this category'),
+				description: '',
+			}
+		},
+
 		title() {
 			return t('polls', 'Administration')
 		},
@@ -199,7 +212,7 @@ export default {
 			return sortBy(this.filteredPolls(this.$route.params.type), this.sort)
 		},
 
-		noPolls() {
+		isEmptyPollList() {
 			return this.sortedList.length < 1
 		},
 

From 1715f41bb75da46cbffa118721f5f93ed5d6bc59 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sat, 27 Apr 2024 20:16:29 +0200
Subject: [PATCH 8/8] reduce transition time

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/js/assets/scss/transitions.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/assets/scss/transitions.scss b/src/js/assets/scss/transitions.scss
index ad8169a2e..78b18767a 100644
--- a/src/js/assets/scss/transitions.scss
+++ b/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,