Artist responsive

This commit is contained in:
James Barnsley
2017-07-27 07:48:31 +12:00
parent e3a5316bac
commit cf65264219
4 changed files with 17 additions and 12 deletions

View File

@ -72,9 +72,9 @@ class Queue extends React.Component{
var link = null
if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
return (
<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link}>
{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
<Thumbnail size="huge" image={image} canZoom />
<Thumbnail size="huge" image={image} />
</Link>
)
}

View File

@ -115,12 +115,12 @@
@include responsive( 799px, 500px ){
&.mini{
.grid-item {
@include grid_item( 6 )
@include grid_item( 6, 3%, 5% )
}
}
&:not(.mini){
.grid-item {
@include grid_item( 3 )
@include grid_item( 3, 3%, 5% )
}
}
}
@ -128,12 +128,12 @@
@include responsive( 499px ){
&.mini{
.grid-item {
@include grid_item( 3 )
@include grid_item( 3, 4%, 5% )
}
}
&:not(.mini){
.grid-item {
@include grid_item( 2 )
@include grid_item( 2, 4%, 5% )
}
}
}

View File

@ -127,10 +127,10 @@ $bp_shallow: 650px;
* Produces most album/playlist/artist grids
**/
@mixin grid_item( $cols, $gap: 2% ){
@mixin grid_item( $cols, $gap: 2%, $bottom_margin: 3% ){
width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
box-sizing: border-box;
margin: 0 $gap 3%;
margin: 0 $gap $bottom_margin;
&:nth-child(#{$cols}n-#{$cols}) {
margin-right: 0;

View File

@ -95,15 +95,13 @@
margin-bottom: 0;
.parallax {
canvas {
@include blur(5px);
}
height: 60vh;
}
.liner {
padding-left: 0;
padding-right: 0;
padding-top: 10vh;
padding-top: 30vh;
.thumbnail {
position: static;
@ -133,7 +131,11 @@
}
}
.body {
&.overview {
h4 {
display: none;
}
.col.w70 {
width: 100%;
}
@ -141,6 +143,9 @@
.related-artists {
display: none;
}
.grid-wrapper {
padding-top: 40px !important;
}
}
&.about {