More flex to discover

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

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