Using standard range slider UI; Responsive discover results

mopidy_iris/static/app.css

@@ -3020,6 +3020,11 @@ input[type="submit"] {
   input[type="button"].small,
   input[type="submit"].small {
     padding: 6px 18px 4px; }
+  .button.large,
+  button.large,
+  input[type="button"].large,
+  input[type="submit"].large {
+    padding: 16px 50px 14px; }
   .button.pull-right,
   button.pull-right,
   input[type="button"].pull-right,
@@ -3218,34 +3223,33 @@ input[type="submit"] {
     content: '\F00C'; }
   .field.range {
     position: relative; }
+    .field.range .input-range {
+      height: auto; }
     .field.range .label {
-      position: absolute;
+      padding-bottom: 6px; }
-      top: 10px;
-      left: 10px;
-      z-index: 3;
-      pointer-events: none; }
     .field.range .input-range__track,
     .field.range .input-range__slider-container {
       transition: none;
-      height: 30px;
+      height: 6px;
       border-radius: 3px;
       cursor: col-resize; }
     .field.range .input-range__track--background {
-      background: rgba(134, 201, 232, 0.5); }
+      margin: 0;
+      background: rgba(100, 100, 100, 0.5); }
     .field.range .input-range__track--active {
-      background: #32b5f2;
+      background: #32b5f2; }
-      cursor: grab; }
     .field.range .input-range__slider-container .input-range__slider {
       cursor: col-resize;
       background: #32b5f2;
       border: none;
       top: 0;
-      height: 100%;
+      height: 6px;
       width: 20px;
-      margin: -30px 0 0 0;
+      margin: -6px 0 0 0;
-      border-radius: 3px; }
+      border-radius: 3px 0 0 3px; }
     .field.range .input-range__slider-container:last-child .input-range__slider {
-      margin-left: -20px; }
+      border-radius: 0 3px 3px 0;
+      margin-left: -12px; }
   .field.sub-field {
     padding: 0; }
   .field .description {
@@ -5112,16 +5116,16 @@ main header {
   font-family: "Overpass";
   position: relative;
   display: inline-block; }
-  .dropdown-field .label {
+  .dropdown-field .label:not(.button) {
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
     padding: 14px 10px;
     cursor: pointer; }
-    .notouch .dropdown-field .label:hover {
+    .notouch .dropdown-field .label:not(.button):hover {
       color: #32b5f2; }
-  .dropdown-field.expanded .label {
+  .dropdown-field.expanded .label:not(.button) {
     color: #32b5f2; }
   .dropdown-field.expanded .options {
     display: block; }
@@ -5823,7 +5827,7 @@ main .track-view {
 
 .discover-view .seeds,
 .discover-view .tunabilities {
-  padding-top: 40px; }
+  padding-top: 30px; }
   .discover-view .seeds h3,
   .discover-view .tunabilities h3 {
     padding-bottom: 6px; }
@@ -5860,12 +5864,24 @@ main .track-view {
   width: 200px;
   float: left;
   box-sizing: border-box;
-  padding-right: 20px; }
+  padding-right: 20px;
+  position: relative; }
   .discover-view .tunabilities .tunability .input {
     float: none;
     width: 100%; }
   .discover-view .tunabilities .tunability .input-range .input-range__label-container {
     display: none; }
+  .discover-view .tunabilities .tunability .remove {
+    -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+    font-size: 10px;
+    padding: 4px;
+    margin-left: 4px; }
+    .discover-view .tunabilities .tunability .remove:hover {
+      color: #cf2d2d; }
 
 .discover-view .autocomplete-field {
   width: 250px;
@@ -5886,6 +5902,10 @@ main .track-view {
     .discover-view .autocomplete-field .input:after {
       background: #32b5f2; }
 
+.discover-view .actions {
+  padding-top: 60px;
+  text-align: center; }
+
 .discover-view section .grid {
   padding-bottom: 20px; }
 
@@ -5893,7 +5913,17 @@ main .track-view {
   .discover-view .intro {
     padding: 40px 20px; }
   .discover-view .seeds {
-    padding-top: 20px; } }
+    padding-top: 20px; }
+  .discover-view .tunabilities .tunability {
+    width: 100%;
+    float: none;
+    padding: 15px 0; }
+  .discover-view .tunabilities .dropdown-field {
+    margin-top: 20px; }
+  .discover-view .col.tracks {
+    width: 100%; }
+  .discover-view .col.others, .discover-view .col.w5 {
+    display: none; } }
 
 .discover-featured-view .intro,
 .discover-new-releases-view .intro {

mopidy_iris/static/index.html

@@ -38,7 +38,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1516129632";
+	var build = "1516660429";
 	var version = "3.11.0";
 
 	// Construct the script tag

src/js/views/discover/DiscoverRecommendations.js

@@ -303,7 +303,7 @@ class Discover extends React.Component{
 
 		return (
 			<div className="seeds">
-				<h3>Seeds</h3>
+				<h4 className="underline">Seeds</h4>
 				{
 					seeds_objects.map((seed,index) => {
 						var type = helpers.uriType(seed.uri)
@@ -334,8 +334,8 @@ class Discover extends React.Component{
 	}
 
 	renderTunabilities(){
-		var enabled_tunabilities = [];
 		var addable_tunabilities = [];
+		var enabled_tunabilities = [];
 		for (var key in this.state.tunabilities){
 			if (this.state.tunabilities.hasOwnProperty(key)){
 
@@ -360,13 +360,16 @@ class Discover extends React.Component{
 
 		return (
 			<div className="tunabilities">
-				<h3>Musical properties</h3>
+				<h4 className="underline">Musical properties</h4>
 				{
 					enabled_tunabilities.map(tunability => {
 						return (
 							<div className="field tunability range" key={tunability.name}>
 								<div className="label">
 									{helpers.titleCase(tunability.name)}
+									<span className="remove" onClick={e => this.toggleTunability(tunability.name)}>
+										<FontAwesome name="close" />
+									</span>
 								</div>
 								<div className="input">
 									<InputRange
@@ -374,16 +377,14 @@ class Discover extends React.Component{
 										minValue={tunability.min}
 										maxValue={tunability.max}
 										value={tunability.value}
-										draggableTrack={true}
 										onChange={value => this.setTunability(tunability.name, value)}
 									/>
 								</div>
-								<FontAwesome name="close" onClick={e => this.toggleTunability(tunability.name)} />
 							</div>
 						);
 					})
 				}
-				<DropdownField icon="plus" name="Add" options={addable_tunabilities} no_status_icon button="alternative" handleChange={val => {this.toggleTunability(val)}} />
+				<DropdownField name="Add" options={addable_tunabilities} no_status_icon button="alternative" handleChange={val => {this.toggleTunability(val)}} />
 			</div>
 		);
 	}
@@ -445,7 +446,7 @@ class Discover extends React.Component{
 		return (
 			<div className="content-wrapper recommendations-results cf">
 
-				<section className="col w70">
+				<section className="col w70 tracks">
 					<h4>
 						Tracks
 						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
@@ -456,7 +457,7 @@ class Discover extends React.Component{
 
 				<div className="col w5"></div>
 
-				<div className="col w25">
+				<div className="col w25 others">
 					<section>
 						<h4>Artists</h4>
 						<RelatedArtists artists={artists} />
@@ -474,6 +475,27 @@ class Discover extends React.Component{
 	}
 
 	render(){
+		var addable_tunabilities = [];
+		for (var key in this.state.tunabilities){
+			if (this.state.tunabilities.hasOwnProperty(key)){
+
+				var tunability = Object.assign(
+					{},
+					this.state.tunabilities[key],
+					{
+						name: key
+					}
+				);
+
+				if (!tunability.enabled){
+					addable_tunabilities.push({
+						label: helpers.titleCase(tunability.name),
+						value: tunability.name
+					});
+				}
+			}
+		}
+
 		return (
 			<div className="view discover-view">
 				<div className="intro">
@@ -488,7 +510,10 @@ class Discover extends React.Component{
 						{this.renderSeeds()}
 						{this.renderTunabilities()}
 						<div className="actions">
-							<span className="button primary" onClick={e => this.getRecommendations()}>Apply</span>
+							<span className="button primary large" onClick={e => this.getRecommendations()}>
+								<FontAwesome name="compass" />&nbsp; 
+								Find recommendations
+							</span>
 						</div>
 					</div>
 

src/scss/global/_forms.scss

@@ -103,6 +103,10 @@ input[type="submit"] {
 		padding: 6px 18px 4px;
 	}
 
+	&.large {
+		padding: 16px 50px 14px;
+	}
+
 	&.pull-right {
 		margin-right: 0;
 		margin-left: 30px;
@@ -301,17 +305,13 @@ input[type="submit"] {
 		}
 
 		.label {
-			position: absolute;
+			padding-bottom: 6px;
-			top: 10px;
-			left: 10px;
-			z-index: 3;
-			pointer-events: none;
 		}
 
 		.input-range__track,
 		.input-range__slider-container {
 			transition: none;
-			height: 36px;
+			height: 6px;
 			border-radius: 3px;
 			cursor: col-resize;
 		}
@@ -323,7 +323,6 @@ input[type="submit"] {
 
 		.input-range__track--active {
 			background: $blue;
-			cursor: grab;
 		}
 
 		.input-range__slider-container {			
@@ -332,15 +331,16 @@ input[type="submit"] {
 				background: $blue;
 				border: none;
 				top: 0;
-				height: 100%;
+				height: 6px;
 				width: 20px;
-				margin: -36px 0 0 0;
+				margin: -6px 0 0 0;
-				border-radius: 3px;
+				border-radius: 3px 0 0 3px;
 			}
 
 			&:last-child {
 				.input-range__slider {
-					margin-left: -20px;
+					border-radius: 0 3px 3px 0;
+					margin-left: -12px;
 				}
 			}
 		}

src/scss/views/_discover.scss

@@ -33,7 +33,7 @@
 
 	.seeds,
 	.tunabilities {
-		padding-top: 20px;
+		padding-top: 30px;
 
 		h3 {
 			padding-bottom: 6px;
@@ -78,6 +78,7 @@
 			float: left;
 			box-sizing: border-box;
 			padding-right: 20px;
+			position: relative;
 
 			.input {
 				float: none;
@@ -89,6 +90,18 @@
 					display: none;
 				}
 			}
+
+			.remove {
+				@include animate();
+				cursor: pointer;
+				font-size: 10px;
+				padding: 4px;
+				margin-left: 4px;
+
+				&:hover {
+					color: $red;
+				}
+			}
 		}
 	}
 
@@ -122,7 +135,8 @@
 	}
 
 	.actions {
-		padding-top: 30px;
+		padding-top: 60px;
+		text-align: center;
 	}
 	
 	section {
@@ -140,6 +154,29 @@
 		.seeds {
 			padding-top: 20px;
 		}
+
+		.tunabilities {
+			.tunability {
+				width: 100%;
+				float: none;
+				padding: 15px 0;
+			}
+
+			.dropdown-field {
+				margin-top: 20px;
+			}
+		}
+
+		.col {
+			&.tracks {
+				width: 100%;
+			}
+
+			&.others,
+			&.w5 {
+				display: none;
+			}
+		}
 	}
 }