From 56782931bc22665b2937162a755bd6470d2c7d87 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 28 Feb 2017 16:13:27 +1300 Subject: [PATCH] Context menu trigger; Unified context menu --- src/js/components/AlbumGrid.js | 2 +- src/js/components/ArtistGrid.js | 2 +- src/js/components/ContextMenu.js | 137 +++++++++++++------- src/js/components/ContextMenuTrigger.js | 24 ++++ src/js/components/Modal/Modal.js | 8 ++ src/js/components/PlaylistGrid.js | 2 +- src/js/components/SearchForm.js | 25 +++- src/js/components/TouchContextMenu.js | 164 ------------------------ src/js/components/Track.js | 3 +- src/js/views/Album.js | 6 +- src/js/views/App.js | 2 - src/js/views/Artist.js | 5 +- src/js/views/Playlist.js | 11 +- src/js/views/User.js | 2 + src/scss/components/_context-menu.scss | 14 +- src/scss/components/_lists.scss | 54 ++++++-- src/scss/global/_core.scss | 15 +-- src/scss/global/_forms.scss | 12 +- src/scss/global/_variables.scss | 11 ++ src/scss/views/_artist.scss | 2 +- 20 files changed, 244 insertions(+), 257 deletions(-) create mode 100755 src/js/components/ContextMenuTrigger.js delete mode 100755 src/js/components/TouchContextMenu.js diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js index 3068979b..bba8256f 100755 --- a/src/js/components/AlbumGrid.js +++ b/src/js/components/AlbumGrid.js @@ -28,7 +28,7 @@ class AlbumGrid extends React.Component{ e: e, context: 'album', uris: [item.uri], - item: item + items: [item] } this.props.uiActions.showContextMenu(data) } diff --git a/src/js/components/ArtistGrid.js b/src/js/components/ArtistGrid.js index 6ef38e01..a5cea616 100755 --- a/src/js/components/ArtistGrid.js +++ b/src/js/components/ArtistGrid.js @@ -20,7 +20,7 @@ class ArtistGrid extends React.Component{ e: e, context: 'artist', uris: [item.uri], - item: item + items: [item] } this.props.uiActions.showContextMenu(data) } diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index 537afee6..3803658d 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -30,6 +30,14 @@ class ContextMenu extends React.Component{ window.removeEventListener("click", this.handleClick, false) } + componentWillReceiveProps( nextProps ){ + if (nextProps.menu){ + $('body').addClass('context-menu-open') + } else { + $('body').removeClass('context-menu-open') + } + } + handleScroll(e){ if (this.props.menu){ this.props.uiActions.hideContextMenu() @@ -37,6 +45,10 @@ class ContextMenu extends React.Component{ } handleClick(e){ + if (helpers.isTouchDevice()){ + return null + } + var target = e.target if (this.props.menu && !target.classList.contains('context-menu-trigger')){ this.props.uiActions.hideContextMenu() @@ -44,58 +56,72 @@ class ContextMenu extends React.Component{ } playQueueItem(){ + this.props.uiActions.hideContextMenu() var tracks = this.props.menu.items; - this.props.mopidyActions.changeTrack( tracks[0].tlid ); - this.props.uiActions.hideContextMenu(); + this.props.mopidyActions.changeTrack( tracks[0].tlid ) } removeFromQueue(){ + this.props.uiActions.hideContextMenu() var tracks = this.props.menu.items; var tracks_tlids = []; for( var i = 0; i < tracks.length; i++ ){ tracks_tlids.push( tracks[i].tlid ); } this.props.mopidyActions.removeTracks( tracks_tlids ); - this.props.uiActions.hideContextMenu(); } playURIs(){ - this.props.mopidyActions.playURIs(this.props.menu.uris, this.props.menu.tracklist_uri); - this.props.uiActions.hideContextMenu(); + this.props.uiActions.hideContextMenu() + this.props.mopidyActions.playURIs(this.props.menu.uris, this.props.menu.tracklist_uri) } playURIsNext(){ - this.props.mopidyActions.enqueueURIsNext(this.props.menu.uris, this.props.menu.tracklist_uri); - this.props.uiActions.hideContextMenu(); + this.props.uiActions.hideContextMenu() + this.props.mopidyActions.enqueueURIsNext(this.props.menu.uris, this.props.menu.tracklist_uri) } addToPlaylist(){ - this.props.uiActions.openModal('add_to_playlist', { tracks_uris: this.props.menu.uris }) this.props.uiActions.hideContextMenu(); + this.props.uiActions.openModal('add_to_playlist', { tracks_uris: this.props.menu.uris }) } addToQueue(){ - this.props.mopidyActions.enqueueURIs(this.props.menu.uris, this.props.menu.tracklist_uri) this.props.uiActions.hideContextMenu() + this.props.mopidyActions.enqueueURIs(this.props.menu.uris, this.props.menu.tracklist_uri) } addTracksToPlaylist(playlist_uri){ + this.props.uiActions.hideContextMenu() this.props.uiActions.addTracksToPlaylist(playlist_uri, this.props.menu.uris) - this.props.uiActions.hideContextMenu(); } removeFromPlaylist(){ + this.props.uiActions.hideContextMenu() this.props.uiActions.removeTracksFromPlaylist(this.props.menu.tracklist_uri, this.props.menu.indexes) - this.props.uiActions.hideContextMenu(); } startRadio(){ + this.props.uiActions.hideContextMenu() this.props.pusherActions.startRadio(this.props.menu.uris) - this.props.uiActions.hideContextMenu(); + } + + goToArtist(){ + if (!this.props.menu.items || this.props.menu.items.length <= 0 || !this.props.menu.items[0].artists || this.props.menu.items[0].artists.length <= 0){ + return null + } else { + this.props.uiActions.hideContextMenu() + hashHistory.push( global.baseURL +'artist/'+ this.props.menu.items[0].artists[0].uri ) + } } goToUser(){ - hashHistory.push( global.baseURL +'user/'+ this.props.menu.item.owner.uri ); + if (!this.props.menu.items || this.props.menu.items.length <= 0){ + return null + } else { + this.props.uiActions.hideContextMenu() + hashHistory.push( global.baseURL +'user/'+ this.props.menu.items[0].owner.uri ) + } } copyURIs(e){ @@ -109,17 +135,6 @@ class ContextMenu extends React.Component{ this.props.uiActions.hideContextMenu() } - copyLinks(e){ - var temp = $(""); - $("body").append(temp); - temp.val(this.props.menu.item.external_urls.spotify).select(); - document.execCommand("copy"); - temp.remove(); - - this.props.uiActions.createNotification( "Copied link" ) - this.props.uiActions.hideContextMenu() - } - closeAndDeselectTracks(){ this.props.uiActions.hideContextMenu(); } @@ -159,8 +174,7 @@ class ContextMenu extends React.Component{ { handleClick: 'addToQueue', label: 'Add to queue' }, { handleClick: 'goToArtist', label: 'Go to artist' }, // { handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO - { handleClick: 'copyURIs', label: 'Copy URI' }, - { handleClick: 'copyLinks', label: 'Copy link' } + { handleClick: 'copyURIs', label: 'Copy URI' } ] break @@ -168,8 +182,7 @@ class ContextMenu extends React.Component{ var items = [ //{ handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO { handleClick: 'startRadio', label: 'Start radio' }, - { handleClick: 'copyURIs', label: 'Copy URI' }, - { handleClick: 'copyLinks', label: 'Copy link' } + { handleClick: 'copyURIs', label: 'Copy URI' } ] break @@ -178,8 +191,7 @@ class ContextMenu extends React.Component{ { handleClick: 'playURIs', label: 'Play' }, { handleClick: 'goToUser', label: 'Go to user' }, // { handleClick: 'toggleFollow', label: 'Follow/unfollow' }, TODO - { handleClick: 'copyURIs', label: 'Copy URI' }, - { handleClick: 'copyLinks', label: 'Copy link' } + { handleClick: 'copyURIs', label: 'Copy URI' } ] break @@ -220,24 +232,52 @@ class ContextMenu extends React.Component{ } renderTitle(){ - var item = this.props.menu.item - var style = null - if (item && item.images){ - style = { - backgroundImage: 'url('+helpers.sizedImages(item.images).medium+')' - } + if (!this.props.menu.items || this.props.menu.items.length <= 0){ + return null + } + + switch (this.props.menu.context){ + + case 'artist': + case 'album': + case 'playlist': + var item = this.props.menu.items[0] + var style = null + if (item && item.images){ + style = { + backgroundImage: 'url('+helpers.sizedImages(item.images).medium+')' + } + } + + return ( + + {style ?
: null} +
+ {helpers.uriSource(item.uri)} +   + {this.props.menu.context} +
+
{item.name}
+ + ) + break + + default: + return ( + +
+ {helpers.uriSource(this.props.menu.items[0].uri)} +   + {this.props.menu.context}s +
+
+ {this.props.menu.items.length} items +
+ + ) + break + } - return ( - - {style ?
: null} -
- {helpers.uriSource(item.uri)} -   - {this.props.menu.context} -
-
{item.name}
- - ) } renderItems(){ @@ -295,9 +335,10 @@ class ContextMenu extends React.Component{ return (
- {this.props.menu.item ? this.renderTitle() : null} + {this.renderTitle()} {this.renderItems()}
+
this.props.uiActions.hideContextMenu()}>
); } diff --git a/src/js/components/ContextMenuTrigger.js b/src/js/components/ContextMenuTrigger.js new file mode 100755 index 00000000..005ee661 --- /dev/null +++ b/src/js/components/ContextMenuTrigger.js @@ -0,0 +1,24 @@ + +import React, { PropTypes } from 'react' +import FontAwesome from 'react-fontawesome' + +export default class ContextMenuTrigger extends React.Component{ + + constructor(props) { + super(props); + } + + render(){ + var className = 'context-menu-trigger' + if (this.props.className){ + className += ' '+this.props.className + } + return ( + + ); + } +} diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js index 2a5d3c20..6cf2e6c2 100755 --- a/src/js/components/Modal/Modal.js +++ b/src/js/components/Modal/Modal.js @@ -24,6 +24,14 @@ class Modal extends React.Component{ super(props) } + componentWillReceiveProps( nextProps ){ + if (nextProps.modal){ + $('body').addClass('modal-open') + } else { + $('body').removeClass('modal-open') + } + } + render(){ if( !this.props.modal ) return null; diff --git a/src/js/components/PlaylistGrid.js b/src/js/components/PlaylistGrid.js index 61ecb7c2..b4862bd3 100755 --- a/src/js/components/PlaylistGrid.js +++ b/src/js/components/PlaylistGrid.js @@ -21,7 +21,7 @@ class PlaylistGrid extends React.Component{ e: e, context: 'playlist', uris: [item.uri], - item: item + items: [item] } this.props.uiActions.showContextMenu(data) } diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js index 9dc21f6e..6bc1618e 100755 --- a/src/js/components/SearchForm.js +++ b/src/js/components/SearchForm.js @@ -5,6 +5,7 @@ import { Link, hashHistory } from 'react-router' import { createStore, bindActionCreators } from 'redux' import FontAwesome from 'react-fontawesome' +import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' import * as spotifyActions from '../services/spotify/actions' @@ -19,8 +20,28 @@ class SearchForm extends React.Component{ } handleSubmit(e){ - e.preventDefault(); - hashHistory.push(global.baseURL+'search/'+this.state.query); + e.preventDefault() + + // check for uri type matching + switch (helpers.uriType(this.state.query)){ + + case 'album': + hashHistory.push(global.baseURL+'album/'+this.state.query) + break + + case 'artist': + hashHistory.push(global.baseURL+'artist/'+this.state.query) + break + + case 'playlist': + hashHistory.push(global.baseURL+'playlist/'+this.state.query) + break + + default: + hashHistory.push(global.baseURL+'search/'+this.state.query) + break + } + return false } diff --git a/src/js/components/TouchContextMenu.js b/src/js/components/TouchContextMenu.js deleted file mode 100755 index 9824e702..00000000 --- a/src/js/components/TouchContextMenu.js +++ /dev/null @@ -1,164 +0,0 @@ - -import React, { PropTypes } from 'react' -import { Link } from 'react-router' -import { connect } from 'react-redux' -import { bindActionCreators } from 'redux' -import FontAwesome from 'react-fontawesome' - -import TrackList from './TrackList' -import * as helpers from '../helpers' -import * as uiActions from '../services/ui/actions' -import * as pusherActions from '../services/pusher/actions' -import * as mopidyActions from '../services/mopidy/actions' -import * as spotifyActions from '../services/spotify/actions' - -class TouchContextMenu extends React.Component{ - - constructor(props) { - super(props); - } - - close(){ - this.props.uiActions.hideTouchContextMenu(); - } - - playQueueItem(){ - var tracks = this.props.menu.items - this.props.mopidyActions.changeTrack( tracks[0].tlid ) - this.close() - } - - removeFromQueue(e){ - var tracks = this.props.menu.items - var tracks_tlids = [] - for( var i = 0; i < tracks.length; i++ ){ - tracks_tlids.push( tracks[i].tlid ); - } - this.props.mopidyActions.removeTracks( tracks_tlids ) - this.close() - } - - playURIs(e){ - this.props.mopidyActions.playURIs(this.props.menu.uris, this.props.menu.tracklist_uri) - this.close() - } - - playURIsNext(e){ - this.props.mopidyActions.enqueueURIsNext(this.props.menu.uris, this.props.menu.tracklist_uri) - this.close() - } - - addToPlaylist(e){ - this.props.uiActions.openModal('add_to_playlist', { tracks_uris: this.props.menu.uris }) - this.close() - } - - addToQueue(e){ - this.props.mopidyActions.enqueueURIs(this.props.menu.uris, this.props.menu.tracklist_uri) - this.close() - } - - removeFromPlaylist(e){ - this.props.uiActions.removeTracksFromPlaylist(this.props.menu.tracklist_uri, this.props.menu.indexes) - this.close() - } - - startRadio(e){ - this.props.pusherActions.startRadio(this.props.menu.uris) - this.close() - } - - getItems(){ - switch (this.props.menu.context) { - - case 'queue-track': - var items = [ - { handleClick: 'playQueueItem', label: 'Play', icon: 'play' }, - { handleClick: 'addToPlaylist', label: 'Playlist', icon: 'plus' }, - { handleClick: 'removeFromQueue', label: 'Remove', icon: 'trash' } - ] - break - - case 'editable-playlist-track': - var items = [ - { handleClick: 'playURIs', label: 'Play', icon: 'play' }, - { handleClick: 'playURIsNext', label: 'Next', icon: 'play' }, - { handleClick: 'addToQueue', label: 'Queue', icon: 'plus' }, - { handleClick: 'addToPlaylist', label: 'Playlist', icon: 'plus' }, - { handleClick: 'startRadio', label: 'Start radio', icon: 'spotify' }, - { handleClick: 'removeFromPlaylist', label: 'Remove', icon: 'trash' } - ] - break - - default: - var items = [ - { handleClick: 'playURIs', label: 'Play', icon: 'play' }, - { handleClick: 'playURIsNext', label: 'Next', icon: 'play' }, - { handleClick: 'addToQueue', label: 'Queue', icon: 'plus' }, - { handleClick: 'addToPlaylist', label: 'Playlist', icon: 'plus' }, - { handleClick: 'startRadio', label: 'Start radio', icon: 'spotify' } - ] - break - } - - return items - } - - renderItems(){ - var items = this.getItems() - - return ( -
- { - items.map((item, index) => { - return ( - - this[item.handleClick]()}> - - { item.label } - - - ) - }) - } - - this.close()}> - - Cancel - - -
- ) - } - - render(){ - if( !this.props.menu ) return null; - - return ( -
- {this.renderItems()} -
- ); - } -} - -const mapStateToProps = (state, ownProps) => { - return { - menu: state.ui.touch_context_menu, - current_track: state.ui.current_track, - current_tracklist: state.ui.current_tracklist, - playlist: state.ui.playlist, - playlists: state.ui.playlists - } -} - -const mapDispatchToProps = (dispatch) => { - return { - uiActions: bindActionCreators(uiActions, dispatch), - pusherActions: bindActionCreators(pusherActions, dispatch), - spotifyActions: bindActionCreators(spotifyActions, dispatch), - mopidyActions: bindActionCreators(mopidyActions, dispatch) - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(TouchContextMenu) \ No newline at end of file diff --git a/src/js/components/Track.js b/src/js/components/Track.js index cbcd8515..4a186a3f 100755 --- a/src/js/components/Track.js +++ b/src/js/components/Track.js @@ -1,10 +1,10 @@ import React, { PropTypes } from 'react' import { Link } from 'react-router' + import FontAwesome from 'react-fontawesome' import ArtistSentence from './ArtistSentence' import Dater from './Dater' - import * as helpers from '../helpers' export default class Track extends React.Component{ @@ -140,7 +140,6 @@ export default class Track extends React.Component{ { this.props.track.selected ? : null } { this.props.track.playing ? : null } { track_columns } - { this.props.show_source_icon ? : null } ); } diff --git a/src/js/views/Album.js b/src/js/views/Album.js index ebfe8d3a..897b89fb 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -13,6 +13,7 @@ import FollowButton from '../components/FollowButton' import Dater from '../components/Dater' import LazyLoadListener from '../components/LazyLoadListener' import SidebarToggleButton from '../components/SidebarToggleButton' +import ContextMenuTrigger from '../components/ContextMenuTrigger' import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' @@ -53,7 +54,7 @@ class Album extends React.Component{ var data = { e: e, context: 'album', - item: this.props.album, + items: [this.props.album], uris: [this.props.params.uri] } this.props.uiActions.showContextMenu(data) @@ -66,7 +67,6 @@ class Album extends React.Component{ if (props.album && props.album.tracks && props.album.artists_uris){ console.info('Loading album from index') }else{ - console.log(props.params.uri) this.props.spotifyActions.getAlbum( props.params.uri ); } break; @@ -129,7 +129,7 @@ class Album extends React.Component{
{ helpers.uriSource(this.props.params.uri) == 'spotify' ? : null } - + this.handleContextMenu(e)} />
diff --git a/src/js/views/App.js b/src/js/views/App.js index 0c49d208..108bc402 100755 --- a/src/js/views/App.js +++ b/src/js/views/App.js @@ -9,7 +9,6 @@ import Sidebar from '../components/Sidebar' import MiniPlayer from '../components/MiniPlayer' import SidebarToggleButton from '../components/SidebarToggleButton' import ContextMenu from '../components/ContextMenu' -import TouchContextMenu from '../components/TouchContextMenu' import Dragger from '../components/Dragger' import Modal from '../components/Modal/Modal' import Notifications from '../components/Notifications' @@ -136,7 +135,6 @@ class App extends React.Component{ {this.props.children} - diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index 0a4b32ac..b0d82548 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -14,6 +14,7 @@ import ArtistList from '../components/ArtistList' import ArtistGrid from '../components/ArtistGrid' import FollowButton from '../components/FollowButton' import SidebarToggleButton from '../components/SidebarToggleButton' +import ContextMenuTrigger from '../components/ContextMenuTrigger' import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' @@ -58,7 +59,7 @@ class Artist extends React.Component{ var data = { e: e, context: 'artist', - item: this.props.artist, + items: [this.props.artist], uris: [this.props.params.uri] } this.props.uiActions.showContextMenu(data) @@ -214,7 +215,7 @@ class Artist extends React.Component{
{ can_play_radio ? : null} { can_follow ? : null} - + this.handleContextMenu(e)} />
{ this.renderSubViewMenu() } diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index a7191e3d..e2d60c61 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -13,6 +13,7 @@ import ConfirmationButton from '../components/ConfirmationButton' import LazyLoadListener from '../components/LazyLoadListener' import FollowButton from '../components/FollowButton' import SidebarToggleButton from '../components/SidebarToggleButton' +import ContextMenuTrigger from '../components/ContextMenuTrigger' import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' @@ -43,7 +44,7 @@ class Playlist extends React.Component{ var data = { e: e, context: (this.props.playlist.can_edit ? 'editable-playlist' : 'playlist'), - item: this.props.playlist, + items: [this.props.playlist], uris: [this.props.params.uri] } this.props.uiActions.showContextMenu(data) @@ -107,7 +108,7 @@ class Playlist extends React.Component{
- + this.handleContextMenu(e)} />
) @@ -117,7 +118,7 @@ class Playlist extends React.Component{
- + this.handleContextMenu(e)} />
) } @@ -125,7 +126,7 @@ class Playlist extends React.Component{
- + this.handleContextMenu(e)} />
) @@ -133,7 +134,7 @@ class Playlist extends React.Component{ return (
- + this.handleContextMenu(e)} />
) } diff --git a/src/js/views/User.js b/src/js/views/User.js index f425781d..b65bd8d3 100755 --- a/src/js/views/User.js +++ b/src/js/views/User.js @@ -9,6 +9,7 @@ import PlaylistGrid from '../components/PlaylistGrid' import FollowButton from '../components/FollowButton' import LazyLoadListener from '../components/LazyLoadListener' import Header from '../components/Header' +import ContextMenuTrigger from '../components/ContextMenuTrigger' import * as helpers from '../helpers' import * as mopidyActions from '../services/mopidy/actions' @@ -71,6 +72,7 @@ class User extends React.Component{
+ this.handleContextMenu(e)} />
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss index e327c6a2..2243e01a 100755 --- a/src/scss/components/_context-menu.scss +++ b/src/scss/components/_context-menu.scss @@ -24,7 +24,6 @@ } .title { - cursor: pointer; display: block; padding: 8px 12px; width: 140px; @@ -131,13 +130,24 @@ bottom: 0 !important; left: 0 !important; margin: 0 !important; - background: rgba(10, 10, 10, 0.95); overflow-y: scroll; + .background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(10, 10, 10, 0.95); + z-index: 1; + } + .liner { width: 250px; margin: 30px auto; max-width: 90vw; + position: relative; + z-index: 2; .title { padding: 16px 20px; diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 4469e5f7..3c47bb5e 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -18,13 +18,6 @@ margin-bottom: -1px; @include clearfix; - .source { - color: $mid_grey; - position: absolute; - top: 10px; - right: 15px; - } - &.selected { background: $yellow !important; } @@ -91,10 +84,28 @@ padding: 7px 10px 7px 20px; .col { - &.name { width: 50%; } - &.artists { width: 50%; } - &.album { width: 50%; padding-left: 50%; color: $mid_grey; } - &.duration { display: none; } + &.name { + width: 90%; + padding-right: 10%; + } + + &.duration { + width: auto; + position: absolute; + right: 10px; + text-align: right; + } + + &.artists, + &.album { + width: auto; + color: $mid_grey; + display: inline-block; + } + + &.album { + @include bullet(); + } } &.header { @@ -107,7 +118,6 @@ left: 5px; } } - } @@ -170,6 +180,26 @@ &.album { width: 25%; } &.added { width: 20%; } } + + @include responsive( $bp_medium ){ + .col { + &.name { + width: 90%; + padding-right: 10%; + } + + &.artists, + &.album { + width: auto; + color: $mid_grey; + display: inline-block; + } + + &.added { + display: none; + } + } + } } } } \ No newline at end of file diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index dc9c2af0..897b088e 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -15,6 +15,12 @@ body { &.modal-open { overflow-y: hidden; } + + @include responsive( $bp_medium ){ + &.context-menu-open { + overflow-y: hidden; + } + } } main, @@ -251,14 +257,7 @@ footer { display: inline-block; &:not(:first-child){ - padding-left: 14px; - - &::before { - display: inline-block; - content: '•'; - margin-left: -8px; - padding-right: 6px; - } + @include bullet(); } } } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 729bf5a2..8702ec45 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -38,8 +38,7 @@ input[type="submit"] { padding: 6px 20px; min-width: 160px; border: 0; - margin: 0 10px 20px 0; - margin-right: 20px; + margin: 0 20px 10px 0; text-align: center; border: 2px solid $mid_grey; color: $mid_grey; @@ -147,10 +146,16 @@ input[type="submit"] { &.context-menu-trigger { border-color: transparent; padding: 6px; + margin-bottom: 8px; font-size: 20px; min-width: 0; line-height: 20px; color: #000000; + vertical-align: bottom; + + .fa { + pointer-events: none; + } &:hover { border-color: transparent; @@ -192,7 +197,8 @@ input[type="submit"] { } @include responsive( $bp_medium ){ - min-width: 140px; + min-width: 120px; + margin-right: 10px; } @include responsive( $bp_narrow ){ diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index 1ebbc277..3d3d3261 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -32,6 +32,17 @@ $bp_shallow: 650px; } } +@mixin bullet { + padding-left: 14px; + + &:before { + display: inline-block; + content: '\2022'; + margin-left: -8px; + padding-right: 6px; + } +} + @mixin animate( $duration: 0.2s, $easing: ease-in-out ){ -webkit-transition: all $duration $easing; -moz-transition: all $duration $easing; diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss index a05544a4..f9f4db4c 100755 --- a/src/scss/views/_artist.scss +++ b/src/scss/views/_artist.scss @@ -38,7 +38,7 @@ } .actions { - padding-bottom: 5px; + padding-bottom: 15px; } .sub-views {