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 />

2
src/js/views/library/LibraryAlbums.js
View File

@ -17,7 +17,7 @@ import * as spotifyActions from '../../services/spotify/actions'
class LibraryAlbums extends React.Component{
constructor(props) {
super(props);
super(props)
}
componentDidMount(){

58
src/scss/components/_player.scss
View File

@ -47,9 +47,61 @@
.slider.horizontal {
margin-bottom: 0;
&.animating {
.progress{
/* @include animate(10s); */
.progress{
@include animate(1s);
}
}
aside & {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 14px;
color: #FFFFFF;
.artist-sentence {
.artist:hover {
border-color: #FFFFFF !important;
}
}
@include responsive( $bp_medium, $bp_shallow ){
position: fixed;
background: $dark_grey;
.controls {
position: absolute;
top: 10px;
left: 10px;
a {
padding: 13px;
}
.volume-control {
display: none;
}
}
.slider.progress {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
height: 2px;
.track {
top: 0px;
background: transparent;
}
}
.current-track {
font-size: 12px;
padding-bottom: 0;
}
}
}

5
src/scss/components/_sidebar-toggle-button.scss
View File

@ -9,6 +9,11 @@
color: #FFFFFF;
font-size: 18px;
cursor: pointer;
display: none;
@include responsive( $bp_medium ){
display: block;
}
&.open {
.open {

37
src/scss/components/_sidebar.scss
View File

@ -1,16 +1,27 @@
aside{
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 95;
background: #111111;
width: 200px;
overflow: hidden;
box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);
@include responsive( 800px ){
.liner {
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
z-index: 2;
}
@include responsive( $bp_medium ){
width: 50%;
left: -50%;
@ -18,6 +29,12 @@ aside{
left: 0px;
}
}
@include responsive( null, $bp_shallow ){
.liner {
bottom: 60px;
}
}
.thumbnail {
position: absolute;
@ -87,20 +104,4 @@ aside{
}
}
.player {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
padding: 14px;
color: #FFFFFF;
.artist-sentence {
.artist:hover {
border-color: #FFFFFF !important;
}
}
}
}

6
src/scss/global/_core.scss
View File

@ -17,7 +17,11 @@ main,
footer {
margin-left: 200px;
@include responsive( 800px ){
@include responsive( null, $bp_shallow ){
padding-bottom: 60px;
}
@include responsive( $bp_medium ){
margin-left: 0;
.sidebar-open & {

21
src/scss/global/_variables.scss
View File

@ -9,6 +9,11 @@ $red: #cf2d2d;
$green: #47af2a;
$blue: #32b5f2;
$bp_wide: 1000px;
$bp_medium: 800px;
$bp_narrow: 350px;
$bp_shallow: 700px;
@mixin one_line_text {
white-space: nowrap;
overflow: hidden;
@ -46,9 +51,19 @@ $blue: #32b5f2;
filter: blur( $size );
}
@mixin responsive( $width ){
@media (max-width: $width){
@content;
@mixin responsive( $width: null, $height: null ){
@if $width && $height {
@media( max-width: $width ), ( max-height: $height ){
@content;
}
}@else if $width {
@media( max-width: $width ){
@content;
}
}@else if $height {
@media( max-height: $height ){
@content;
}
}
}