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 (
+ this.props.onTrigger(e)}>
+
+
+ );
+ }
+}
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 (
-
- )
- }
-
- 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{
this.play()}>Play
{ helpers.uriSource(this.props.params.uri) == 'spotify' ? : null }
- this.handleContextMenu(e)}>
+ 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 ? this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio : null}
{ can_follow ? : null}
- this.handleContextMenu(e)}>
+ 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.play() }>Play
this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name }) }>Edit
- this.handleContextMenu(e)}>
+ this.handleContextMenu(e)} />
)
@@ -117,7 +118,7 @@ class Playlist extends React.Component{
this.play() }>Play
this.props.uiActions.openModal('edit_playlist', { uri: this.props.playlist.uri, name: this.props.playlist.name, is_public: this.props.playlist.public }) }>Edit
- this.handleContextMenu(e)}>
+ this.handleContextMenu(e)} />
)
}
@@ -125,7 +126,7 @@ class Playlist extends React.Component{
this.play() }>Play
- this.handleContextMenu(e)}>
+ this.handleContextMenu(e)} />
)
@@ -133,7 +134,7 @@ class Playlist extends React.Component{
return (
this.play() }>Play
- this.handleContextMenu(e)}>
+ 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 {