!!! wip Fix narrow screen nav layout on nc30+,

more testing needed on various cloud versions
paulijar · Feb 6, 2025 · e835fe6 · e835fe6
1 parent 59bb0f9
commit e835fe6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 21 deletions.
diff --git a/css/app/music-controls.css b/css/app/music-controls.css
@@ -7,13 +7,13 @@
  * @author Morris Jobke <hey@morrisjobke.de>
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
  * @copyright Morris Jobke 2013, 2014
- * @copyright Pauli Järvinen 2017 - 2024
+ * @copyright Pauli Järvinen 2017 - 2025
  */
 
 #controls {
 	height: 66px;
 	padding: 0 20px 0 20px;
-	top: 45px;
+	top: 0;
 	position: fixed;
 	overflow: visible;
 	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
@@ -23,16 +23,7 @@
 	border-top-right-radius: var(--body-container-radius);
 }
 
-/* Rule used when collapsible navigation pane is open. In that case, #app-content is transformed
- * to right and this has the side-effect of making the "fixed" position to be eveluated in the
- * context of the transformed element instead of the entire window.
- */
-.snapjs-left #controls {
-	top: 0;
-}
-
-/* Adjustment to taller header pane used on NC14+ */
-body:not(.snapjs-left) #controls.taller-header {
+body:not(.snapjs-left) .app-music.nc14to24 #controls {
 	top: 50px;
 }
 

diff --git a/css/app/music-navigation.css b/css/app/music-navigation.css
@@ -17,6 +17,8 @@
 	z-index: 999;
 	overflow: unset;
 	contain: content;
+	height: 100%;
+	top: 0;
 }
 
 #app-navigation > ul {
@@ -109,8 +111,17 @@
 	left: 40px;
 }
 
-#app-navigation-toggle {
+.app-music #app-navigation-toggle {
 	height: 66px;
+	top: 0;
+}
+
+body:not(.snapjs-left) .app-music.nc14to24 #app-navigation-toggle {
+	top: 50px;
+}
+
+.app-music.nc14to24 #app-navigation {
+	top: 50px;
 }
 
 #app-navigation .action {

diff --git a/css/app/music.css b/css/app/music.css
@@ -7,7 +7,7 @@
  * @author Morris Jobke <hey@morrisjobke.de>
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
  * @copyright Morris Jobke 2013, 2014
- * @copyright Pauli Järvinen 2016 - 2024
+ * @copyright Pauli Järvinen 2016 - 2025
  */
 
 /**
@@ -35,6 +35,10 @@ body#body-user.dark {
 	margin-left: 0;
 }
 
+.app-music:not(.nc14to24) #app {
+	contain: content;
+}
+
 #app-content.with-app-sidebar {
 	margin-right: 27%;
 }

diff --git a/js/app/controllers/maincontroller.js b/js/app/controllers/maincontroller.js
@@ -553,18 +553,15 @@ function ($rootScope, $scope, $timeout, $window, ArtistFactory,
 		}
 	});
 
-	// Nextcloud 14+ uses taller header than ownCloud
-	const headerHeight = $('#header').outerHeight();
-	if (headerHeight > 45) {
-		$('#controls').addClass('taller-header');
-	}
-
 	if (OCA.Music.Utils.isLegacyLayout()) {
 		$('.app-music').addClass('legacy-layout');
-	} else {
+	} else if (OCA.Music.Utils.getScrollContainer()[0] instanceof HTMLDocument) {
+		// Nextcloud versions 14..24 need some special handling because of different container
+		$('.app-music').addClass('nc14to24');
 		// To be compatible with NC25, we have set the #app-content position as absolute. To fix problems
 		// this causes on older platforms, we need to set the #content to use top-margin instead of top-padding,
 		// just as it has been declared by the core on NC25.
+		const headerHeight = $('#header').outerHeight();
 		$('#content').css('padding-top', 0);
 		$('#content').css('margin-top', headerHeight);
 		$('#content').css('min-height', `var(--body-height, calc(100% - ${headerHeight}px))`);