Mobile context menu bg; Dragging
This commit is contained in:
@ -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
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user