From e40af6185b9cd6d76691b987563bc80fd92061e7 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 10 Apr 2018 21:02:19 +1200
Subject: [PATCH] Grid type as a classname for tailoring thumbnails

---
 src/js/components/GridItem.js  |  2 +-
 src/js/components/Thumbnail.js | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js
index 3a562414..1d575a70 100755
--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@@ -98,7 +98,7 @@ export default class GridItem extends React.Component{
 		}
 
 		return (
-			<div className="grid-item" onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
+			<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">
 					{item.name ? item.name : <span className="dark-grey-text">{item.uri}</span>}
diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js
index 027a9950..cfea0ef2 100755
--- a/src/js/components/Thumbnail.js
+++ b/src/js/components/Thumbnail.js
@@ -65,15 +65,21 @@ class Thumbnail extends React.Component{
 	}
 
 	render(){
-		var image = this.mapImageSizes()
-		var class_name = 'thumbnail '
-		if (this.props.size ) class_name += ' '+this.props.size
-		if (this.props.circle ) class_name += ' circle'
-		if (this.props.className ) class_name += ' '+this.props.className
+		var image = this.mapImageSizes();
+		var class_name = 'thumbnail ';
+		if (this.props.size){
+			class_name += ' '+this.props.size;
+		}
+		if (this.props.circle){
+			class_name += ' circle';
+		}
+		if (this.props.className){
+			class_name += ' '+this.props.className;
+		}
 		
-		var zoom_icon = null
+		var zoom_icon = null;
 		if (this.props.canZoom){
-			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search" /></span>
+			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search" /></span>;
 		}
 
 		return (