Allow showing the images horizontally

Author: Aljullu

src/components/App/App.jsx

@@ -15,6 +15,7 @@ export default class App extends React.Component {
     this.state = {
       afterLoadText: 'afterLoad triggered',
       beforeLoadText: 'beforeLoad triggered',
+      direction: 'vertical',
       effect: '',
       showLowResImages: true,
       threshold: 100
@@ -46,11 +47,11 @@ export default class App extends React.Component {
   }
 
   render() {
-    const {afterLoadText, beforeLoadText,
+    const {afterLoadText, beforeLoadText, direction,
       effect, showLowResImages, threshold} = this.state;
 
     return (
-      <div>
+      <div className={'app ' + direction}>
         <form className="app-controls">
           <a href="https://github.com/Aljullu/react-lazy-load-image-component">
             <img
@@ -68,18 +69,6 @@ export default class App extends React.Component {
                 effect={effect}
                 onChange={this.onChangeEffect()} />
             </p>
-          </fieldset>
-          <br />
-          <fieldset className="app-controls-fieldset">
-            <p>
-              <label>
-                <input className="app-controls-number"
-                  type="number"
-                  onChange={this.onChangeNumber('threshold')}
-                  value={threshold} />
-                threshold <small>(px)</small>
-              </label>
-            </p>
             <p>
               <label>
                 <input className="app-controls-checkbox"
@@ -95,6 +84,37 @@ export default class App extends React.Component {
             </p>
           </fieldset>
           <br />
+          <fieldset className="app-controls-fieldset">
+            <p>
+              Direction:<br/>
+              <label>
+                <input type="radio"
+                  checked={direction === 'vertical'}
+                  name="direction"
+                  onChange={this.onChangeText('direction')}
+                  value="vertical" />
+                Vertical
+              </label>
+              <label>
+                <input type="radio"
+                  checked={direction === 'horizontal'}
+                  name="direction"
+                  onChange={this.onChangeText('direction')}
+                  value="horizontal" />
+                Horizontal
+              </label>
+            </p>
+            <p>
+              <label>
+                <input className="app-controls-number"
+                  type="number"
+                  onChange={this.onChangeNumber('threshold')}
+                  value={threshold} />
+                threshold <small>(px)</small>
+              </label>
+            </p>
+          </fieldset>
+          <br />
           <fieldset className="app-controls-fieldset">
             <p>
               Text that will be displayed in the console when the
@@ -122,6 +142,7 @@ export default class App extends React.Component {
         <Gallery
           afterLoadText={afterLoadText}
           beforeLoadText={beforeLoadText}
+          direction={direction}
           effect={effect}
           showLowResImages={showLowResImages}
           threshold={threshold} />

src/components/App/app.css

@@ -22,13 +22,25 @@ h1 {
   margin: 0 0 .5em;
 }
 
+.app.horizontal {
+  width: -moz-min-content;
+  width: -webkit-min-content;
+  width: min-content;
+}
+
 .app-controls {
   background: #fff;
   border: 1px solid #ddd;
+  box-sizing: border-box;
   box-shadow: 0 3px 5px #ddd;
-  margin: 1em auto;
-  max-width: 1034px;
+  margin: 1em 20vw;
   padding: 1em 1.5em 1em;
+  width: 60vw;
+}
+
+.app.horizontal .app-controls {
+  position: sticky;
+  left: 0;
 }
 
 .app-controls-github {

src/components/Gallery/Gallery.jsx

@@ -20,12 +20,12 @@ export class Gallery extends React.Component {
   }
 
   render() {
-    const {afterLoadText, beforeLoadText, effect,
+    const {afterLoadText, beforeLoadText, effect, direction,
       scrollPosition, showLowResImages, threshold} = this.props;
     const photos = getPhotos();
 
     return (
-      <div className="gallery">
+      <div className={ 'gallery ' + direction }>
         {photos.map((photo) =>
           <LazyLoadImage
             alt={photo.src}
@@ -50,6 +50,8 @@ export class Gallery extends React.Component {
 Gallery.propTypes = {
   afterLoadText: PropTypes.string.isRequired,
   beforeLoadText: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf([
+    'horizontal', 'vertical']).isRequired,
   effect: PropTypes.oneOf([
     'black-and-white', 'blur', 'opacity', '']).isRequired,
   showLowResImages: PropTypes.bool.isRequired,

src/components/Gallery/gallery.css

@@ -3,17 +3,20 @@
   max-width: 1034px;
 }
 
-.gallery-img,
-.gallery-img-wrapper {
-  float: left;
-  margin-bottom: 10px;
+.gallery.horizontal {
+  max-width: none;
+  white-space: nowrap;
 }
 
-.gallery-img:nth-child(2n),
-.gallery-img-wrapper:nth-child(2n) {
+.gallery.horizontal .gallery-img-wrapper {
   margin-left: 10px;
 }
 
-.gallery-img-wrapper > .gallery-img {
-  margin: 0;
+.gallery:not(.horizontal) .gallery-img-wrapper {
+  float: left;
+  margin-bottom: 10px;
+}
+
+.gallery:not(.horizontal) .gallery-img-wrapper:nth-child(2n) {
+  margin-left: 10px;
 }