Tweaking font sizes and grid BEM

This commit is contained in:
James Barnsley
2018-12-05 17:00:52 +13:00
parent 3d714eda7f
commit 55ad003e36
11 changed files with 141 additions and 140 deletions

View File

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

View File

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

View File

@ -13,7 +13,7 @@ export default class CategoryGrid extends React.Component{
render(){
if (!this.props.categories ) return null
var className = "grid category-grid"
var className = "grid grid--categories"
if (this.props.className ) className += ' '+this.props.className
return (
<div className={className}>

View File

@ -108,12 +108,12 @@ export default class GridItem extends React.Component{
}
return (
<div className={"grid-item "+this.props.type+"-grid-item"} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" images={images} />
<div className="name">
<div className={"grid__item grid__item--"+this.props.type} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
<Thumbnail size="medium" className="grid__item__thumbnail" images={images} />
<div className="grid__item__name">
{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
</div>
<div className="secondary">
<div className="grid__item__secondary">
{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}
{this.renderSecondary(item)}
</div>

View File

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