diff --git a/src/components/AddImages/AddImages.css b/src/components/AddImages/AddImages.css index 386d326b..72eee1e0 100644 --- a/src/components/AddImages/AddImages.css +++ b/src/components/AddImages/AddImages.css @@ -1,4 +1,4 @@ -.imagesContainer { +.root { width: 100%; min-height: 120px; padding-left: 0; diff --git a/src/components/AddImages/AddImages.js b/src/components/AddImages/AddImages.js index e02c2706..44ffa487 100644 --- a/src/components/AddImages/AddImages.js +++ b/src/components/AddImages/AddImages.js @@ -9,6 +9,7 @@ */ import React, { Component, PropTypes } from 'react'; import { SortableContainer, SortableElement } from 'react-sortable-hoc'; +import classNames from 'classnames'; import { Promised } from '../../components'; import { uuid } from '../../util/propTypes'; import css from './AddImages.css'; @@ -76,9 +77,10 @@ const SortableImage = SortableElement(Thumbnail); // Create container where there are sortable images and passed children like "Add image" input etc. const SortableImages = SortableContainer(props => { - const { children, images } = props; + const { children, className, images } = props; + const classes = classNames(css.root, className); return ( -
    +
      {images.map((image, index) => )} {children}
    @@ -92,11 +94,12 @@ const AddImages = props => { return ; }; -AddImages.defaultProps = { images: [] }; +AddImages.defaultProps = { className: null, images: [] }; AddImages.propTypes = { images: array, children: node.isRequired, + className: string, onSortEnd: func.isRequired, }; diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css index 4dfb9217..f6fade30 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css @@ -5,6 +5,10 @@ flex-direction: column; } +.description { + flex-grow: 1; +} + .descriptionField { /* Font */ font-family: inherit; diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js index 2ebc1f83..be297643 100644 --- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js +++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js @@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react'; import { compose } from 'redux'; import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form'; import { intlShape, injectIntl } from 'react-intl'; +import classNames from 'classnames'; import { enhancedField } from '../../util/forms'; import { maxLength, required } from '../../util/validators'; import { Button } from '../../components'; @@ -18,11 +19,12 @@ export class EditListingDescriptionFormComponent extends Component { // to avoid losing focus. // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14 this.EnhancedInput = enhancedField('input'); - this.EnhancedTextArea = enhancedField('textarea'); + this.EnhancedTextArea = enhancedField('textarea', { rootClassName: css.description }); } render() { const { + className, disabled, handleSubmit, intl, @@ -54,8 +56,9 @@ export class EditListingDescriptionFormComponent extends Component { id: 'EditListingDescriptionForm.descriptionRequired', }); + const classes = classNames(css.root, className); return ( -
    +
    diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.css b/src/containers/EditListingLocationForm/EditListingLocationForm.css index e3d80601..69c20b82 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.css +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css @@ -5,6 +5,10 @@ flex-direction: column; } +.building { + flex-grow: 1; +} + .submitButton { margin-top: 1rem; } diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js index e35faa10..9bb10d0c 100644 --- a/src/containers/EditListingLocationForm/EditListingLocationForm.js +++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js @@ -3,6 +3,7 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; import { Field, reduxForm, formValueSelector, propTypes as formPropTypes } from 'redux-form'; import { intlShape, injectIntl } from 'react-intl'; +import classNames from 'classnames'; import * as propTypes from '../../util/propTypes'; import { enhancedField } from '../../util/forms'; import { autocompleteSearchRequired, autocompletePlaceSelected } from '../../util/validators'; @@ -18,11 +19,12 @@ export class EditListingLocationFormComponent extends Component { // to avoid losing focus. // See: https://github.com/erikras/redux-form/releases/tag/v6.0.0-alpha.14 this.EnhancedLocationAutocompleteInput = enhancedField(LocationAutocompleteInput); - this.EnhancedInput = enhancedField('input'); + this.EnhancedInput = enhancedField('input', { rootClassName: css.building }); } render() { const { + className, disabled, handleSubmit, intl, @@ -44,8 +46,10 @@ export class EditListingLocationFormComponent extends Component { id: 'EditListingLocationForm.buildingPlaceholder', }); + const classes = classNames(css.root, className); + return ( - + + const classes = classNames(css.root, className); - + return ( + + + +