Merge pull request #2 from MorganDawe/master

little bit of cleaning up.

Author: jordandukart

.env

@@ -5,7 +5,8 @@
 .logo {
   height: 10vmin;
   pointer-events: none;
-  margin: 1.5rem auto;
+  max-height: 10vmin;
+  margin: .5rem;
 }
 
 .App-header {
@@ -16,26 +17,34 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
+  margin-bottom: .5rem;
 }
 
 .App-link {
   color: #61dafb;
 }
 
-.grid {
-  width: 100%;
-  display: inline-block;
-  position: relative;
-  max-width: 1165px;
-  margin: 0 auto;
-}
-
 .grid-sizer,
 .grid-item {
   width: 25%;
 }
 
+.grid {
+  margin: 0 auto;
+  max-width: 1165px;
+}
+
 .grid-item img {
   width: 100%;
   max-width: 100%;
 }
+
+.grid-item-inner {
+  margin: .5rem;
+  background-color: #282c34;
+  color: white;
+}
+
+.grid-item-data {
+  padding: .5rem;
+}

README.md

@@ -29,7 +29,7 @@ class App extends Component {
                     <img src={dgi_logo} className="logo" alt="logo" />
                 </header>
 
-                <Gallery islandora_data={this.state.data}/>
+                <Gallery elements={this.state.data}/>
             </div>
         );
     }

src/App.css

@@ -11,18 +11,20 @@ const masonryOptions = {
 class Gallery extends React.Component {
 
    render() {
-        const islandoraNodes = this.props.islandora_data.map(function(obj_data){
-            return (
-                <div key={obj_data.uuid} className="grid-item">
-                    <div className="grid-item-inner">
-                        <a href={obj_data.path} title={obj_data.name} target="_blank" rel="noopener noreferrer">
-                            <img src={obj_data.img_src} alt={obj_data.name}/>
-                            <h2>{obj_data.name}</h2>
-                        </a>
-                    </div>
-                </div>
-            );
-        });
+       const childElements = this.props.elements.map(function(element){
+           return (
+               <div key={element.uuid} className="grid-item">
+                   <div className={'grid-item-inner'}>
+                       <div className={'grid-item-data'}>
+                           <a href={element.path} target={"_blank"} rel="noopener noreferrer">
+                               <img src={element.img_src} alt={element.name} title={element.name} />
+                           </a>
+                           <h2>{element.name}</h2>
+                       </div>
+                   </div>
+               </div>
+           );
+       });
 
         return (
             <Masonry
@@ -33,7 +35,7 @@ class Gallery extends React.Component {
                 updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
             >
                 <div className="grid-sizer"></div>
-                {islandoraNodes}
+                {childElements}
             </Masonry>
         );
     }