fix(gallery.jsx): CSS files are required

This is a breaking change that requires integrators to either <link> the gallery.css file or import it themselves (assuming the proper Webpack/bundler CSS loader is in use).
fixes #50

Author: rnicholus

README.md

@@ -307,6 +307,9 @@ import React, { Component } from 'react'
 import FineUploaderTraditional from 'react-fine-uploader'
 import Gallery from 'react-fine-uploader/components/gallery'
 
+// ...or load this specific CSS file using a <link> tag in your document
+import 'react-fine-uploader/components/gallery/gallery.css'
+
 const uploader = new FineUploaderTraditional({
     options: {
         chunking: {

config/webpack.config.js

@@ -13,6 +13,7 @@ module.exports = {
     },
     resolve: {
         alias: {
+            lib: path.resolve('lib'),
             src: path.resolve('src'),
             test: path.resolve('src/test/unit')
         },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fine-uploader",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "description": "React UI components for using Fine Uploader in a React-based project.",
   "author":     {

src/components/file-input/styleable-element.css

@@ -1,13 +1,33 @@
 import React from 'react'
 
-import './styleable-element.css'
+const containerStyle = {
+    display: 'inline-block',
+    position: 'relative'
+}
+
+const inputStyle = {
+    bottom: 0,
+    cursor: 'pointer',
+    height: '100%',
+    left: 0,
+    margin: 0,
+    opacity: 0,
+    padding: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    width: '100%'
+}
 
 const StyleableFileInput = ({ children, className, onChange, ...params }) => (
-    <div className={ `react-fine-uploader-file-input-container ${className || ''}` }>
+    <div className={ `react-fine-uploader-file-input-container ${className || ''}` } 
+         style={ containerStyle }
+    >
         { children }
         <input { ...params }
                className='react-fine-uploader-file-input'
                onChange={ onChange }
+               style={ inputStyle }
                type='file'
         />
     </div>

src/components/file-input/styleable-element.jsx

@@ -13,7 +13,6 @@ import ProgressBar from '../progress-bar'
 import Status from '../status'
 import Thumbnail from '../thumbnail'
 
-import './gallery.css'
 import PauseIcon from './pause-icon'
 import PlayIcon from './play-icon'
 import UploadIcon from './upload-icon'

src/components/gallery/index.jsx

@@ -2,7 +2,6 @@ import React, { Component, PropTypes } from 'react'
 
 import Placeholder from './placeholder'
 
-import './thumbnail.css'
 import NotAvailablePlaceholder from './not-available-placeholder'
 import WaitingPlaceholder from './waiting-placeholder'
 

src/components/thumbnail/index.jsx

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 
 const Placeholder = ({ className, image, size, status }) => {
     const style = {
+        display: 'inline-block',
         maxHeight: size,
         maxWidth: size
     }

src/components/thumbnail/placeholder.jsx

@@ -1,8 +1,10 @@
 import React, { Component } from 'react'
 
-import Gallery from 'src/components/gallery'
-import S3FineUploader from 'src/wrappers/s3'
-import TraditionalFineUploader from 'src/wrappers/traditional'
+import Gallery from 'lib/components/gallery'
+import S3FineUploader from 'lib/wrappers/s3'
+import TraditionalFineUploader from 'lib/wrappers/traditional'
+
+import 'lib/components/gallery/gallery.css'
 
 const traditionalUploader = new TraditionalFineUploader({
     options: {