Merge pull request #1662 from nextcloud/refactor/css

simplify DOM and tidy CSS

21 files changed, 161 insertions, 232 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index 3c9d9498..167a558e 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -234,27 +234,6 @@ export default {
 
 <style  lang="scss">
 
-.label-deprecated {
-	border: solid 1px;
-	border-radius: var(--border-radius);
-	padding: 1px 4px;
-	margin: 0 4px;
-	font-size: 60%;
-	text-align: center;
-
-	&.error {
-		border-color: var(--color-error);
-		background-color: var(--color-error);
-		color: var(--color-primary-text);
-	}
-
-	&.success {
-		border-color: var(--color-success);
-		background-color: var(--color-success);
-		color: var(--color-primary-text);
-	}
-}
-
 .modal__content {
 	padding: 14px;
 	display: flex;
diff --git a/src/js/assets/scss/experimental.scss b/src/js/assets/scss/experimental.scss
index bcedb95b..1d9b4f81 100644
--- a/src/js/assets/scss/experimental.scss
+++ b/src/js/assets/scss/experimental.scss
@@ -11,8 +11,7 @@
 .area__header {
 	display: flex;
 	align-items: flex-start;
-	margin-left: 48px;
-	margin-top: 0;
+	margin-left: 44px !important;
 	min-width: 286px;
 }
 
diff --git a/src/js/components/Base/Badge.vue b/src/js/components/Base/Badge.vue
index 82addc36..22c399e4 100644
--- a/src/js/components/Base/Badge.vue
+++ b/src/js/components/Base/Badge.vue
@@ -54,7 +54,7 @@ export default {
 
 <style lang="scss" scoped>
 	h2 .badge {
-		font-size: 60%;
+		font-size: 0.6em;
 	}
 
 	.badge {
@@ -65,7 +65,7 @@ export default {
 		line-height: 1.1em;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		font-size: 14px;
+		font-size: 0.9em;
 
 		&.withIcon {
 			padding-left: 25px !important;
diff --git a/src/js/components/Base/LoadingOverlay.vue b/src/js/components/Base/LoadingOverlay.vue
index 3c8956db..75545c51 100644
--- a/src/js/components/Base/LoadingOverlay.vue
+++ b/src/js/components/Base/LoadingOverlay.vue
@@ -37,8 +37,8 @@ export default {
 	position: absolute;
 	left: 0;
 	top: 0;
-	width: 100%;
-	height: 100%;
+	width: 100vw;
+	height: 100vh;
 	background: var(--color-main-background);
 	opacity: 0.9;
 	z-index: 9999;
diff --git a/src/js/components/Calendar/CalendarInfo.vue b/src/js/components/Calendar/CalendarInfo.vue
index e9c0ed90..58482acd 100644
--- a/src/js/components/Calendar/CalendarInfo.vue
+++ b/src/js/components/Calendar/CalendarInfo.vue
@@ -142,7 +142,7 @@ export default {
 
 .calendar-info__time {
 	width: 65px;
-	font-size: 80%;
+	font-size: 0.8em;
 	flex: 0 auto;
 }
 
diff --git a/src/js/components/Calendar/CalendarPeek.vue b/src/js/components/Calendar/CalendarPeek.vue
index 62a24f5f..001cde50 100644
--- a/src/js/components/Calendar/CalendarPeek.vue
+++ b/src/js/components/Calendar/CalendarPeek.vue
@@ -21,22 +21,20 @@
   -->
 
 <template>
-	<div class="calendar-peek">
-		<Popover>
-			<div v-if="events.length" slot="trigger">
-				<div class="calendar-peek__conflict icon icon-calendar" />
-				<p class="calendar-peek__caption">
-					{{ t('polls', 'Conflict') }}
-				</p>
-			</div>
-			<div class="calendar-peek__grid">
-				<CalendarInfo v-for="eventItem in sortedEvents"
-					:key="eventItem.UID"
-					:event="eventItem"
-					:option="option" />
-			</div>
-		</Popover>
-	</div>
+	<Popover class="calendar-peek">
+		<div v-if="events.length" slot="trigger">
+			<div class="calendar-peek__conflict icon icon-calendar" />
+			<p class="calendar-peek__caption">
+				{{ t('polls', 'Conflict') }}
+			</p>
+		</div>
+		<div class="calendar-peek__grid">
+			<CalendarInfo v-for="eventItem in sortedEvents"
+				:key="eventItem.UID"
+				:event="eventItem"
+				:option="option" />
+		</div>
+	</Popover>
 </template>
 
 <script>
diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index f15886d3..5b56c8ea 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -101,12 +101,12 @@ export default {
 
 	.comment-item__user {
 		font-weight: 600;
-		font-size: 90%;
+		font-size: 0.9em;
 	}
 
 	.comment-item__date {
 		opacity: 0.5;
-		font-size: 80%;
+		font-size: 0.8em;
 		text-align: right;
 		&::before {
 			content: ' ~ '
diff --git a/src/js/components/Options/OptionItem.vue b/src/js/components/Options/OptionItem.vue
index 260bbda9..00446ac3 100644
--- a/src/js/components/Options/OptionItem.vue
+++ b/src/js/components/Options/OptionItem.vue
@@ -233,7 +233,7 @@ export default {
 		}
 		.event-to {
 			flex: 0;
-			font-size: 80%;
+			font-size: 0.8em;
 			justify-content: flex-end;
 			.day {
 				margin: 0;
@@ -244,7 +244,7 @@ export default {
 	.event-time {
 		margin-top: 8px;
 		.time-to {
-			font-size: 80%;
+			font-size: 0.8em;
 		}
 	}
 
diff --git a/src/js/components/Options/OptionItemOwner.vue b/src/js/components/Options/OptionItemOwner.vue
index ac0a6e62..5b8d7789 100644
--- a/src/js/components/Options/OptionItemOwner.vue
+++ b/src/js/components/Options/OptionItemOwner.vue
@@ -84,12 +84,6 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: 21px;
-	font-size: 0;
-	align-self: stretch;
-	min-width: 24px;
 }
 
 </style>
diff --git a/src/js/components/Poll/PollTitle.vue b/src/js/components/Poll/PollTitle.vue
index c548ed97..a884d5c9 100644
--- a/src/js/components/Poll/PollTitle.vue
+++ b/src/js/components/Poll/PollTitle.vue
@@ -114,8 +114,8 @@ export default {
 
 		.title__title {
 			font-weight: bold;
-			font-size: 20px;
-			line-height: 30px;
+			font-size: 1.3em;
+			line-height: 2em;
 			color: var(--color-text-light);
 		}
 	}
diff --git a/src/js/components/Shares/SharesEffective.vue b/src/js/components/Shares/SharesEffective.vue
index aafee88d..909ae36f 100644
--- a/src/js/components/Shares/SharesEffective.vue
+++ b/src/js/components/Shares/SharesEffective.vue
@@ -113,8 +113,7 @@ export default {
 <style lang="scss">
 	.shared-list {
 		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
+		flex-flow: column wrap;
 		justify-content: flex-start;
 		padding-top: 8px;
 
diff --git a/src/js/components/Shares/SharesPublic.vue b/src/js/components/Shares/SharesPublic.vue
index 184a7b95..de5451a3 100644
--- a/src/js/components/Shares/SharesPublic.vue
+++ b/src/js/components/Shares/SharesPublic.vue
@@ -110,8 +110,7 @@ export default {
 <style lang="scss">
 	.shared-list {
 		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
+		flex-flow: column wrap;
 		justify-content: flex-start;
 		padding-top: 8px;
 
diff --git a/src/js/components/Shares/SharesUnsent.vue b/src/js/components/Shares/SharesUnsent.vue
index 2a827890..bd91294c 100644
--- a/src/js/components/Shares/SharesUnsent.vue
+++ b/src/js/components/Shares/SharesUnsent.vue
@@ -112,8 +112,7 @@ export default {
 <style lang="scss">
 	.shared-list {
 		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
+		flex-flow: column wrap;
 		justify-content: flex-start;
 		padding-top: 8px;
 
diff --git a/src/js/components/SideBar/SideBarTabShare.vue b/src/js/components/SideBar/SideBarTabShare.vue
index 83ef1061..59035720 100644
--- a/src/js/components/SideBar/SideBarTabShare.vue
+++ b/src/js/components/SideBar/SideBarTabShare.vue
@@ -68,8 +68,7 @@ export default {
 <style lang="scss">
 	.shared-list {
 		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
+		flex-flow: column wrap;
 		justify-content: flex-start;
 		padding-top: 8px;
 
diff --git a/src/js/components/User/UserItem.vue b/src/js/components/User/UserItem.vue
index 6c0bc500..66ec4027 100644
--- a/src/js/components/User/UserItem.vue
+++ b/src/js/components/User/UserItem.vue
@@ -145,9 +145,7 @@ export default {
 <style lang="scss" scoped>
 .user-item {
 	display: flex;
-	// flex: 1;
 	align-items: center;
-	max-width: 100%;
 	padding: 4px;
 }
 
diff --git a/src/js/components/VoteTable/VoteItem.vue b/src/js/components/VoteTable/VoteItem.vue
index 71035cc9..e8557dc4 100644
--- a/src/js/components/VoteTable/VoteItem.vue
+++ b/src/js/components/VoteTable/VoteItem.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="vote-item" :class="[answer, {confirmed: isConfirmed }, { active: isVotable }, {currentUser: isCurrentUser}]">
+	<div class="vote-item" :class="[answer, {confirmed: isConfirmed }, { active: isVotable }, {currentuser: isCurrentUser}]">
 		<div v-if="isActive && !isVoteLimitExceded" class="icon" @click="setVote()" />
 		<div v-else class="icon" />
 		<slot name="indicator" />
@@ -128,9 +128,6 @@ export default {
 
 .vote-item {
 	display: flex;
-	flex: 1;
-	align-items: center;
-	justify-content: center;
 	background-color: var(--color-polls-background-no);
 	transition: background-color 1s ease-out;
 	> .icon {
@@ -177,12 +174,11 @@ export default {
 	}
 }
 
-.vote-item.confirmed:not(.yes):not(.maybe) .icon {
-	background-image: var(--icon-polls-no);
-}
-
 .vote-item.confirmed {
 	background-color: transparent;
+	&:not(.yes):not(.maybe) .icon {
+		background-image: var(--icon-polls-no);
+	}
 }
 
 </style>
diff --git a/src/js/components/VoteTable/VoteTable.vue b/src/js/components/VoteTable/VoteTable.vue
index 9be3827d..26bf095f 100644
--- a/src/js/components/VoteTable/VoteTable.vue
+++ b/src/js/components/VoteTable/VoteTable.vue
@@ -54,12 +54,10 @@
 					:show-no="viewMode === 'list-view'" />
 				<CalendarPeek v-if="poll.type === 'datePoll' && getCurrentUser() && settings.calendarPeek" :option="option" />
 
-				<div v-for="(participant) in participants"
+				<VoteItem v-for="(participant) in participants"
 					:key="participant.userId"
-					class="vote-item-wrapper"
-					:class="{currentuser: participant.userId === acl.userId}">
-					<VoteItem :user-id="participant.userId" :option="option" />
-				</div>
+					:user-id="participant.userId"
+					:option="option" />
 
 				<OptionItemOwner v-if="proposalsExist" :option="option" class="owner" />
 
@@ -152,23 +150,66 @@ export default {
 .vote-table {
 	display: flex;
 	flex: 1;
-	.user-item, .vote-item-wrapper {
-		flex: 0;
-		height: 53px;
-		min-height: 53px;
-		border-top: solid 1px var(--color-border-dark);
+
+	.user-item, .vote-item {
+		flex: 0 0 auto;
+		height: 3.5em;
 		order: 10;
+		line-height: 3.5em;
+		padding: 4px 1px;
+		border-top: solid 1px var(--color-border-dark);
 		&.currentuser {
 			order:5;
 		}
 	}
 
-	.vote-table-header-item {
+	.vote-table__users {
+		display: flex;
+		flex-direction: column;
+		overflow-x: scroll;
+		// max-width: 245px;
+	}
+
+	.vote-table__votes {
+		display: flex;
 		flex: 1;
+		overflow-x: scroll;
+	}
+
+	.vote-column {
+		order: 2;
+		display: flex;
+		flex: 1 0 auto;
 		flex-direction: column;
 		align-items: stretch;
+		min-width: 85px;
+		max-width: 280px;
+		&>div {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	&.closed .vote-column {
+		// padding: 8px 2px;
+		&.confirmed {
+			order: 1;
+			border-radius: 10px;
+			border: 1px solid var(--color-polls-foreground-yes);
+			background-color: var(--color-polls-background-yes);
+			margin: 0 4px;
+		}
+	}
+
+	.vote-table-header-item {
+		flex: 1;
 		padding: 0 8px;
-		order:1;
+		order: 1;
+	}
+
+	.vote-item {
+		background-clip: content-box;
 	}
 
 	.confirmation {
@@ -191,7 +232,9 @@ export default {
 
 	.owner {
 		display: flex;
-		min-height: 56px;
+		flex: 0 auto;
+		height: 3.5em;
+		line-height: 3.5em;
 		min-width: 56px;
 		order: 19;
 	}
@@ -201,149 +244,100 @@ export default {
 		order: 1;
 	}
 
-	.vote-table__users {
-		display: flex;
-		flex-direction: column;
-		overflow-x: scroll;
-		min-width: 90px;
-		.user-item__name {
-			min-width: initial;
+	&.table-view {
+		.vote-table__users::after, .vote-column::after {
+			content: '';
+			height: 8px;
+			order: 99;
 		}
-	}
 
-	.vote-table__votes {
-		display: flex;
-		flex: 1;
-		overflow-x: scroll;
-	}
-
-	.vote-column {
-		order: 2;
-		display: flex;
-		flex: 1 0 auto;
-		flex-direction: column;
-		align-items: stretch;
-		min-width: 85px;
-		max-width: 280px;
-		.vote-item {
-			flex-direction: column;
+		.user-item {
+			max-width: 245px;
 		}
-	}
 
-	&.closed .vote-table__users {
-		padding: 8px 2px;
-	}
-
-	&.closed .vote-column {
-		padding: 8px 2px;
-		&.confirmed {
-			order: 1;
-			border-radius: 10px;
-			border: 1px solid var(--color-polls-foreground-yes);
-			background-color: var(--color-polls-background-yes);
-			margin: 0 4px;
+		.option-item .option-item__option--text {
+			text-align: center;
 		}
 	}
 
-	.vote-item-wrapper {
-		display: flex;
-		padding: 4px 1px;
-	}
-
-	.vote-table__footer {
-		align-items: center;
-	}
-}
+	&.list-view {
+		flex-direction: column;
 
-.vote-table.table-view {
-	.vote-table__users::after, .vote-column::after {
-		content: '';
-		height: 8px;
-		order: 99;
-	}
-	.option-item .option-item__option--text {
-		text-align: center;
-	}
-}
+		&.closed {
+			.counter {
+				padding-left: 60px;
+			}
 
-.vote-table.list-view {
-	flex-direction: column;
+			.vote-item:not(.confirmed) {
+				background-color: var(--color-main-background);
+				&.no > .icon {
+					background-image: var(--icon-polls-no)
+				}
+			}
 
-	&.closed {
-		.counter {
-			padding-left: 60px;
-		}
-		.vote-item:not(.confirmed) {
-			background-color: var(--color-main-background);
-			&.no > .icon {
-				background-image: var(--icon-polls-no)
+			.vote-column {
+				padding: 2px 8px;
+				&.confirmed {
+					margin: 4px 0;
+				}
 			}
 		}
-	}
 
-	.vote-table__users .confirm {
-		display: none;
-	}
+		.vote-table__users .confirm {
+			display: none;
+		}
 
-	.counter {
-		position: absolute;
-		bottom: 0;
-		width: 100%;
-		padding-left: 44px;
-	}
+		.vote-column {
+			flex-direction: row-reverse;
+			align-items: center;
+			max-width: initial;
+			position: relative;
+			border-top: solid 1px var(--color-border);
+			padding: 0;
+		}
 
-	.option-item {
-		padding: 8px 4px;
-	}
+		.vote-table__users {
+			margin: 0
+		}
 
-	.vote-item-wrapper.currentuser {
-		border: none;
-	}
+		.user-item.user:not(.currentuser), .vote-item:not(.currentuser) {
+			display: none;
+		}
 
-	.vote-column {
-		flex-direction: row-reverse;
-		align-items: center;
-		max-width: initial;
-		position: relative;
-		border-top: solid 1px var(--color-border);
-		padding: 0;
-	}
-	&.closed .vote-column {
-		padding: 2px 8px;
-		&.confirmed {
-			margin: 4px 0;
+		.vote-table__votes {
+			align-items: stretch;
+			flex-direction: column;
 		}
-	}
 
-	.vote-table__votes {
-		align-items: stretch;
-		flex-direction: column;
-	}
+		.vote-table-header-item {
+			flex-direction: row;
+			.option-item {
+				padding: 8px 4px;
+			}
+		}
 
-	.vote-table__users {
-		margin: 0
-	}
-	.owner {
-		order: 0;
-	}
+		.counter {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			padding-left: 44px;
+		}
 
-	.vote-table-header-item {
-		flex-direction: row;
-	}
+		.vote-item.currentuser {
+			border: none;
+		}
 
-	.user-item.user.currentuser, .vote-item-wrapper.currentuser {
-		display: flex;
-	}
+		.owner {
+			order: 0;
+		}
 
-	.user-item.user, .vote-item-wrapper {
-		display: none;
-	}
-	.calendar-peek {
-		order: 0;
-	}
-	.calendar-peek__conflict.icon {
-		width: 24px;
-		height: 24px;
+		.calendar-peek {
+			order: 0;
+		}
+		.calendar-peek__conflict.icon {
+			width: 24px;
+			height: 24px;
+		}
 	}
 }
 
diff --git a/src/js/components/VoteTable/VoteTableHeaderItem.vue b/src/js/components/VoteTable/VoteTableHeaderItem.vue
index bb307972..c04cff15 100644
--- a/src/js/components/VoteTable/VoteTableHeaderItem.vue
+++ b/src/js/components/VoteTable/VoteTableHeaderItem.vue
@@ -90,22 +90,3 @@ export default {
 }
 
 </script>
-
-<style lang="scss" scoped>
-
-.vote-table-header-item {
-	display: flex;
-	&.winner {
-		.option-item {
-			// font-weight: bold;
-			color: var(--color-polls-foreground-yes);
-		}
-	}
-}
-
-.confirmations {
-	text-align: center;
-	height: 2em;
-}
-
-</style>
diff --git a/src/js/views/Administration.vue b/src/js/views/Administration.vue
index 46c81dbf..5dd76f35 100644
--- a/src/js/views/Administration.vue
+++ b/src/js/views/Administration.vue
@@ -256,7 +256,6 @@ export default {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		flex-wrap: nowrap;
 		overflow: scroll;
 		padding-bottom: 14px;
 	}
diff --git a/src/js/views/PollList.vue b/src/js/views/PollList.vue
index f114d3b1..26403378 100644
--- a/src/js/views/PollList.vue
+++ b/src/js/views/PollList.vue
@@ -246,7 +246,6 @@ export default {
 		width: 100%;
 		display: flex;
 		flex-direction: column;
-		flex-wrap: nowrap;
 		overflow: scroll;
 		padding-bottom: 14px;
 	}
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index 40b63e89..eb903851 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -190,10 +190,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.area__header {
-	display: flex;
-}
-
 .description {
 	display: flex;
 	flex-wrap: wrap;