secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Using standard range slider UI; Responsive discover results

Browse Source
This commit is contained in:
James Barnsley
2018-01-24 09:13:48 +13:00
parent 0da7f3e89d
commit c9b76c9e17
7 changed files with 1344 additions and 918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
mopidy_iris/static/app.css
View File

@ -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;
top: 10px;
left: 10px;
z-index: 3;
pointer-events: none; }
padding-bottom: 6px; }
.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;
cursor: grab; }
background: #32b5f2; }
.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;
border-radius: 3px; }
margin: -6px 0 0 0;
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 {

2084
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -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

43
src/js/views/discover/DiscoverRecommendations.js
View File

@ -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>

22
src/scss/global/_forms.scss
View File

@ -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;
top: 10px;
left: 10px;
z-index: 3;
pointer-events: none;
padding-bottom: 6px;
}
.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;
border-radius: 3px;
margin: -6px 0 0 0;
border-radius: 3px 0 0 3px;
}
&:last-child {
.input-range__slider {
margin-left: -20px;
border-radius: 0 3px 3px 0;
margin-left: -12px;
}
}
}

41
src/scss/views/_discover.scss
View File

@ -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;
}
}
}
}