From d03fe03d7fd6da15fca5d0c8d2c453d1dd222ebe Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 25 Jul 2017 16:33:31 +1200 Subject: [PATCH] Iconography for player --- src/assets/icons/back.svg | 11 ++++++++++ src/assets/icons/pause.svg | 11 ++++++++++ src/assets/icons/skip.svg | 12 +++++++++++ src/assets/icons/stop.svg | 8 +++++++ src/js/components/PlaybackControls.js | 11 +++++----- src/js/views/Artist.js | 6 +++--- src/scss/components/_lists.scss | 4 ++-- src/scss/components/_playback-controls.scss | 14 +++++++++++-- src/scss/views/_artist.scss | 23 +++++++++++++++++---- 9 files changed, 84 insertions(+), 16 deletions(-) create mode 100755 src/assets/icons/back.svg create mode 100755 src/assets/icons/pause.svg create mode 100755 src/assets/icons/skip.svg create mode 100755 src/assets/icons/stop.svg diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg new file mode 100755 index 00000000..34b202b7 --- /dev/null +++ b/src/assets/icons/back.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg new file mode 100755 index 00000000..9bbd906f --- /dev/null +++ b/src/assets/icons/pause.svg @@ -0,0 +1,11 @@ + + + + + + + + + + diff --git a/src/assets/icons/skip.svg b/src/assets/icons/skip.svg new file mode 100755 index 00000000..e21ea848 --- /dev/null +++ b/src/assets/icons/skip.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg new file mode 100755 index 00000000..1fb882ac --- /dev/null +++ b/src/assets/icons/stop.svg @@ -0,0 +1,8 @@ + + + + + + + diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js index 44f04690..f262340d 100755 --- a/src/js/components/PlaybackControls.js +++ b/src/js/components/PlaybackControls.js @@ -10,6 +10,7 @@ import VolumeControl from './VolumeControl' import Dater from './Dater' import ArtistSentence from './ArtistSentence' import Thumbnail from './Thumbnail' +import Icon from './Icon' import * as uiActions from '../services/ui/actions' import * as mopidyActions from '../services/mopidy/actions' @@ -25,9 +26,9 @@ class PlaybackControls extends React.Component{ } renderPlayButton(){ - var button = this.props.mopidyActions.play()}> + var button = this.props.mopidyActions.play()}> if( this.props.play_state == 'playing' ){ - button = this.props.mopidyActions.pause()}> + button = this.props.mopidyActions.pause()}> } return button; } @@ -84,14 +85,14 @@ class PlaybackControls extends React.Component{
this.props.mopidyActions.previous()}> - + { this.renderPlayButton() } this.props.mopidyActions.stop()}> - + this.props.mopidyActions.next()}> - +
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 387ec6f0..3756cadd 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -88,9 +88,9 @@ class Artist extends React.Component{ renderSubViewMenu(){ return (
- Overview - Related artists - About +

Overview

+

Related artists

+

About

) } diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index bde3534f..98e3e61d 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -31,7 +31,7 @@ } &.playing { - font-weight: bold; + color: $turquoise; } .select-zone, @@ -183,7 +183,7 @@ .artist { display: block; border: 0; - margin-bottom: 5px; + margin: 10px 0; @include clearfix; .thumbnail { diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index d1850f17..d1967a9d 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -87,14 +87,24 @@ font-size: 12px; color: $white; cursor: pointer; - padding: 8px; + padding: 8px 6px; display: inline-block; vertical-align: bottom; opacity: 0.8; + .icon { + width: 12px; + height: 12px; + @include invert(); + } + &.play { - font-size: 24px; margin-bottom: -6px; + + .icon { + width: 24px; + height: 24px; + } } &.active { diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index 1fc4a05b..005bc8ef 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -26,11 +26,12 @@ h1 { padding-bottom: 25px; - font-size: 4rem; + font-size: 5rem; + line-height: 5rem; } .actions { - padding-bottom: 20px; + padding-bottom: 25px; .context-menu-trigger { color: $white; @@ -42,13 +43,16 @@ @include feature_font(); color: $white; display: inline-block; - padding: 8px 0; margin-right: 25px; font-size: 15px; font-weight: 500; - border-bottom: 2px solid transparent; + border-bottom: 3px solid transparent; cursor: pointer; + h4 { + margin: 8px 0 4px; + } + &.active { border-color: $white; } @@ -75,6 +79,17 @@ } } + @include responsive( $bp_wide ){ + .intro { + .liner { + h1 { + font-size: 4rem; + line-height: 4rem; + } + } + } + } + @include responsive( $bp_medium ){ .intro { margin-bottom: 0;