No more touch-and-hold; Mobile selection ONLY via checkbox click/touch

src/index.html

@@ -8,6 +8,7 @@
 	<meta name="mobile-web-app-capable" content="yes" >
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="theme-color" content="#222222" />
+	<meta name="viewport" content="width=device-width">
 
 	<link rel="shortcut icon" type="image/ico" href="/iris/assets/favicon.ico" />
 	<link rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.ico" />

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'

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){

src/js/views/Search.js

@@ -139,7 +139,7 @@ class Search extends React.Component{
 					var artists_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
+								<h4><Link to={global.baseURL+'search/iris:search:artists:'+this.props.params.query}>Artists</Link></h4>
 								<ArtistGrid show_source_icon artists={artists.slice(0,5)} />
 							</div>
 						</section>
@@ -152,7 +152,7 @@ class Search extends React.Component{
 					var albums_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/albums/'+this.props.params.query}>Albums</Link></h4>
+								<h4><Link to={global.baseURL+'search/iris:search:albums:'+this.props.params.query}>Albums</Link></h4>
 								<AlbumGrid show_source_icon albums={albums.slice(0,5)} />
 							</div>
 						</section>
@@ -165,7 +165,7 @@ class Search extends React.Component{
 					var playlists_section = (					
 						<section>
 							<div className="inner">
-								<h4><Link to={global.baseURL+'search/playlists/'+this.props.params.query}>Playlists</Link></h4>
+								<h4><Link to={global.baseURL+'search/iris:search:playlists:'+this.props.params.query}>Playlists</Link></h4>
 								<PlaylistGrid show_source_icon playlists={playlists.slice(0,5)} />
 							</div>
 						</section>

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%);
+				}
 			}
 		}
 	}

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;

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 {