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

Single-row grids

Browse Source
This commit is contained in:
James Barnsley
2017-09-03 16:10:32 +12:00
parent 285573284d
commit 0f126b3f14
6 changed files with 65 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,9 @@ class AlbumGrid extends React.Component{
render(){
if( this.props.albums ){
var className = "grid album-grid"
if( this.props.className ) className += ' '+this.props.className
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
return (
<div className={className}>
{

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

@ -30,7 +30,9 @@ class ArtistGrid extends React.Component{
render(){
if( this.props.artists ){
var className = "grid artist-grid"
if( this.props.className ) className += ' '+this.props.className
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
return (
<div className={className}>
{

3
src/js/components/PlaylistGrid.js
View File

@ -30,7 +30,8 @@ class PlaylistGrid extends React.Component{
if( !this.props.playlists ) return null
var className = "grid playlist-grid"
if( this.props.className ) className += ' '+this.props.className
if (this.props.className) className += ' '+this.props.className
if (this.props.single_row) className += ' single-row'
return (
<div className={className}>
{

6
src/js/views/Search.js
View File

@ -146,7 +146,7 @@ class Search extends React.Component{
<section>
<div className="inner">
<h4>Artists</h4>
<ArtistGrid show_source_icon artists={artists.slice(0,5)} />
<ArtistGrid show_source_icon single_row artists={artists.slice(0,5)} />
</div>
</section>
)
@ -159,7 +159,7 @@ class Search extends React.Component{
<section>
<div className="inner">
<h4>Albums</h4>
<AlbumGrid show_source_icon albums={albums.slice(0,5)} />
<AlbumGrid show_source_icon single_row albums={albums.slice(0,5)} />
</div>
</section>
)
@ -172,7 +172,7 @@ class Search extends React.Component{
<section>
<div className="inner">
<h4>Playlists</h4>
<PlaylistGrid show_source_icon playlists={playlists.slice(0,5)} />
<PlaylistGrid show_source_icon single_row playlists={playlists.slice(0,5)} />
</div>
</section>
)

4
src/js/views/discover/DiscoverRecommendations.js
View File

@ -209,11 +209,11 @@ class Discover extends React.Component{
<div className="content-wrapper recommendations-results">
<section>
<h4>Artists</h4>
<ArtistGrid artists={artists} />
<ArtistGrid single_row artists={artists} />
</section>
<section>
<h4>Albums</h4>
<AlbumGrid albums={albums} />
<AlbumGrid single_row albums={albums} />
</section>
<section>
<h4>Tracks</h4>

54
src/scss/components/_grid.scss
View File

@ -77,12 +77,22 @@
&.mini {
.grid-item {
@include grid_item( 3 )
}
}
&.single-row {
.grid-item:nth-child(1n+4){
display: none;
}
}
}
&:not(.mini){
.grid-item {
@include grid_item( 5 )
}
&.single-row {
.grid-item:nth-child(1n+6){
display: none;
}
}
}
}
@ -90,12 +100,22 @@
&.mini {
.grid-item {
@include grid_item( 2 )
}
}
&.single-row {
.grid-item:nth-child(1n+3){
display: none;
}
}
}
&:not(.mini){
.grid-item {
@include grid_item( 4 )
}
&.single-row {
.grid-item:nth-child(1n+5){
display: none;
}
}
}
}
@ -104,11 +124,21 @@
.grid-item {
@include grid_item( 2 )
}
&.single-row {
.grid-item:nth-child(1n+3){
display: none;
}
}
}
&:not(.mini){
.grid-item {
@include grid_item( 4 )
}
&.single-row {
.grid-item:nth-child(1n+5){
display: none;
}
}
}
}
@ -117,11 +147,21 @@
.grid-item {
@include grid_item( 6, 2%, 4% )
}
&.single-row {
.grid-item:nth-child(1n+7){
display: none;
}
}
}
&:not(.mini){
.grid-item {
@include grid_item( 3, 2%, 4% )
}
&.single-row {
.grid-item:nth-child(1n+4){
display: none;
}
}
}
}
@ -130,11 +170,21 @@
.grid-item {
@include grid_item( 3, 2%, 4% )
}
&.single-row {
.grid-item:nth-child(1n+4){
display: none;
}
}
}
&:not(.mini){
.grid-item {
@include grid_item( 2, 2%, 4% )
}
&.single-row {
.grid-item:nth-child(1n+3){
display: none;
}
}
}
}
}