From 2ca872614199d1ba7dc927c3802099984aeee937 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Thu, 22 Jun 2017 08:59:40 +1200 Subject: [PATCH] Mobile playback controls --- src/js/components/PlaybackControls.js | 20 +++- src/js/components/VolumeControl.js | 20 +--- src/scss/components/_header.scss | 4 + src/scss/components/_playback-controls.scss | 115 +++++++++++++++++--- src/scss/components/_slider.scss | 3 +- src/scss/global/_core.scss | 29 ++--- 6 files changed, 144 insertions(+), 47 deletions(-) diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js index aa5d0fae..32acfd33 100755 --- a/src/js/components/PlaybackControls.js +++ b/src/js/components/PlaybackControls.js @@ -17,7 +17,11 @@ import * as mopidyActions from '../services/mopidy/actions' class PlaybackControls extends React.Component{ constructor(props) { - super(props); + super(props) + + this.state = { + expanded: false + } } renderPlayButton(){ @@ -64,7 +68,7 @@ class PlaybackControls extends React.Component{ } return ( -
+
this.handleThumbnailClick(e)}> @@ -79,14 +83,14 @@ class PlaybackControls extends React.Component{
- this.props.mopidyActions.previous()}> + this.props.mopidyActions.previous()}> { this.renderPlayButton() } - this.props.mopidyActions.stop()}> + this.props.mopidyActions.stop()}> - this.props.mopidyActions.next()}> + this.props.mopidyActions.next()}>
@@ -106,6 +110,12 @@ class PlaybackControls extends React.Component{
+ +
+ this.setState({expanded: !this.state.expanded})}> + {this.state.expanded ? : } + +
); diff --git a/src/js/components/VolumeControl.js b/src/js/components/VolumeControl.js index c1074032..09f2315f 100755 --- a/src/js/components/VolumeControl.js +++ b/src/js/components/VolumeControl.js @@ -56,22 +56,14 @@ class VolumeControl extends React.Component{ } return ( - - this.props.uiActions.openModal('volume')}> - {this.props.mute ? : } - - - - {this.renderMuteButton()} -
-
this.handleClick(e)}> -
-
-
+ {this.renderMuteButton()} +
+
this.handleClick(e)}> +
+
- - +
); } diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index ff846b6e..c7374ed6 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -68,11 +68,15 @@ main { } @include responsive( $bp_medium ){ + + padding: 10px 10px 10px 0; + .icon { visibility: hidden; } .options { + top: 10px; right: 0; .context-menu-trigger { diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index 2ae5997e..3b7acc2c 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -45,10 +45,6 @@ border-bottom: 1px dotted transparent; } } - - &:hover { - background: darken($light_grey, 5%); - } } .control { @@ -58,11 +54,11 @@ cursor: pointer; padding: 8px; display: inline-block; - vertical-align: top; + vertical-align: bottom; &.play { font-size: 24px; - margin-top: -6px; + margin-bottom: -6px; } &.active { @@ -76,7 +72,7 @@ section { position: absolute; - top: 11px; + bottom: 11px; &.playback { left: 20px; @@ -85,7 +81,7 @@ } &.progress { - top: 12px; + bottom: 12px; left: 140px; right: 280px; padding-left: 20px; @@ -94,7 +90,7 @@ .slider { position: absolute; - top: 0; + bottom: 0; left: 50px; right: 50px; } @@ -102,7 +98,7 @@ .current { font-size: 11px; position: absolute; - top: 6px; + bottom: 6px; left: 0; width: 45px; text-align: right; @@ -111,7 +107,7 @@ .total { font-size: 11px; position: absolute; - top: 6px; + bottom: 6px; right: 0; width: 45px; } @@ -124,7 +120,7 @@ } &.volume { - top: 12px; + bottom: 10px; right: 20px; width: 150px; @@ -134,13 +130,13 @@ .control { position: absolute; - top: 0; + bottom: 0; left: 0; } .slider-wrapper { position: absolute; - top: 0; + bottom: 2px; right: 0; left: 30px; } @@ -151,6 +147,97 @@ } } } + + &.triggers { + display: none; + } + } + + @include responsive($bp_medium){ + + .current-track { + width: auto; + bottom: auto; + bottom: 8px; + left: 60px; + right: 60px; + text-align: center; + + .title { + padding-top: 0; + } + + .thumbnail { + display: none; + } + } + + section { + + &.playback { + left: 0; + width: 60px; + + .control { + &.play { + font-size: 12px; + margin-bottom: 0; + } + &.previous { + display: none; + } + &.stop { + display: none; + } + } + } + + &.settings { + display: none; + } + + &.volume { + display: none; + } + + &.progress { + display: none; + } + + &.triggers { + display: block; + right: 10px; + } + } + + &.expanded { + height: 150px; + + section { + + &.settings { + display: block; + right: 20px; + bottom: 60px; + text-align: right; + } + + &.volume { + width: auto; + display: block; + right: 130px; + left: 22px; + bottom: 60px; + } + + &.progress { + display: block; + bottom: 110px; + left: 0; + right: 0; + } + } + } } } diff --git a/src/scss/components/_slider.scss b/src/scss/components/_slider.scss index e0ba151e..2a1843c3 100755 --- a/src/scss/components/_slider.scss +++ b/src/scss/components/_slider.scss @@ -28,9 +28,10 @@ .track { height: 5px; - top: 12px; + top: 50%; right: 0; left: 0; + margin-top: -3px; .progress { top: 0; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 7c905a50..086b95ec 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -65,6 +65,10 @@ main { @include responsive( $bp_medium ){ + .content-wrapper { + padding: 40px 10px 40px; + } + section.list-wrapper { padding: 10px 0; } @@ -329,6 +333,18 @@ footer { @include responsive( $bp_medium ){ + h1 { + font-size: 1.8rem; + } + + h2 { + font-size: 1.2rem; + } + + h3 { + font-size: 1rem; + } + .right-padding { padding-right: 20px; } @@ -336,17 +352,4 @@ footer { .left-padding { padding-left: 20px; } - - h1 { - font-size: 30px; - } - - h2 { - font-size: 24px; - } - - h3 { - font-size: 18px; - } - } \ No newline at end of file