Two-line layout for the controls pane on narrow windows

Wrap the controls pane to two lines once the window is narrow enough. This allows us to keep the progress bar and volume control visible on all but the narrowest possible windows, including e.g. practically all mobile devices also on portrait mode. This also fixes the age-old problem of song title overlapping the shuffle and repeat buttons on mobile portrait screens. Even the skip previous button can now be kept on some portrait mobile screens. refs #1004 refs #204
owncloud · Sep 29, 2022 · 50d47f0 · 50d47f0
1 parent f4b308f
commit 50d47f0
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 75 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [Unreleased]
 ### Added
+- Two-line layout for the controls pane on narrow windows
+  [#1004](https://github.com/owncloud/music/issues/1004) [#204](https://github.com/owncloud/music/issues/204)
 - Muting/unmuting by clicking the speaker icon
   [#1013](https://github.com/owncloud/music/pull/1013) @Root-Core
 - Many new keyboard shortcuts

diff --git a/css/music-controls.css b/css/music-controls.css
@@ -22,7 +22,7 @@
 
 /* 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 entrie window.
+ * context of the transformed element instead of the entire window.
  */
 .snapjs-left #controls {
 	top: 0;
@@ -108,14 +108,11 @@ body:not(.snapjs-left) #controls.taller-header {
 	vertical-align: top;
 }
 
-.icon-radio {
-	background-image: url(../img/radio.svg);
-}
-
 #controls .song-info {
-	position: relative;
+	position: absolute;
 	height: 58px;
-	max-width: 400px;
+	left: 320px;
+	width: 380px;
 	margin: 0 4px 4px 4px;
 	padding: 8px;
 	vertical-align: top;
@@ -139,8 +136,8 @@ body:not(.snapjs-left) #controls.taller-header {
 	position: absolute;
 	top: 0px;
 	left: 710px;
-	right: 170px;
-	max-width: 350px;
+	right: 165px;
+	max-width: 450px;
 	text-align: center;
 	margin: 7px auto 14px auto;
 }
@@ -190,7 +187,7 @@ body:not(.snapjs-left) #controls.taller-header {
 
 #controls .volume-control {
 	position: absolute;
-	right: 172px;
+	right: 167px;
 }
 
 .ie.lte9 #controls .volume-control {
@@ -247,6 +244,10 @@ body:not(.snapjs-left) #controls.taller-header {
 	cursor: pointer;
 }
 
+.icon-radio {
+	background-image: url(../img/radio.svg);
+}
+
 .icon-play-big {
 	background-image: url(../img/play-big.svg);
 }
@@ -262,3 +263,62 @@ body:not(.snapjs-left) #controls.taller-header {
 .icon-time {
 	background-image: url(../img/access-time.svg)
 }
+
+
+/******************************************/
+/* Two-line layout used on narrow windows */
+/******************************************/
+
+#controls.two-line ~ #app-view.started {
+	padding-top: 90px;
+}
+
+#app-navigation + #app-content #controls.two-line {
+	height: 90px;
+}
+
+#controls.two-line #shuffle {
+	right: unset;
+	left: 65px;
+	top: 38px;
+}
+
+#controls.two-line #repeat {
+	right: unset;
+	left: 130px;
+	top: 38px;
+}
+
+#controls.two-line .volume-control {
+	right: 75px;
+}
+
+#controls.two-line .song-info {
+	width: auto;
+	right: 80px;
+}
+
+#controls.two-line .progress-info {
+	left: 270px;
+	right: 20px;
+	top: 60px;
+	max-width: unset;
+}
+
+#controls.two-line .progress-info .progress-text {
+	position: absolute;
+	right: 0px;
+	top: -8px;
+	width: 90px;
+}
+
+#controls.two-line .progress-info .progress {
+	position: absolute;
+	width: auto;
+	left: 0;
+	right: 90px;
+}
+
+#controls.two-line .progress-info {
+	left: 212px;
+}
diff --git a/css/music-mobile.css b/css/music-mobile.css
@@ -77,76 +77,84 @@
 }
 
 /* layout the play bar elements for less space */
-.mobile #play-controls {
-	margin-left: 0;
+#app-navigation + #app-content.mobile #controls {
+	padding-left: 20px;
 }
-.mobile #play-controls img:first-child {
-	display: none;
+.mobile #play-controls {
+	margin-left: 20px;
 }
+.mobile #controls.two-line .control,
+.mobile #controls.two-line .song-info,
 .mobile #controls .albumart {
 	margin-left: 0;
 	margin-right: 0;
 }
-.mobile #controls .song-info {
-	max-width: 45%;
+.mobile #controls.two-line .song-info {
+	left: 220px;
 }
-.mobile #controls .title {
+.mobile #controls.two-line .title {
 	font-size: 14px;
 }
-.mobile #controls.started .progress {
-	display: none;
+.mobile #controls.two-line #shuffle {
+	left: 55px;
 }
-.mobile #controls #repeat {
-	right: 0;
-}
-.mobile #controls #shuffle {
-	right: 40px;
+.mobile #controls.two-line #repeat {
+	left: 108px;
 }
-.mobile #controls .volume-control {
-	display: none;
-}
-.mobile #controls .progress-info {
-	right: 115px;
-	left: auto;
-	padding-top: 12px;
-	text-align: right;
+.mobile #controls.two-line .progress-info {
+	left: 172px;
 }
 .mobile #controls #play-pause-menu {
 	right: 0;
 }
 
 /* in portrait, there's even less space */
-.mobile.portrait #controls .progress-info {
+.mobile.portrait #play-controls img:first-child {
 	display: none;
 }
-.mobile.portrait #controls .control,
-.mobile.portrait #controls .song-info {
-	margin-left: 0;
-	margin-right: 0;
+.mobile.portrait #controls.two-line #shuffle {
+	left: 35px;
+}
+.mobile.portrait #controls.two-line #repeat {
+	left: 77px;
 }
-.mobile.portrait #controls .control.small {
-	margin-left: -4px;
+.mobile.portrait #controls.two-line .song-info {
+	left: 172px;
+}
+.mobile.portrait #controls.two-line .progress-info {
+	left: 124px;
 }
 .mobile.portrait #controls #play-pause-menu {
 	right: -20px;
 }
 
 /* extra narrow screen matches small smart phones; drop non-essential elements and margins */
-.extra-narrow #controls .albumart {
+.mobile.portrait.extra-narrow #controls .albumart,
+.mobile.portrait.extra-narrow #controls #volume-icon {
 	display: none;
 }
-.extra-narrow .view-container.compact .album-area .track-list {
+.mobile.portrait.extra-narrow #controls.two-line .song-info {
+	left: 120px;
+	right: 25px;
+}
+.mobile.portrait.extra-narrow .view-container.compact .album-area .track-list {
 	margin-left: 0;
 }
-.extra-narrow .view-container:not(.compact) .album-area .track-list > li:not(.more-less) {
+.mobile.portrait.extra-narrow .view-container:not(.compact) .album-area .track-list > li:not(.more-less) {
 	padding-left: 0;
 }
-.extra-narrow .view-container:not(.compact) .album-area .track-list > li.more-less {
+.mobile.portrait.extra-narrow .view-container:not(.compact) .album-area .track-list > li.more-less {
 	padding-left: 18px;
 }
 
 /* min-width screen may result on desktop browser when manually resizing the window; here we need to drop also essential elements */
-.min-width #controls .song-info,
-.min-width #controls .toggle {
+.mobile.portrait.min-width #controls .progress,
+.mobile.portrait.min-width #controls .volume-control {
 	display: none;
 }
+.mobile.portrait.min-width #controls.two-line .song-info {
+	right: 10px;
+}
+.mobile.portrait.min-width #controls .progress-text {
+	text-align: right;
+}
diff --git a/css/music-tablet.css b/css/music-tablet.css
@@ -16,18 +16,17 @@
    The rule has to match the one used by the core to make the pane collpsible.
  */
 @media only screen and (max-width: 1024px) {
-
-	#controls {
-		padding-left: 44px;
-	}
-
 	#app-view {
 		padding-top: 66px;
 	}
 }
 
+#app-navigation + #app-content.tablet #controls {
+	padding-left: 20px;
+}
+
 .tablet #play-controls {
-	margin-left: 0;
+	margin-left: 20px;
 }
 
 .tablet #controls .albumart {
@@ -36,23 +35,18 @@
 }
 
 .tablet #controls .song-info {
-	max-width: 240px;
+	left: 260px;
 }
 
-.tablet #controls .title {
-	font-size: 14px;
-}
-
-.tablet #controls #volume-icon {
-	display: none;
+.tablet #controls:not(.two-line) .song-info {
+	width: 200px;
 }
 
-.tablet #controls .progress-info {
-	left: 480px;
-	right: 140px;
-	max-width: 250px;
+.tablet #controls:not(.two-line) .progress-info {
+	left: 460px;
+	max-width: 350px;
 }
 
-.tablet.portrait #controls .progress-info {
-	display: none;
+.tablet #controls .title {
+	font-size: 14px;
 }
diff --git a/js/app/controllers/maincontroller.js b/js/app/controllers/maincontroller.js
@@ -493,27 +493,30 @@ function ($rootScope, $scope, $timeout, $window, $document, ArtistFactory,
 
 		// Set the app-content class according to window and view width. This has
 		// impact on the overall layout of the app. See mobile.css and tablet.css.
-		if ($window.innerWidth <= 220) {
+		if (appViewWidth <= 280) {
 			setMasterLayout(['mobile', 'portrait', 'extra-narrow', 'min-width']);
 		}
-		else if ($window.innerWidth <= 360) {
+		else if (appViewWidth <= 360) {
 			setMasterLayout(['mobile', 'portrait', 'extra-narrow']);
 		}
-		else if ($window.innerWidth <= 570 || appViewWidth <= 500) {
+		else if (appViewWidth <= 400) {
 			setMasterLayout(['mobile', 'portrait']);
 		}
-		else if ($window.innerWidth <= 768) {
+		else if (appViewWidth <= 500 && $window.innerWidth < 1024) {
 			setMasterLayout(['mobile']);
 		}
-		else if (appViewWidth <= 690) {
-			setMasterLayout(['tablet', 'portrait']);
-		}
-		else if (appViewWidth <= 1024) {
+		else if (appViewWidth < 1025) {
 			setMasterLayout(['tablet']);
 		}
 		else {
 			setMasterLayout([]);
 		}
+
+		if (appViewWidth <= 715) {
+			$('#controls').addClass('two-line');
+		} else {
+			$('#controls').removeClass('two-line');
+		}
 	});
 
 	if (OCA.Music.Utils.newLayoutStructure()) {

diff --git a/templates/partials/controls.php b/templates/partials/controls.php
@@ -56,9 +56,11 @@
 		<span class="artist" title="{{ secondaryTitle() }}">{{ secondaryTitle() }}</span>
 	</div>
 	<div ng-show="currentTrack" class="progress-info">
-		<span ng-show="!loading" class="muted">{{ position.current | playTime }}</span><span
-			ng-show="!loading && durationKnown()" class="muted">/{{ position.total | playTime }}</span>
-		<span ng-show="loading" class="muted">Loading...</span>
+		<div class="progress-text">
+			<span ng-show="!loading" class="muted">{{ position.current | playTime }}</span><span
+				ng-show="!loading && durationKnown()" class="muted">/{{ position.total | playTime }}</span>
+			<span ng-show="loading" class="muted">Loading...</span>
+		</div>
 		<div class="progress">
 			<div class="seek-bar" ng-click="seek($event)" ng-style="{'cursor': seekCursorType}">
 				<div class="buffer-bar" ng-style="{'width': position.bufferPercent, 'cursor': seekCursorType}"></div>