diff --git a/src/index.html b/src/index.html
index ecbc0295..f796b4b4 100755
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,7 @@
+
diff --git a/src/js/App.js b/src/js/App.js
index 5c3845c2..8d34f390 100755
--- a/src/js/App.js
+++ b/src/js/App.js
@@ -119,7 +119,7 @@ class App extends React.Component{
if (this.props.dragger && this.props.dragger.dragging){
this.props.uiActions.dragCancel()
}
- if (this.props.modal){';'
+ if (this.props.modal){
this.props.uiActions.closeModal()
}
break
@@ -180,7 +180,7 @@ class App extends React.Component{
if (this.props.dragger && this.props.dragger.active) className += ' dragging'
if (this.props.sidebar_open) className += ' sidebar-open'
if (this.props.modal) className += ' modal-open'
- if (helpers.isTouchDevice() || this.props.emulate_touch){
+ if (helpers.isTouchDevice()){
className += ' touch'
} else {
className += ' notouch'
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index ac2c5766..ea03bb48 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -78,6 +78,9 @@ class TrackList extends React.Component{
}
handleTouchEnd(e,index){
+ // TODO: if touchend AND mouseup then only use one (preferrably touch as mouse has 300ms lag)
+ this.handleMouseDown(e,index)
+ e.preventDefault()
}
handleDoubleClick(e,index){
diff --git a/src/js/views/Search.js b/src/js/views/Search.js
index f146278a..78cf8447 100755
--- a/src/js/views/Search.js
+++ b/src/js/views/Search.js
@@ -139,7 +139,7 @@ class Search extends React.Component{
var artists_section = (
@@ -152,7 +152,7 @@ class Search extends React.Component{
var albums_section = (
@@ -165,7 +165,7 @@ class Search extends React.Component{
var playlists_section = (
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index d8fdec2f..f35cbaef 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -248,25 +248,32 @@
}
}
-.list {
-
+.list {
&.track-list {
+
.context-menu-trigger {
- display: block;
- position: fixed;
- bottom: 50px;
- right: 5px;
- width: 50px;
- height: 50px;
- overflow: hidden;
- z-index: 97;
- border-radius: 50%;
- background: $blue;
- color: #FFFFFF;
-
- &:focus,
- &:active {
- background: darken($blue, 10%);
+ display: none;
+ }
+
+ @include responsive( $bp_medium ){
+
+ .context-menu-trigger {
+ display: block;
+ position: fixed;
+ bottom: 50px;
+ right: 5px;
+ width: 50px;
+ height: 50px;
+ overflow: hidden;
+ z-index: 97;
+ border-radius: 50%;
+ background: $blue;
+ color: #FFFFFF;
+
+ &:focus,
+ &:active {
+ background: darken($blue, 10%);
+ }
}
}
}
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 93d457c5..543853ce 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -1,7 +1,8 @@
.list {
-
.list-item {
+ @include clearfix;
+ @include animate(0.1s);
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -16,17 +17,27 @@
border-top: 1px solid $faint_grey;
border-bottom: 1px solid $faint_grey;
margin-bottom: -1px;
- @include clearfix;
+ cursor: pointer;
&.selected {
background: $yellow !important;
}
+ &.playing {
+ font-weight: bold;
+ }
+
.state-icon {
position: absolute;
- top: 15px;
- left: 15px;
+ top: 0;
+ left: 0;
font-size: 10px;
+
+ .fa {
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ }
}
:root .notouch:not(.dragging) &:not(.header):not(.no-click):hover {
@@ -210,7 +221,13 @@
.state-icon {
top: 0;
left: 0;
- padding: 19px 17px 15px 17px;
+ height: 100%;
+ width: 48px;
+
+ .fa {
+ top: 19px;
+ left: 17px;
+ }
&:after {
display: block;
diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss
index 476553d6..17e78a83 100755
--- a/src/scss/global/_core.scss
+++ b/src/scss/global/_core.scss
@@ -6,6 +6,7 @@ html {
color: #000000;
font-family: "Archivo Narrow", Helvetica, Arial, sans-serif;
font-size: 14px;
+ touch-action: manipulation;
}
body {