Fix narrow screen navigation pane layout on NC30

When the browser window is narrow and the navigation pane got collapsed, it was left peeking on the left border of the window on Nextcloud 30. This was related to the fact that NC30 shows the borders around the content also in the narrow screen "mobile" layout while NC25-29 removes the borders in this mode. Interestingly, NC31 removes the borders of mobile layout once again so NC30 is the only outlier. As an additional glitch, the bottom left corner of the content was shown without the normal rounding when the collapsed navigation pane was expanded. The major change made here is to use "contain: content" on the #app container. With this, we don't anymore need to manually handle the borders and rounded corners as those will be cropped automatically. This change required making changes to how the layout for navigation pane, controls pane, and the sidebar was defined. What made this somewhat difficult was that this rule cannot be used on old Nextcloud versions (14 to 24) because of how they use the window.document as the main scroll container, and we still support NC versions 20+. Hence, we needed to add some exceptios for these versions.
paulijar · Feb 8, 2025 · a132d6c · a132d6c
1 parent 59bb0f9
commit a132d6c
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,7 +17,9 @@
   * Stream playback failing when the stream URL has only the domain part without any path and no trailing '/' (like http://abc.somedomain.xyz)
   * Stream playback failing when the given URL redirects to a playlist file containing the actual audio URL
   * HTTP redirections not followed when parsing Icy-MetaData of the channel
-- Layout glitch on the navigation items "Search" and "Settings" on NC30+ with Chromium based browsers
+- Layout glitches:
+  * Navigation items "Search" and "Settings" positioned and highlighted incorrectly on NC30+ with Chromium based browsers
+  * Collapsed navigation pane and corner roundings shown wrong on narrow screens on NC30
 
 ## 2.1.1 - 2025-01-03
 

diff --git a/css/app/music-controls.css b/css/app/music-controls.css
@@ -7,32 +7,20 @@
  * @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));
 	z-index: 1;
-
-	/* For Nextcloud 25+: */
-	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,19 @@
 	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;
+	bottom: 0;
+	height: unset;
 }
 
 #app-navigation .action {

diff --git a/css/app/music-sidebar.css b/css/app/music-sidebar.css
@@ -5,17 +5,22 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
- * @copyright Pauli Järvinen 2018 - 2024
+ * @copyright Pauli Järvinen 2018 - 2025
  */
 
 #app-sidebar {
 	position: fixed;
-	height: unset;
-	right: var(--body-container-margin, 0);
-	bottom: var(--body-container-margin, 0);
-	border-top-right-radius: var(--body-container-radius);
-	border-bottom-right-radius: var(--body-container-radius);
+	height: 100%;
+	top: 0;
+	right: 0;
 	overflow-y: hidden;
+	contain: content;
+}
+
+.nc14to24 #app-sidebar {
+	top: var(--header-height, 50px);
+	bottom: 0;
+	height: unset;
 }
 
 #app-sidebar #app-sidebar-scroll-container {
@@ -41,8 +46,8 @@
 
 #app-sidebar .close {
 	position: fixed;
-	top: var(--header-height, 45px);
-	right: var(--body-container-margin, 0);
+	top: 0;
+	right: 0;
 	border-radius: 50%;
 	margin: 6px;
 	padding: 14px;

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))`);

diff --git a/js/app/controllers/sidebar/sidebarcontroller.js b/js/app/controllers/sidebar/sidebarcontroller.js
@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
- * @copyright Pauli Järvinen 2018 - 2023
+ * @copyright Pauli Järvinen 2018 - 2025
  */
 
 
@@ -26,8 +26,6 @@ angular.module('Music').controller('SidebarController', [
 				const offset = sidebarRight + sidebarWidth - contentWidth;
 				$('#app-sidebar .close').css('right', offset);
 				$('#app-sidebar #follow-playback').css('right', offset);
-
-				$('#app-sidebar .close').css('top', $('#header').outerHeight());
 			});
 		};