Button BEM (.light needs patching); Removing first from featured/new

This commit is contained in:
James Barnsley
2018-12-05 21:39:06 +13:00
parent 55ad003e36
commit 5ad32435a3
36 changed files with 11217 additions and 14962 deletions

View File

@ -4,16 +4,18 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Link from '../../components/Link';
import PlaylistGrid from '../../components/PlaylistGrid'
import Header from '../../components/Header'
import Icon from '../../components/Icon'
import Parallax from '../../components/Parallax'
import Thumbnail from '../../components/Thumbnail'
import PlaylistGrid from '../../components/PlaylistGrid';
import Header from '../../components/Header';
import Icon from '../../components/Icon';
import Parallax from '../../components/Parallax';
import Thumbnail from '../../components/Thumbnail';
import URILink from '../../components/URILink';
import Dater from '../../components/Dater';
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
import * as mopidyActions from '../../services/mopidy/actions';
import * as spotifyActions from '../../services/spotify/actions';
class DiscoverFeatured extends React.Component{
@ -48,20 +50,6 @@ class DiscoverFeatured extends React.Component{
return (
<div className="intro preserve-3d">
<Parallax image={playlist.images ? playlist.images.large : null} blur />
<div className="content cf">
<Link
to={global.baseURL+'playlist/'+playlist.uri}
onContextMenu={e => this.handleContextMenu(e,playlist)}>
<Thumbnail images={playlist.images} />
</Link>
<Link to={global.baseURL+'playlist/'+playlist.uri}>
<h2>{playlist.name}</h2>
</Link>
{playlist.description ? <h3 dangerouslySetInnerHTML={{__html: playlist.description}}></h3> : null}
<div className="actions">
<button className="primary" onClick={e => this.playPlaylist(e,playlist)}>Play</button>
</div>
</div>
</div>
)
} else {
@ -98,11 +86,8 @@ class DiscoverFeatured extends React.Component{
}
}
// Pull the first playlist out and we'll use this as a banner
var first_playlist = playlists.splice(0,1)
if (first_playlist){
first_playlist = first_playlist[0]
}
// Pull the first playlist out and we'll use this for the parallax artwork
var first_playlist = playlists[0];
var options = (
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.props.spotifyActions.getFeaturedPlaylists()}}>

View File

@ -61,24 +61,6 @@ class DiscoverNewReleases extends React.Component{
return (
<div className="intro preserve-3d">
<Parallax image={album.images ? album.images.large : null} blur />
<div className="content cf">
<Link
to={global.baseURL+'album/'+album.uri}
onContextMenu={e => this.handleContextMenu(e,album)}>
<Thumbnail images={album.images} />
</Link>
<h2>
<Link to={global.baseURL+'album/'+album.uri}>
{album.name}
</Link>
</h2>
<h3>
<ArtistSentence artists={album.artists} />
</h3>
<div className="actions">
<button className="primary" onClick={e => this.playAlbum(e,album)}>Play</button>
</div>
</div>
</div>
)
} else {
@ -115,9 +97,9 @@ class DiscoverNewReleases extends React.Component{
}
// Pull the first playlist out and we'll use this as a banner
var first_album = albums.splice(0,1)
var first_album = albums[0];
if (first_album){
first_album = helpers.collate(first_album[0], {artists: this.props.artists});
first_album = helpers.collate(first_album, {artists: this.props.artists});
}
var options = (

View File

@ -462,7 +462,7 @@ class Discover extends React.Component{
Tracks
<div className="pull-right">
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
<button className="primary" onClick={e => this.playTracks(e)}>Play all</button>
<button className="button button--primary" onClick={e => this.playTracks(e)}>Play all</button>
</div>
</h4>
<TrackList className="discover-track-list" uri={uri} tracks={tracks} />
@ -516,23 +516,23 @@ class Discover extends React.Component{
<Parallax image="assets/backgrounds/discover.jpg" />
<div className="liner">
<div className="intro__liner">
<h1>Explore new music</h1>
<h2 className="mid_grey-text">
Add seeds and musical properties below to build your sound
</h2>
<div className="parameters">
<div className="intro__parameters">
{this.renderSeeds()}
{this.renderTunabilities()}
{this.state.seeds.length > 5 ? <p className="message error">Too many seeds! You can use up to a total of 5 seed tracks, artists and genres.</p> : null}
</div>
<div className="actions">
<div className="intro__actions">
<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="default" handleChange={val => {this.toggleTunability(val)}} />
<span className={"submit button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
<span className={"submit button button--primary button--large"+(is_loading ? " button--working" : "")} onClick={e => this.getRecommendations()}>
<Icon name="explore" />&nbsp;
Find recommendations
</span>