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

Placeholder for albums/artists/playlists a bit prettier

Browse Source
This commit is contained in:
James Barnsley
2017-02-24 08:40:08 +13:00
parent 4bb52070f8
commit 25d572e391
4 changed files with 126 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/js/views/Album.js
View File

@ -134,19 +134,26 @@ class Album extends React.Component{
<Thumbnail size="large" />
<div className="title">
<div className="source grey-text">
<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} album
<span className="placeholder"></span>
</div>
<h1 className="grey-text">{ this.props.params.uri }</h1>
<h1>
<span className="placeholder"></span>
</h1>
<ul className="details">
<li>
0 tracks,
0 mins
<span className="placeholder"></span>
</li>
</ul>
</div>
<div className="actions">
<button className="primary" onClick={e => this.play()}>Play</button>
<button className="placeholder">&nbsp;</button>
</div>
<section className="list-wrapper">
<span className="placeholder"></span>
<span className="placeholder"></span>
<span className="placeholder"></span>
</section>
</div>
);

47
src/js/views/Artist.js
View File

@ -216,10 +216,55 @@ class Artist extends React.Component{
<Parallax />
<div className="liner">
<Thumbnail circle />
<h1 className="grey-text">{this.props.params.uri}</h1>
<h1>
<span className="placeholder"></span>
</h1>
<div className="actions">
<button className="placeholder">&nbsp;</button>
<button className="placeholder">&nbsp;</button>
</div>
{ this.renderSubViewMenu() }
</div>
</div>
<div className="body overview">
<div className="col w70">
<h4 className="left-padding">
<span className="placeholder"></span>
</h4>
<div className="list-wrapper">
<span className="placeholder"></span>
<span className="placeholder"></span>
<span className="placeholder"></span>
</div>
</div>
<div className="col w5"></div>
<div className="col w25 related-artists">
<h4>
<span className="placeholder"></span>
</h4>
<div className="list-wrapper">
<span className="placeholder"></span>
<span className="placeholder"></span>
<span className="placeholder"></span>
</div>
</div>
<div className="cf"></div>
<h4 className="left-padding">
<span className="placeholder"></span>
</h4>
<section className="grid-wrapper no-top-padding">
<div className="grid">
<span className="grid-item placeholder"></span>
<span className="grid-item placeholder"></span>
<span className="grid-item placeholder"></span>
</div>
</section>
</div>
</div>
);
}

14
src/js/views/Playlist.js
View File

@ -178,19 +178,23 @@ class Playlist extends React.Component{
<Thumbnail size="large" />
<div className="title">
<div className="source grey-text">
<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist
<span className="placeholder"></span>
</div>
<h1 className="grey-text">{ this.props.params.uri }</h1>
<h1><span className="placeholder"></span></h1>
<ul className="details">
<li>
0 tracks,
0 mins
<span className="placeholder"></span>
</li>
</ul>
</div>
<div className="actions">
<button className="primary" onClick={ e => this.play() }>Play</button>
<button className="placeholder">&nbsp;</button>
</div>
<section className="list-wrapper">
<span className="placeholder"></span>
<span className="placeholder"></span>
<span className="placeholder"></span>
</section>
</div>
)
}

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

@ -111,6 +111,65 @@ h4 {
}
}
.placeholder {
display: inline-block;
height: 1.2em;
width: 100px;
max-width: 100%;
background: rgba(150,150,150,0.15);
pointer-events: none !important;
}
h1 .placeholder {
width: 50%;
}
h2 .placeholder,
h3 .placeholder,
h4 .placeholder {
max-width: 50%;
width: 150px;
}
button.placeholder {
border-color: transparent;
height: auto;
}
.list-wrapper .placeholder {
display: block;
width: auto;
margin: 25px 40px;
height: 10px;
}
.grid-wrapper .placeholder {
height: auto;
&:after {
content: ' ';
display: block;
padding-bottom: 100%;
}
}
.related-artists .list-wrapper .placeholder {
position: relative;
margin: 40px 20px 50px 65px;
&:after {
content: ' ';
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(150,150,150,0.15);
position: absolute;
top: -20px;
left: -65px;
}
}
.no-top-padding { padding-top: 0 !important; }
.no-bottom-padding { padding-bottom: 0 !important; }
.no-right-padding { padding-right: 0 !important; }