Merge pull request #2290 from nextcloud/fix/header-navigation-styling

Do not mess with `@nextcloud/vue` styles and fix navigation header a11y
nextcloud · Jan 29, 2024 · 0e8a81f · 0e8a81f
2 parents eb162b4 + a4461e2
commit 0e8a81f
Show file tree

Hide file tree

Showing 30 changed files with 71 additions and 78 deletions.
diff --git a/js/photos-main.js b/js/photos-main.js
diff --git a/js/photos-main.js.map b/js/photos-main.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-3c3243.js.map
diff --git a/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js b/...ue-material-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js
diff --git a/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map b/...aterial-design-icons_ArrowLeft_vue-node_modules_vue-material-design-icons_P-e1736f.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Places_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Places_vue.js
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Places_vue.js.map b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Places_vue.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_SharedAlbums_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_SharedAlbums_vue.js
diff --git a/...os-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_SharedAlbums_vue.js.map b/...os-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_SharedAlbums_vue.js.map
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js
diff --git a/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map b/js/photos-node_modules_vue-material-design-icons_ArrowLeft_vue-src_views_Timeline_vue.js.map
diff --git a/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-7ffa74.js b/...ue-material-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-7ffa74.js
diff --git a/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-7ffa74.js.map b/...aterial-design-icons_PackageVariant_vue-node_modules_vue-material-design-ic-7ffa74.js.map
diff --git a/js/photos-public.js b/js/photos-public.js
diff --git a/js/photos-public.js.map b/js/photos-public.js.map
diff --git a/js/photos-sidebar.js b/js/photos-sidebar.js
diff --git a/js/photos-sidebar.js.map b/js/photos-sidebar.js.map
diff --git a/js/photos-src_services_collectionFetcher_js-src_components_HeaderNavigation_vue.js b/js/photos-src_services_collectionFetcher_js-src_components_HeaderNavigation_vue.js
diff --git a/js/photos-src_services_collectionFetcher_js-src_components_HeaderNavigation_vue.js.map b/js/photos-src_services_collectionFetcher_js-src_components_HeaderNavigation_vue.js.map
diff --git a/js/photos-src_views_AlbumContent_vue.js b/js/photos-src_views_AlbumContent_vue.js
diff --git a/js/photos-src_views_AlbumContent_vue.js.map b/js/photos-src_views_AlbumContent_vue.js.map
diff --git a/js/photos-src_views_Albums_vue.js b/js/photos-src_views_Albums_vue.js
diff --git a/js/photos-src_views_Albums_vue.js.map b/js/photos-src_views_Albums_vue.js.map
diff --git a/js/photos-src_views_Folders_vue.js b/js/photos-src_views_Folders_vue.js
diff --git a/js/photos-src_views_Folders_vue.js.map b/js/photos-src_views_Folders_vue.js.map
diff --git a/...odules_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js b/...odules_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js
diff --git a/...es_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js.map b/...es_nextcloud_upload_dist_index_esm_js-node_modules_vue-material-design-icon-8cf260.js.map
diff --git a/src/components/HeaderNavigation.vue b/src/components/HeaderNavigation.vue
@@ -179,45 +179,32 @@ export default {
 }
 </script>
 
-<style lang="scss">
-:root {
-	--photos-navigation-height: 64px;
-	// header height - button size
-	--photos-navigation-spacing: calc((var(--photos-navigation-height) - 44px) / 2);
-}
-
-// Properly position the navigation toggle button
-button.app-navigation-toggle {
-	// App-navigation have a 4px margin top
-	top: 0 !important;
-	right: calc(var(--photos-navigation-height) * -1) !important;
-	margin: var(--photos-navigation-spacing) !important;
-}
-
-</style>
-
 <style lang="scss" scoped>
 .photos-navigation {
 	position: sticky;
 	z-index: 20;
 	top: 0;
 	display: flex;
+	// We need to wrap on small devices for accessibility
+	flex-wrap: wrap;
+	gap: calc(2 * var(--app-navigation-padding));
 	align-items: center;
+	justify-content: start;
 	width: 100%;
-	min-height: var(--photos-navigation-height);
-	padding: 15px var(--photos-navigation-height) 0 var(--photos-navigation-height);
+	// Ensure to not overlap with app navigation toggle
+	padding-inline: calc(var(--default-clickable-area) + 2 * var(--app-navigation-padding)) var(--app-navigation-padding);
+	// Align with app navigation toggle
+	padding-block: var(--app-navigation-padding);
 	background: var(--color-main-background);
 
 	&__back {
-		// Above the navigation menu
-		position: absolute !important;
-		left: 0;
-		margin: var(--photos-navigation-spacing) !important;
+		// Replaces the app navigation button
+		position: fixed !important;
+		left: var(--app-navigation-padding);
 	}
 
 	&__title {
 		max-width: 45%;
-		margin-right: calc(2 * var(--photos-navigation-spacing));
 		display: flex;
 		flex-direction: column;
 
@@ -226,7 +213,6 @@ button.app-navigation-toggle {
 			font-weight: 700;
 			font-size: 20px;
 			line-height: 44px;
-			margin: 0 0 0 calc(2 * var(--app-navigation-padding, 8px) + 44px);
 		}
 
 		&__main, &__sub {
@@ -236,19 +222,15 @@ button.app-navigation-toggle {
 		}
 	}
 
-	&__content {
-		max-width: 50%;
-	}
-
 	&__loader {
-		margin-left: 32px;
+		margin-inline-start: 32px;
 	}
 
 	&__content-right {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		margin-left: auto;
+		margin-inline-start: auto;
 	}
 }
 

diff --git a/src/views/Albums.vue b/src/views/Albums.vue
@@ -31,12 +31,14 @@
 				:title="t('photos', 'Albums')"
 				:root-title="t('photos', 'Albums')"
 				@refresh="fetchAlbums">
-				<NcButton :aria-label="t('photos', 'Create a new album.')"
+				<NcButton :aria-label="isMobile ? t('photos', 'New album') : undefined"
 					@click="showAlbumCreationForm = true">
 					<template #icon>
-						<Plus />
+						<Plus :size="20" />
+					</template>
+					<template v-if="!isMobile" #default>
+						{{ t('photos', 'New album') }}
 					</template>
-					{{ t('photos', 'New album') }}
 				</NcButton>
 			</HeaderNavigation>
 
@@ -61,7 +63,9 @@
 
 		<NcModal v-if="showAlbumCreationForm"
 			@close="showAlbumCreationForm = false">
-			<h2 class="album-creation__heading">{{ t('photos', 'New album') }}</h2>
+			<h2 class="album-creation__heading">
+				{{ t('photos', 'New album') }}
+			</h2>
 			<AlbumForm @done="handleAlbumCreated" />
 		</NcModal>
 	</div>
@@ -72,7 +76,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
 
 import { generateUrl } from '@nextcloud/router'
-import { NcModal, NcButton, NcEmptyContent } from '@nextcloud/vue'
+import { NcModal, NcButton, NcEmptyContent, useIsSmallMobile } from '@nextcloud/vue'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { getCurrentUser } from '@nextcloud/auth'
 
@@ -113,6 +117,13 @@ export default {
 		FetchCollectionsMixin,
 	],
 
+	setup() {
+		const isMobile = useIsSmallMobile()
+		return {
+			isMobile,
+		}
+	},
+
 	data() {
 		return {
 			showAlbumCreationForm: false,