From f426160d1ea860a091338567062d7e2aeb77d08c Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Thu, 20 Jul 2017 09:34:21 +1200
Subject: [PATCH] Mobile context menu bg; Dragging

---
 src/js/services/ui/middleware.js       |  2 ++
 src/js/views/Album.js                  |  9 ++-------
 src/js/views/Playlist.js               |  9 ++-------
 src/scss/components/_context-menu.scss | 10 +++++++++-
 src/scss/global/_variables.scss        |  1 +
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/js/services/ui/middleware.js b/src/js/services/ui/middleware.js
index 3e1a821c..4218771a 100755
--- a/src/js/services/ui/middleware.js
+++ b/src/js/services/ui/middleware.js
@@ -263,6 +263,8 @@ const UIMiddleware = (function(){
             case 'OPEN_MODAL':
                 ReactGA.event({ category: 'Modal', action: 'Opened', label: action.modal.name })
                 $('body').addClass('modal-open')
+                store.dispatch(uiActions.hideContextMenu())
+                store.dispatch(uiActions.hideTouchContextMenu())
                 next(action)
                 break
 
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 4cf2c46c..cf82040a 100755
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@@ -132,13 +132,8 @@ class Album extends React.Component{
 					<h1>{ this.props.album.name }</h1>
 
 					<ul className="details">
-						<li className="has-tooltip">
-							<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
-							<span className="tooltip">
-								{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}
-							</span>
-						</li>
-						{ artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
+						{ !this.props.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
 						{ this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null }
 						<li>
 							{ this.props.album.tracks_total ? this.props.album.tracks_total : '0' } tracks,&nbsp;
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index f914a2c8..55bd3b51 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -178,13 +178,8 @@ class Playlist extends React.Component{
 					{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
 
 					<ul className="details">
-						<li className="has-tooltip">
-							<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
-							<span className="tooltip">
-								{helpers.uriSource( this.props.params.uri )} playlist
-							</span>
-						</li>
-						{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} playlist</span></li> : null }
+						{ this.props.playlist.owner && !this.props.slim_mode ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
 						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
 						{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
 						<li>
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index 7c215f10..affd523e 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -1,4 +1,12 @@
 
+@include responsive( $bp_medium ){
+	body.context-menu-open {
+		.body {
+			@include blur(10px);
+		}
+	}
+}
+
 #context-menu {
 	position: fixed;
 	z-index: 99;
@@ -228,7 +236,7 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background: $overlay_dark;
+			background: $overlay_light;
 			z-index: 1;
 		}
 
diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss
index 31a17a5a..f79bbfe3 100755
--- a/src/scss/global/_variables.scss
+++ b/src/scss/global/_variables.scss
@@ -16,6 +16,7 @@ $blue: #32b5f2;
 $yellow: #FFF39C;
 $orange: #f16f19;
 $overlay_dark: rgba(0, 0, 0, 0.88);
+$overlay_light: rgba(255, 255, 255, 0.70);
 
 $bp_wide: 1000px;
 $bp_medium: 800px;