diff --git a/CHANGELOG.md b/CHANGELOG.md index f8f36ad4b..357dd4b6b 100644 --- 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 index 5e552fa5d..ada0279a1 100644 --- a/css/app/music-controls.css +++ b/css/app/music-controls.css @@ -7,32 +7,20 @@ * @author Morris Jobke * @author Pauli Järvinen * @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 index 04c94d49a..03a66c4c8 100644 --- 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 index 0969139ec..6a5f005cd 100644 --- 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 - * @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 index 017ccab16..80b649cd6 100644 --- a/css/app/music.css +++ b/css/app/music.css @@ -7,7 +7,7 @@ * @author Morris Jobke * @author Pauli Järvinen * @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 index e724d4ba5..b65577f6a 100644 --- 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 index c483dc1af..a1b892b9e 100644 --- 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 - * @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()); }); };