From 40286018971ea8c62b77b62c102d1ab99f447cf9 Mon Sep 17 00:00:00 2001 From: bill bittner <bittner.w@gmail.com> Date: Thu, 4 Jan 2018 12:04:23 -0800 Subject: [PATCH] fixed css so dropzone is full screen --- public/bundle/bundle.js | 6 +++--- react/components/dropzone.jsx | 4 ++-- react/uploader.js | 2 +- views/index.handlebars | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/public/bundle/bundle.js b/public/bundle/bundle.js index 38693086..1c9ca85e 100644 --- a/public/bundle/bundle.js +++ b/public/bundle/bundle.js @@ -1034,7 +1034,7 @@ var Uploader = function (_React$Component) { value: function render() { return _react2.default.createElement( 'div', - { className: 'row row--tall' }, + { className: 'row row--tall flex-container--column' }, this.state.showComponent === DROPZONE && _react2.default.createElement(_dropzone2.default, { stageFileAndShowDetails: this.stageFileAndShowDetails }), this.state.showComponent === DETAILS && _react2.default.createElement(_publishDetails2.default, { updateUploaderState: this.updateUploaderState, @@ -18527,7 +18527,7 @@ var Dropzone = function (_React$Component) { value: function render() { return _react2.default.createElement( 'div', - { className: 'row row--tall' }, + { className: 'row row--tall flex-container--column' }, _react2.default.createElement( 'form', null, @@ -18535,7 +18535,7 @@ var Dropzone = function (_React$Component) { ), _react2.default.createElement( 'div', - { id: 'primary-dropzone', className: 'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over'), onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragEnd: this.handleDragEnd, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onClick: this.handleClick }, + { id: 'primary-dropzone', className: 'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver ? ' dropzone--drag-over' : ''), onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragEnd: this.handleDragEnd, onDragEnter: this.handleDragEnter, onDragLeave: this.handleDragLeave, onClick: this.handleClick }, this.state.dragOver ? _react2.default.createElement( 'div', { id: 'dropbzone-dragover' }, diff --git a/react/components/dropzone.jsx b/react/components/dropzone.jsx index 34e8ee23..32c05399 100644 --- a/react/components/dropzone.jsx +++ b/react/components/dropzone.jsx @@ -112,11 +112,11 @@ class Dropzone extends React.Component { } render () { return ( - <div className="row row--tall"> + <div className="row row--tall flex-container--column"> <form> <input className="input-file" type="file" id="file_input" name="file_input" accept="video/*,image/*" onChange={this.handleFileInput} encType="multipart/form-data"/> </form> - <div id="primary-dropzone" className={'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver && ' dropzone--drag-over')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}> + <div id="primary-dropzone" className={'dropzone row row--padded row--tall flex-container--column flex-container--center-center' + (this.state.dragOver ? ' dropzone--drag-over' : '')} onDrop={this.handleDrop} onDragOver={this.handleDragOver} onDragEnd={this.handleDragEnd} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onClick={this.handleClick}> { this.state.dragOver ? ( <div id="dropbzone-dragover"> <p className="blue">Drop it.</p> diff --git a/react/uploader.js b/react/uploader.js index 081f3dd5..65f06ea3 100644 --- a/react/uploader.js +++ b/react/uploader.js @@ -48,7 +48,7 @@ class Uploader extends React.Component { } render () { return ( - <div className="row row--tall"> + <div className="row row--tall flex-container--column"> { this.state.showComponent === DROPZONE && <Dropzone stageFileAndShowDetails={this.stageFileAndShowDetails}/> } diff --git a/views/index.handlebars b/views/index.handlebars index 0dbacdb8..74c9e708 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,5 +1,5 @@ <div class="row row--tall flex-container--column"> - <div id="react-uploader" class="row row--padded row--tall"> + <div id="react-uploader" class="row row--padded row--tall flex-container--column"> <div class="row row--padded row--tall flex-container--column flex-container--center-center"> <img src="/assets/img/loading.gif" alt="loading"> </div>