diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js index 134a1dda..3bccc138 100755 --- a/src/js/components/PlaybackControls.js +++ b/src/js/components/PlaybackControls.js @@ -59,15 +59,15 @@ class PlaybackControls extends React.Component{ return (
-
+
{ this.props.current_track ? this.props.current_track.name : - }
- { this.props.current_track ? : } + { this.props.current_track ? : }
-
+
this.props.mopidyActions.previous()}> diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss index ceadff8e..6f706b06 100755 --- a/src/scss/components/_playback-controls.scss +++ b/src/scss/components/_playback-controls.scss @@ -11,12 +11,40 @@ border-top: 1px solid $light_grey; .current-track { + @include animate(); + cursor: pointer; position: absolute; bottom: 51px; background: $white; - height: 100px; width: 220px; border-top: 1px solid $light_grey; + font-size: 16px; + + .thumbnail { + float: left; + margin: 12px; + } + + .title { + padding-top: 18px; + @include one_line_text; + } + + .artist-sentence { + opacity: 0.5; + display: block; + @include one_line_text; + + .artist { + color: inherit; + text-decoration: none; + border-bottom: 1px dotted transparent; + } + } + + &:hover { + background: $faint_grey; + } } .control {