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

Basic responsive

Browse Source
This commit is contained in:
James Barnsley
2016-11-22 11:10:30 +13:00
parent 8ba3ef3b46
commit d827f181b7
10 changed files with 174 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/components/FullPlayer.js
View File

@ -78,8 +78,8 @@ class FullPlayer extends React.Component{
{ this.renderArtwork() }
<div className="current-track">
<div className="title">{ this.props.current_track ? this.props.current_track.name : null }</div>
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : null }
<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
<div className="controls cf">

8
src/js/components/MiniPlayer.js
View File

@ -31,8 +31,8 @@ class MiniPlayer extends React.Component{
<div className="player">
<div className="current-track">
<div className="title">{ this.props.current_track ? this.props.current_track.name : null }</div>
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : null }
<div className="title">{ this.props.current_track ? this.props.current_track.name : <span>-</span> }</div>
{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
</div>
<div className="controls">
@ -41,8 +41,10 @@ class MiniPlayer extends React.Component{
<FontAwesome name="step-forward" />
</a>&nbsp;
<VolumeControl />
<ProgressSlider />
</div>
<ProgressSlider />
</div>
);
}

2
src/js/components/ProgressSlider.js
View File

@ -67,7 +67,7 @@ class ProgressSlider extends React.Component{
}
return (
<div className='slider horizontal' onClick={ (e) => this.handleClick(e) } >
<div className='progress slider horizontal' onClick={ (e) => this.handleClick(e) } >
<div className="track">
<div className="progress" style={{ width: (percent)+'%' }}></div>
</div>

122
src/js/components/Sidebar.js
View File

@ -22,73 +22,77 @@ class Sidebar extends React.Component{
render(){
return (
<aside>
{ this.props.current_track && this.props.current_track.album.images ? <Thumbnail size="large" images={this.props.current_track.album.images} /> : null }
<SearchForm context="sidebar" />
<div className="liner">
<nav>
<SearchForm context="sidebar" />
<section>
<Link activeClassName="active" to="/queue">
<Icon name="play" className="white" />
Now playing
</Link>
</section>
<nav>
<section>
<title>Discover</title>
<Link activeClassName="active" to="/discover">
<Icon name="compass" className="white" />
Discover
</Link>
<Link activeClassName="active" to="/discover/categories">
<Icon name="grid" className="white" />
Genre / Mood
</Link>
<Link activeClassName="active" to="/discover/featured">
<Icon name="star" className="white" />
Featured playlists
</Link>
<Link activeClassName="active" to="/discover/new-releases">
<Icon name="leaf" className="white" />
New releases
</Link>
</section>
<section>
<Link activeClassName="active" to="/queue">
<Icon name="play" className="white" />
Now playing
</Link>
</section>
<section>
<title>My Music</title>
<Link activeClassName="active" to="/library/playlists">
<Icon name="playlist" className="white" />
Playlists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/artists" : null}>
<Icon name="mic" className="white" />
Artists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/albums" : null}>
<Icon name="cd" className="white" />
Albums
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/tracks" : null}>
<Icon name="music" className="white" />
Tracks
</Link>
<Link activeClassName="active" to="/library/local">
<Icon name="folder" className="white" />
Local
</Link>
</section>
<section>
<title>Discover</title>
<Link activeClassName="active" to="/discover">
<Icon name="compass" className="white" />
Discover
</Link>
<Link activeClassName="active" to="/discover/categories">
<Icon name="grid" className="white" />
Genre / Mood
</Link>
<Link activeClassName="active" to="/discover/featured">
<Icon name="star" className="white" />
Featured playlists
</Link>
<Link activeClassName="active" to="/discover/new-releases">
<Icon name="leaf" className="white" />
New releases
</Link>
</section>
<section>
<Link activeClassName="active" to="/settings">
<Icon name="cog" className="white" />
Settings
{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
</Link>
</section>
<section>
<title>My Music</title>
<Link activeClassName="active" to="/library/playlists">
<Icon name="playlist" className="white" />
Playlists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/artists" : null}>
<Icon name="mic" className="white" />
Artists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/albums" : null}>
<Icon name="cd" className="white" />
Albums
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? "/library/tracks" : null}>
<Icon name="music" className="white" />
Tracks
</Link>
<Link activeClassName="active" to="/library/local">
<Icon name="folder" className="white" />
Local
</Link>
</section>
</nav>
<section>
<Link activeClassName="active" to="/settings">
<Icon name="cog" className="white" />
Settings
{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
</Link>
</section>
</nav>
</div>
<Dropzones />
<MiniPlayer />