Merge pull request #278 from sharetribe/createlisting-fix-mobile-layout

Createlisting fix mobile layout

src/components/AddImages/AddImages.js

@@ -58,7 +58,9 @@ class Thumbnail extends Component {
             </li>
           );
         }}
-        renderRejected={() => <li className={css.thumbnail}><FormattedMessage id="AddImages.couldNotReadFile" /></li>}
+        renderRejected={() => (
+          <li className={css.thumbnail}><FormattedMessage id="AddImages.couldNotReadFile" /></li>
+        )}
       />
     );
   }

src/components/LocationAutocompleteInput/LocationAutocompleteInput.js

@@ -379,11 +379,15 @@ class LocationAutocompleteInput extends Component {
       iconClassName,
       inputClassName,
       predictionsClassName,
+      validClassName,
       placeholder,
       input,
+      meta,
     } = this.props;
     const { name, onFocus } = input;
     const { search, predictions } = currentValue(this.props);
+    const { touched, valid } = meta || {};
+    const isValid = valid && touched;
 
     const handleOnFocus = e => {
       this.setState({ inputHasFocus: true });
@@ -392,7 +396,7 @@ class LocationAutocompleteInput extends Component {
 
     const rootClass = classNames(rootClassName || css.root, className);
     const iconClass = classNames(css.icon, iconClassName);
-    const inputClass = classNames(css.input, inputClassName);
+    const inputClass = classNames(css.input, inputClassName, { [validClassName]: isValid });
     const predictionsClass = classNames(predictionsClassName);
 
     // Only render predictions when the input has focus. For
@@ -442,7 +446,9 @@ LocationAutocompleteInput.defaultProps = {
   iconClassName: null,
   inputClassName: null,
   predictionsClassName: null,
+  validClassName: null,
   placeholder: '',
+  meta: null,
 };
 
 LocationAutocompleteInput.propTypes = {
@@ -453,6 +459,7 @@ LocationAutocompleteInput.propTypes = {
   iconClassName: string,
   inputClassName: string,
   predictionsClassName: string,
+  validClassName: string,
   placeholder: string,
   input: shape({
     name: string.isRequired,
@@ -465,6 +472,10 @@ LocationAutocompleteInput.propTypes = {
     onFocus: func.isRequired,
     onBlur: func.isRequired,
   }).isRequired,
+  meta: shape({
+    valid: bool.isRequired,
+    touched: bool.isRequired,
+  }),
 };
 
 export default LocationAutocompleteInput;
@@ -496,7 +507,13 @@ class LocationAutocompleteInputFieldComponent extends Component {
   }
 }
 
-LocationAutocompleteInputFieldComponent.defaultProps = { rootClassName: null, labelClassName: null, type: null, label: null, clearOnUnmount: false };
+LocationAutocompleteInputFieldComponent.defaultProps = {
+  rootClassName: null,
+  labelClassName: null,
+  type: null,
+  label: null,
+  clearOnUnmount: false,
+};
 
 LocationAutocompleteInputFieldComponent.propTypes = {
   rootClassName: string,
@@ -513,4 +530,3 @@ LocationAutocompleteInputFieldComponent.propTypes = {
 export const LocationAutocompleteInputField = props => {
   return <Field component={LocationAutocompleteInputFieldComponent} {...props} />;
 };
-

src/components/TabNav/TabNav.css

@@ -2,18 +2,9 @@
 
 .root {
   overflow-x: auto;
-
-  &::after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-  }
 }
 
 .tab {
-  float: left;
   margin-left: 24px;
 
   &:first-child {

src/components/index.js

@@ -18,7 +18,9 @@ import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
 import ListingCard from './ListingCard/ListingCard';
 import ListingCardSmall from './ListingCardSmall/ListingCardSmall';
-import LocationAutocompleteInput, { LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput';
+import LocationAutocompleteInput, {
+  LocationAutocompleteInputField,
+} from './LocationAutocompleteInput/LocationAutocompleteInput';
 import Map from './Map/Map';
 import MapPanel from './MapPanel/MapPanel';
 import Menu from './Menu/Menu';

src/containers/EditListingLocationForm/EditListingLocationForm.css

@@ -1,3 +1,5 @@
+@import '../../marketplace.css';
+
 .root {
   width: 100%;
   height: 100%;
@@ -7,14 +9,38 @@
 }
 
 .locationAutocompleteInput {
-  height: auto;
+  height: 36px;
   padding-left: 0;
+  border-bottom: 2px solid var(--attentionColor);
+
+  &:hover,
+  &:focus {
+    border-bottom-color: var(--matterColorDark);
+    outline: none;
+  }
 }
 
 .locationAutocompleteInputIcon {
   display: none;
 }
 
+.predictionsRoot {
+  position: absolute;
+  width: 100%;
+  padding-bottom: 98px;
+  top: 36px;
+  left: 0;
+  background-color: var(--marketplaceColor);
+  border-bottom-left-radius: var(--borderRadius);
+  border-bottom-right-radius: var(--borderRadius);
+  box-shadow: var(--boxShadowPopup);
+  z-index: var(--zIndexPopup + 1);
+}
+
+.validLocation {
+  border-bottom-color: var(--successColor);
+}
+
 .building {
   flex-shrink: 0;
   margin-top: 24px;

src/containers/EditListingLocationForm/EditListingLocationForm.js

@@ -45,6 +45,8 @@ export const EditListingLocationFormComponent = props => {
       <LocationAutocompleteInputField
         inputClassName={css.locationAutocompleteInput}
         iconClassName={css.locationAutocompleteInputIcon}
+        predictionsClassName={css.predictionsRoot}
+        validClassName={css.validLocation}
         autoFocus
         name="location"
         label={titleRequiredMessage}
@@ -74,7 +76,7 @@ export const EditListingLocationFormComponent = props => {
       </PrimaryButton>
     </form>
   );
-}
+};
 
 EditListingLocationFormComponent.defaultProps = {
   saveActionMsg: 'Next: pricing', // TODO: i18n

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -86,7 +86,7 @@ export class EditListingPhotosFormComponent extends Component {
           <FormattedMessage id="EditListingPhotosForm.imageTypes" />
         </span>
       </span>
-      );
+    );
 
     // TODO Add tip #2: re-order text
 

src/containers/EditListingPricingForm/EditListingPricingForm.js

@@ -22,7 +22,9 @@ export const EditListingPricingFormComponent = props => {
 
   const pricePerNightMessage = intl.formatMessage({ id: 'EditListingPricingForm.pricePerNight' });
   const priceRequiredMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceRequired' });
-  const pricePlaceholderMessage = intl.formatMessage({ id: 'EditListingPricingForm.priceInputPlaceholder' });
+  const pricePlaceholderMessage = intl.formatMessage({
+    id: 'EditListingPricingForm.priceInputPlaceholder',
+  });
 
   const classes = classNames(css.root, className);