Mobile context menu bg; Dragging

This commit is contained in:
James Barnsley
2017-07-20 09:34:21 +12:00
parent 3fdb36ea22
commit f426160d1e
5 changed files with 16 additions and 15 deletions

View File

@ -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

View File

@ -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;

View File

@ -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>

View File

@ -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;
}

View File

@ -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;