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

Revising range slider UI

Browse Source
This commit is contained in:
James Barnsley
2018-01-18 08:42:58 +13:00
parent 0c1aaeced8
commit 3a23a2b3ef
6 changed files with 115 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,8 +40,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
danceability: {
@ -50,8 +50,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
energy: {
@ -60,8 +60,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
instrumentalness: {
@ -70,8 +70,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
key: {
@ -79,8 +79,8 @@ class Discover extends React.Component{
min: 0,
max: 11,
value: {
min: 0,
max: 11
min: 3,
max: 8
}
},
liveness: {
@ -89,8 +89,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
loudness: {
@ -99,8 +99,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
popularity: {
@ -108,8 +108,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
speechiness: {
@ -119,8 +119,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
tempo: {
@ -129,8 +129,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
},
valence: {
@ -140,8 +140,8 @@ class Discover extends React.Component{
min: 0,
max: 100,
value: {
min: 0,
max: 100
min: 25,
max: 75
}
}
}
@ -235,8 +235,6 @@ class Discover extends React.Component{
min = min / 100;
}
console.log(key,max,min);
digested_tunabilities[key+"_max"] = max.toString();
digested_tunabilities[key+"_min"] = min.toString();
}
@ -369,10 +367,6 @@ class Discover extends React.Component{
<div className="field tunability range" key={tunability.name}>
<div className="label">
{helpers.titleCase(tunability.name)}
<span className="has-tooltip info">
<FontAwesome name="info-circle" />
<span className="tooltip">{tunability.description}</span>
</span>
</div>
<div className="input">
<InputRange
@ -380,6 +374,7 @@ class Discover extends React.Component{
minValue={tunability.min}
maxValue={tunability.max}
value={tunability.value}
draggableTrack={true}
onChange={value => this.setTunability(tunability.name, value)}
/>
</div>

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

@ -294,30 +294,50 @@ input[type="submit"] {
}
&.range {
.label {
padding-bottom: 4px;
position: relative;
.has-tooltip {
padding-left: 4px;
}
.label {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
pointer-events: none;
}
.input-range__track,
.input-range__slider-container {
transition: none;
height: 30px;
border-radius: 3px;
cursor: col-resize;
}
.input-range__track--background {
background: $mid_grey;
background: rgba(134, 201, 232, 0.5);
}
.input-range__track--active {
background: $blue;
cursor: grab;
}
.input-range__slider {
background: $blue;
border-color: $blue;
.input-range__slider-container {
.input-range__slider {
cursor: col-resize;
background: $blue;
border: none;
top: 0;
height: 100%;
width: 20px;
margin: -30px 0 0 0;
border-radius: 3px;
}
&:last-child {
.input-range__slider {
margin-left: -20px;
}
}
}
}

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

@ -79,6 +79,11 @@
box-sizing: border-box;
padding-right: 20px;
.input {
float: none;
width: 100%;
}
.input-range {
.input-range__label-container {
display: none;