Apps toolbar height and alignment fix

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

apps/settings/css/settings.scss

@@ -1021,6 +1021,9 @@ span.version {
 }
 
 .apps-list {
+	$toolbar-padding: 8px;
+	$toolbar-height: 44px + $toolbar-padding * 2;
+
 	.section {
 		cursor: pointer;
 	}
@@ -1033,14 +1036,17 @@ span.version {
 		margin-left: 10px;
 	}
 
-	.counter {
-		padding-left: $header-height;
-		padding-top: 10px;
+	.toolbar {
+		height: $toolbar-height;
+		padding: $toolbar-padding;
+		// Leave room for app-navigation-toggle
+		padding-left: $toolbar-height;
 		width: 100%;
 		background-color: var(--color-main-background);
 		position: fixed;
 		z-index: 1;
-		height: $header-height + 10px;
+		display: flex;
+		align-items: center;
 	}
 
 	&.installed {
@@ -1048,7 +1054,7 @@ span.version {
 			display: table;
 			width: 100%;
 			height: auto;
-			margin-top: $header-height + 10px;
+			margin-top: $toolbar-height;
 		}
 
 		margin-bottom: 100px;

apps/settings/src/components/AppList.vue

@@ -24,7 +24,7 @@
 	<div id="app-content-inner">
 		<div id="apps-list" class="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
-				<div v-if="showUpdateAll" class="counter">
+				<div v-if="showUpdateAll" class="toolbar">
 					{{ n('settings', '%n app has an update available', '%n apps have an update available', counter) }}
 					<Button v-if="showUpdateAll"
 						id="app-list-update-all"
@@ -33,9 +33,11 @@
 						{{ t('settings', 'Update all') }}
 					</Button>
 				</div>
-				<div v-if="!showUpdateAll" class="counter">
+
+				<div v-if="!showUpdateAll" class="toolbar">
 					{{ t('settings', 'All apps are up-to-date.') }}
 				</div>
+
 				<transition-group name="app-list" tag="div" class="apps-list-container">
 					<AppItem v-for="app in apps"
 						:key="app.id"
@@ -43,6 +45,7 @@
 						:category="category" />
 				</transition-group>
 			</template>
+
 			<transition-group v-if="useBundleView"
 				name="app-list"
 				tag="div"

apps/settings/src/views/Apps.vue

@@ -361,19 +361,25 @@ export default {
 	}
 }
 
-	.app-sidebar-tabs__release {
-		h2 {
-			border-bottom: 1px solid var(--color-border);
-		}
+// Align the appNavigation toggle with the apps header toolbar
+.app-navigation::v-deep button.app-navigation-toggle {
+	top: 8px;
+	right: -8px;
+}
 
-		// Overwrite changelog heading styles
-		::v-deep {
-			h3 {
-				font-size: 20px;
-			}
-			h4 {
-				font-size: 17px;
-			}
+.app-sidebar-tabs__release {
+	h2 {
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	// Overwrite changelog heading styles
+	::v-deep {
+		h3 {
+			font-size: 20px;
+		}
+		h4 {
+			font-size: 17px;
 		}
 	}
+}
 </style>