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

More flex to discover

Browse Source
This commit is contained in:
James Barnsley
2019-11-28 09:13:06 +13:00
parent 61c3a5689a
commit 26ee67e2f6
7 changed files with 158 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -316,11 +316,13 @@ class Discover extends React.Component {
return (
<div className={`seed${seed.images ? ' has-thumbnail' : ''}`} key={seed.uri}>
{images ? <URILink className="thumbnail-wrapper" type={type} uri={seed.uri}><Thumbnail images={images} circle={seed.type == 'artist'} size="small" /></URILink> : null}
<div className="label">
<span className="text">{helpers.titleCase(type)}</span>
<Icon name="close" className="remove" onClick={() => this.removeSeed(index)} />
<div className="seed__details">
<div className="seed__label">
<span className="seed__label__text">{helpers.titleCase(type)}</span>
<Icon name="close" className="seed__label__remove" onClick={() => this.removeSeed(index)} />
</div>
<div className="seed__label__name">{seed.name}</div>
</div>
<div className="name">{seed.name}</div>
</div>
);
})
@ -365,27 +367,25 @@ class Discover extends React.Component {
return (
<div className="tunabilities">
{
enabled_tunabilities.map((tunability) => (
<div className="field tunability range" key={tunability.name}>
<div className="label">
{helpers.titleCase(tunability.name)}
<span className="remove" onClick={(e) => this.toggleTunability(tunability.name)}>
<Icon name="close" />
</span>
</div>
<div className="input">
<InputRange
disabled={!tunability.enabled}
minValue={tunability.min}
maxValue={tunability.max}
value={tunability.value}
onChange={(value) => this.setTunability(tunability.name, value)}
/>
</div>
</div>
))
}
{enabled_tunabilities.map((tunability) => (
<div className="field tunability range" key={tunability.name}>
<div className="tunability__label">
{helpers.titleCase(tunability.name)}
<span className="remove" onClick={(e) => this.toggleTunability(tunability.name)}>
<Icon name="close" />
</span>
</div>
<div className="tunability__input">
<InputRange
disabled={!tunability.enabled}
minValue={tunability.min}
maxValue={tunability.max}
value={tunability.value}
onChange={(value) => this.setTunability(tunability.name, value)}
/>
</div>
</div>
))}
</div>
);
}

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

@ -22,13 +22,9 @@
}
&__parameters {
@include clearfix();
display: flex;
padding-top: 40px;
.seeds,
.tunabilities {
float: left;
}
margin: 0 -15px;
}
&__actions {
@ -107,25 +103,30 @@
}
.seeds {
display: flex;
flex-wrap: wrap;
.seed {
display: flex;
align-items: center;
color: colour(white);
padding: 0 30px 30px 0;
float: left;
padding: 15px;
.thumbnail-wrapper {
float: left;
width: 44px;
border: 0 !important;
margin-right: 15px;
}
.label {
.text {
opacity: 0.5;
&__label {
opacity: 0.5;
&__text {
font-size: 12px;
text-transform: uppercase;
}
.remove {
&__remove {
@include animate();
cursor: pointer;
font-size: 14px;
@ -137,16 +138,10 @@
color: colour(red);
}
}
}
.name {
font-size: 16px;
}
&.has-thumbnail {
.label,
.name {
padding-left: 52px;
&__name {
padding-top: 3px;
font-size: 16px;
}
}
@ -157,19 +152,27 @@
}
.tunabilities {
@include clearfix();
display: flex;
flex-wrap: wrap;
align-items: center;
.tunability {
width: 200px;
float: left;
display: block;
align-items: center;
box-sizing: border-box;
padding: 0 30px 30px 0;
padding: 15px;
position: relative;
.input {
float: none;
width: 100%;
padding-top: 4px;
&__label {
opacity: 0.5;
font-size: 12px;
text-transform: uppercase;
}
&__input {
width: 200px;
height: 1rem;
margin-top: 8px;
}
.input-range {
@ -217,22 +220,19 @@
&__parameters {
padding-top: 10px;
display: block;
.seeds {
padding-top: 20px;
float: none;
.seed {
float: none;
}
}
.tunabilities {
float: none;
display: block;
.tunability {
width: 100%;
float: none;
&__input {
width: 100%;
}
}
}