diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 9011116d..f6e1cf29 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -214,7 +214,7 @@ export default class Track extends React.Component{
)
}
- if (this.props.slim_mode){
+ if (this.props.mini_zones){
// Select zone handles selection events only
// We use onClick to capture touch as well as mouse events in one tidy parcel
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index 30afafa8..ff5630fd 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -400,6 +400,11 @@ class TrackList extends React.Component{
if (this.props.className){
className += ' '+this.props.className
}
+ var mini_zones = false
+ if (this.props.slim_mode || helpers.isTouchDevice()){
+ mini_zones = true
+ className += ' mini-zones'
+ }
return (
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index 9338c342..e3b50fe6 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -209,6 +209,68 @@
}
}
+ &.track-list.mini-zones {
+ .list-item {
+
+ &.can-sort {
+ padding-left: 78px !important;
+ }
+
+ &:not(.can-sort){
+ padding-left: 46px !important;
+ }
+
+ .select-zone {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 38px;
+ font-size: 8px;
+ display: block;
+
+ .fa {
+ position: absolute;
+ top: 20px;
+ left: 19px;
+ pointer-events: none;
+ color: $white;
+ z-index: 1;
+ }
+
+ &:after {
+ display: block;
+ content: '';
+ border: 1px solid $mid_grey;
+ border-radius: 50%;
+ width: 14px;
+ height: 14px;
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ }
+ }
+
+ .drag-zone {
+ position: absolute;
+ top: 0;
+ left: 38px;
+ height: 100%;
+ width: 38px;
+ font-size: 14px;
+ display: block;
+ color: $mid_grey;
+
+ .fa {
+ position: absolute;
+ top: 17px;
+ left: 8px;
+ pointer-events: none;
+ }
+ }
+ }
+ }
+
@include responsive( $bp_medium ){
.list-item {