Merge pull request #346 from sharetribe/newlisting-review

create and edit a listing review
2026-07-28 20:53:24 +10:00 · 2017-08-16 17:41:20 +03:00 · 2017-08-16 17:41:20 +03:00 · 3fc0d36d01
commit 3fc0d36d01
parent 98d521d836 5ad2944d4f
23 changed files with 139 additions and 66 deletions
--- a/src/components/AddImages/AddImages.css
+++ b/src/components/AddImages/AddImages.css
@ -21,6 +21,7 @@
  width: 100%;
  margin: 0;
  overflow: hidden;
+  background-color: var(--matterColorNegative); /* Loading BG color */
 }

 .threeToTwoWrapper {
--- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.css
+++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.css
@ -16,7 +16,7 @@
 .title {
  margin-bottom: 19px;

-  @media (--viewportMedium) {
-    margin-bottom: 21px;
+  @media (--viewportLarge) {
+    margin-bottom: 44px;
  }
 }
--- a/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
+++ b/src/components/EditListingDescriptionPanel/EditListingDescriptionPanel.js
@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
+import { ensureListing } from '../../util/data';
 import { EditListingDescriptionForm } from '../../containers';

 import css from './EditListingDescriptionPanel.css';
@ -19,11 +20,14 @@ const EditListingDescriptionPanel = props => {
  } = props;

  const classes = classNames(rootClassName || css.root, className);
-  const { attributes: { description, title } } = listing || { attributes: {} };
+  const currentListing = ensureListing(listing);
+  const { description, title } = currentListing.attributes;
+  const listingTitle = title || '';
+

  return (
    <div className={classes}>
-      <h1 className={css.title}><FormattedMessage id="EditListingDescriptionPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingDescriptionPanel.title" values={{ listingTitle }} /></h1>
      <EditListingDescriptionForm
        className={css.form}
        initialValues={{ title, description }}
--- a/src/components/EditListingLocationPanel/EditListingLocationPanel.css
+++ b/src/components/EditListingLocationPanel/EditListingLocationPanel.css
@ -16,7 +16,7 @@
 .title {
  margin-bottom: 19px;

-  @media (--viewportMedium) {
-    margin-bottom: 21px;
+  @media (--viewportLarge) {
+    margin-bottom: 44px;
  }
 }
--- a/src/components/EditListingLocationPanel/EditListingLocationPanel.js
+++ b/src/components/EditListingLocationPanel/EditListingLocationPanel.js
@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { EditListingLocationForm } from '../../containers';
+import { ensureListing } from '../../util/data';

 import css from './EditListingLocationPanel.css';

@ -19,7 +20,9 @@ const EditListingLocationPanel = props => {
  } = props;

  const classes = classNames(rootClassName || css.root, className);
-  const { attributes: { address, geolocation } } = listing || { attributes: {} };
+  const currentListing = ensureListing(listing);
+  const { address, geolocation, title } = currentListing.attributes;
+  const listingTitle = title || '';

  // Only render current search if full place object is available in the URL params
  // TODO bounds and country are missing - those need to be queried directly from Google Places
@ -49,7 +52,7 @@ const EditListingLocationPanel = props => {

  return (
    <div className={classes}>
-      <h1 className={css.title}><FormattedMessage id="EditListingLocationPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingLocationPanel.title" values={{ listingTitle }} /></h1>
      <EditListingLocationForm
        className={css.form}
        initialValues={initialSearchFormValues}
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
@ -19,6 +19,10 @@

 .payoutDetails {
  margin: 24px;
+
+  @media (--viewportLarge) {
+    margin: 0 60px 60px;
+  }
 }

 .modalHeading {
@ -26,17 +30,24 @@
  margin-bottom: 36px;
  padding: 0 24px;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    margin-top: 67px;
+    padding: 0 60px;
  }
 }

 .payoutModalTitle {
-  @media (--viewportMedium) {
+  @apply --marketplaceModalTitle;
+
+  @media (--viewportLarge) {
    margin-top: 0;
  }
 }

 .title {
  margin-bottom: 19px;
+
+  @media (--viewportLarge) {
+    margin-bottom: 47px;
+  }
 }
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.js
@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { omitBy, isUndefined } from 'lodash';
 import { EditListingPhotosForm, PayoutDetailsForm } from '../../containers';
+import { ensureListing } from '../../util/data';
 import { Modal } from '../../components';
 import * as propTypes from '../../util/propTypes';
 import config from '../../config';
@ -77,6 +78,7 @@ class EditListingPhotosPanel extends Component {
      errors,
      fetchInProgress,
      images,
+      listing,
      onImageUpload,
      onUpdateImageOrder,
      onManageDisableScrolling,
@ -91,10 +93,13 @@ class EditListingPhotosPanel extends Component {
      [css.payoutModalOpen]: this.state.showPayoutDetails,
    });
    const currency = config.currencyConfig.currency;
+    const currentListing = ensureListing(listing);
+    const { title } = currentListing.attributes;
+    const listingTitle = title || '';

    return (
      <div className={classes}>
-        <h1 className={css.title}><FormattedMessage id="EditListingPhotosPanel.title" /></h1>
+        <h1 className={css.title}><FormattedMessage id="EditListingPhotosPanel.title" values={{ listingTitle }} /></h1>
        <EditListingPhotosForm
          className={css.form}
          disabled={fetchInProgress}
@ -146,6 +151,7 @@ EditListingPhotosPanel.defaultProps = {
  rootClassName: null,
  errors: null,
  images: [],
+  listing: null,
  currentUser: null,
 };

@ -161,6 +167,7 @@ EditListingPhotosPanel.propTypes = {
  }),
  fetchInProgress: bool.isRequired,
  images: array,
+  listing: object, // TODO Should be propTypes.listing after API support is added.
  onImageUpload: func.isRequired,
  onPayoutDetailsSubmit: func.isRequired,
  onUpdateImageOrder: func.isRequired,
--- a/src/components/EditListingPricingPanel/EditListingPricingPanel.css
+++ b/src/components/EditListingPricingPanel/EditListingPricingPanel.css
@ -17,6 +17,6 @@
  margin-bottom: 19px;

  @media (--viewportMedium) {
-    margin-bottom: 21px;
+    margin-bottom: 44px;
  }
 }
--- a/src/components/EditListingPricingPanel/EditListingPricingPanel.js
+++ b/src/components/EditListingPricingPanel/EditListingPricingPanel.js
@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { EditListingPricingForm } from '../../containers';
+import { ensureListing } from '../../util/data';

 import css from './EditListingPricingPanel.css';

@ -19,11 +20,13 @@ const EditListingPricingPanel = props => {
  } = props;

  const classes = classNames(rootClassName || css.root, className);
-  const { attributes: { price } } = listing || { attributes: {} };
+  const currentListing = ensureListing(listing);
+  const { price, title } = currentListing.attributes ;
+  const listingTitle = title || '';

  return (
    <div className={classes}>
-      <h1 className={css.title}><FormattedMessage id="EditListingPricingPanel.title" /></h1>
+      <h1 className={css.title}><FormattedMessage id="EditListingPricingPanel.title" values={{ listingTitle }} /></h1>
      <EditListingPricingForm
        className={css.form}
        initialValues={{ price }}
--- a/src/components/EditListingWizard/EditListingWizard.css
+++ b/src/components/EditListingWizard/EditListingWizard.css
@ -1,7 +1,5 @@
@import '../../marketplace.css';

-@custom-media --viewportPhotosLarger (min-width: 1200px);
-
 .root {
  /* Layout */
  width: 100%;
@ -10,7 +8,7 @@
  display: flex;
  flex-direction: column;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    flex-direction: row;
    justify-content: center;
  }
@ -22,23 +20,21 @@
  flex-direction: row;
  padding: 10px 24px 0 24px;
  flex-shrink: 0;
-
-  border-top-width: 1px;
-  border-top-color: var(--matterColorNegative);
-  border-top-style: solid;
  background-color: var(--matterColorLight);
-  box-shadow: var(--boxShadow);
+  box-shadow: var(--boxShadowLight);
+  border-top: 1px solid var(--matterColorNegative);

-  @media (--viewportMedium) {
-    padding: 109px 48px 48px 48px;
+  @media (--viewportLarge) {
+    padding: 126px 0 82px 15vw;
    flex-direction: column;
+
+    background-color: var(--matterColorBright);
    box-shadow: none;
+    border-top: none;
  }
-  @media (--viewportPhotosLarger) {
-    padding: 109px 93px 93px 15vw;
-  }
+
  @media (--viewportXLarge) {
-    padding: 109px 93px 93px 25vw;
+    padding-left: 25vw;
  }
 }

@ -49,25 +45,21 @@
    margin-left: 0;
  }

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    margin-left: 0;
-    margin-bottom: 14px;
  }
 }

 .panel {
  flex-grow: 1;

-  @media (--viewportMedium) {
-    padding: 113px 24px 24px 24px;
-    border-left-width: 1px;
-    border-left-style: solid;
-    border-left-color: var(--matterColorNegative);
-  }
-  @media (--viewportPhotosLarger) {
-    padding: 113px 15vw 82px 82px;
+  @media (--viewportLarge) {
+    padding: 90px 15vw 82px 82px;
+    border-left: 1px solid var(--matterColorNegative);
+    background-color: var(--matterColorLight);
  }
+
  @media (--viewportXLarge) {
-    padding: 113px 25vw 82px 82px;
+    padding-right: 25vw;
  }
 }
--- a/src/components/Modal/Modal.css
+++ b/src/components/Modal/Modal.css
@ -34,6 +34,7 @@
      height: auto;
      margin: 0 auto;
      background-color: var(--matterColorBright);
+      border-radius: 2px;
    }
  }
 }
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@ -1,5 +1,10 @@
@import '../../marketplace.css';

+:root {
+  --linkWidth: 200px;
+  --linkBorderWidth: 4px;
+}
+
 .root {
  display: flex;
  flex-direction: row;
@ -13,7 +18,7 @@
    margin-left: 0;
  }

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    margin-left: 24px;
  }
 }
@ -22,7 +27,7 @@
  display: inline-block;

  /* Font */
-  @apply --marketplaceInboxLinkFontStyles;
+  @apply --marketplaceTabNavFontStyles;

  color: var(--matterColor);
  padding-bottom: 10px;
@ -31,20 +36,41 @@
  border-bottom-style: solid;
  border-bottom-color: transparent;

+  transition: var(--transitionStyleButton);
+  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='#C0392B' fill-rule='evenodd'/></svg>");
+  background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
+
  &:hover {
    text-decoration: none;
    color: var(--matterColorDark);
  }

-  @media (--viewportMedium) {
-    padding-bottom: 7px;
-    border-bottom-width: 3px;
+  @media (--viewportLarge) {
+    border-bottom-width: 0px;
+    margin-bottom: 14px;
+    width: var(--linkWidth);
+
+    &:hover {
+      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='#C0392B' fill-rule='evenodd'/></svg>");
+      background-position: right center;
+    }
  }
 }

 .selectedLink {
  border-bottom-color: var(--matterColorDark);
  color: var(--matterColorDark);
+
+  @media (--viewportLarge) {
+    width: var(--linkWidth);
+    background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='#000' fill-rule='evenodd'/></svg>");
+    background-position: right center;
+
+    &:hover {
+      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='#000' fill-rule='evenodd'/></svg>");
+      background-position: right center;
+    }
+  }
 }

 .disabled {
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/src/containers/AuthenticationPage/AuthenticationPage.css
@ -34,7 +34,9 @@
  }
 }

-.tabs {}
+.tabs {
+
+}

 .tab {
  @apply --marketplaceModalTitle;
--- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
+++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
@ -27,7 +27,7 @@
  margin-bottom: 24px;
  flex-shrink: 0;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    display: inline-block;
    width: 241px;
    margin-top: 100px;
--- a/src/containers/EditListingLocationForm/EditListingLocationForm.css
+++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css
@ -58,7 +58,7 @@
  margin-top: auto;
  margin-bottom: 24px;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    display: inline-block;
    width: 241px;
    margin-top: 100px;
--- a/src/containers/EditListingPage/EditListingPage.css
+++ b/src/containers/EditListingPage/EditListingPage.css
@ -1,5 +1,9 @@
@import '../../marketplace.css';

+.topbar {
+  z-index: 1;
+}
+
 .mobileTopbar {
  /* Size */
  width: 100%;
--- a/src/containers/EditListingPage/EditListingPage.js
+++ b/src/containers/EditListingPage/EditListingPage.js
@ -121,6 +121,7 @@ export const EditListingPageComponent = props => {
        scrollingDisabled={scrollingDisabled}
      >
        <Topbar
+          className={css.topbar}
          mobileRootClassName={css.mobileTopbar}
          isAuthenticated={isAuthenticated}
          authInProgress={authInProgress}
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
@ -21,7 +21,7 @@
 .thumbnail {
  margin: 24px 0 0 0;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    width: var(--imageWidthDesktop);
    margin: 0 24px 24px 0;

@ -46,7 +46,7 @@
    clear: both;
  }

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    width: var(--imageWidthDesktop);
    margin: 0 0 24px 0;
  }
@ -73,14 +73,24 @@
  margin-top: 0;

  /* Colors */
-  background-color: #F7F7F7;
+  background-color: var(--matterColorLight);
+
+  @media (--viewportLarge) {
+    background-color: var(--matterColorBright);
+  }
+
  border-style: dashed;
-  border-color: #E6E6E6;
+  border-color: var(--matterColorNegative);
  border-width: 2px;
  border-radius: 2px;

  /* Behaviour */
  cursor: pointer;
+  transition: var(--transitionStyleButton);
+
+  &:hover {
+    border-color: var(--matterColorAnti);
+  }
 }

 .chooseImageText {
@ -96,19 +106,22 @@

  margin-top: 0;
  margin-bottom: 0;
-  @media (--viewportMedium) {
+
+  @media (--viewportLarge) {
+    font-weight: var(--fontWeightSemiBold);
    margin-top: 0;
    margin-bottom: 0;
   }
 }

 .imageTypes {
-  @apply --marketplaceH5FontStyles;
+  @apply --marketplaceTinyFontStyles;
  color: var(--matterColorAnti);

  margin-top: 0;
  margin-bottom: 0;
-  @media (--viewportMedium) {
+
+  @media (--viewportLarge) {
    margin-top: 0;
    margin-bottom: 0;
   }
@ -124,12 +137,13 @@
 }

 .tip {
+  @apply --marketplaceH5FontStyles;
  flex-shrink: 0;
  color: var(--matterColorAnti);
  margin-top: 24px;
  margin-bottom: 60px;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    margin-top: 0;
    margin-bottom: 0;
  }
@ -144,7 +158,7 @@
  margin-top: auto;
  margin-bottom: 24px;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    display: inline-block;
    width: 241px;
    margin-top: 100px;
--- a/src/containers/EditListingPricingForm/EditListingPricingForm.css
+++ b/src/containers/EditListingPricingForm/EditListingPricingForm.css
@ -22,7 +22,7 @@
  margin-top: auto;
  margin-bottom: 24px;

-  @media (--viewportMedium) {
+  @media (--viewportLarge) {
    display: inline-block;
    width: 241px;
    margin-top: 100px;
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@ -75,7 +75,7 @@
  box-shadow: var(--boxShadow);

  @media (--viewportLarge) {
-    padding: 113px 82px 82px 15vw;
+    padding: 113px 0 82px 15vw;
    flex-direction: column;
    justify-content: flex-start;
    border: none;
@ -131,7 +131,6 @@

  @media (--viewportLarge) {
    margin-left: 0;
-    margin-bottom: 22px;
  }
 }

--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
@ -6,6 +6,10 @@

 .sectionContainer {
  margin-bottom: 35px;
+
+  @media (--viewportMedium) {
+    margin-bottom: 56px;
+  }
 }

 .subTitle {
@ -14,9 +18,10 @@

  margin-top: 0;
  margin-bottom: 13px;
+
  @media (--viewportMedium) {
    margin-top: 0;
-    margin-bottom: 13px;
+    margin-bottom: 17px;
  }
 }

--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@ -227,14 +227,14 @@
    }
  }

-  --marketplaceInboxLinkFontStyles {
+  --marketplaceTabNavFontStyles {
    font-family: "sofiapro", Helvetica, Arial, sans-serif;
    font-weight: var(--fontWeightMedium);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;

-    @media (--viewportMedium) {
+    @media (--viewportLarge) {
      font-weight: var(--fontWeightSemiBold);
      font-size: 24px;
      line-height: 32px;
--- a/src/translations/en.json
+++ b/src/translations/en.json
@ -53,7 +53,7 @@
  "EditListingDescriptionForm.titleRequired": "You need to add a name.",
  "EditListingDescriptionForm.updateFailed": "Failed to update listing. Please try again.",
  "EditListingDescriptionForm.updated": "Updated!",
-  "EditListingDescriptionPanel.title": "Add your sauna",
+  "EditListingDescriptionPanel.title": "Edit details of {listingTitle}",
  "EditListingLocationForm.address": "Address",
  "EditListingLocationForm.addressNotRecognized": "We didn't recognize this location. Please try another location.",
  "EditListingLocationForm.addressPlaceholder": "Start typing…",
@ -62,7 +62,7 @@
  "EditListingLocationForm.buildingPlaceholder": "E.g. A 42",
  "EditListingLocationForm.updateFailed": "Failed to update listing. Please try again.",
  "EditListingLocationForm.updated": "Updated!",
-  "EditListingLocationPanel.title": "Where's your sauna?",
+  "EditListingLocationPanel.title": "Edit location of {listingTitle}",
  "EditListingPage.titleCreateListing": "Create a listing",
  "EditListingPage.titleEditListing": "Edit listing",
  "EditListingPhotosForm.addImagesTip": "Tip: Choose 2-3 best photos of your sauna from different angles in a good light that really show the space.",
@ -79,13 +79,13 @@
  "EditListingPhotosPanel.payoutModalInfo": "Since this was the first listing you created, we need to know bit more information about you in order to send you money. We only ask these once.",
  "EditListingPhotosPanel.payoutModalTitleOneMoreThing": "One more thing:",
  "EditListingPhotosPanel.payoutModalTitlePayoutPreferences": "Payout preferences",
-  "EditListingPhotosPanel.title": "Add a few photos",
+  "EditListingPhotosPanel.title": "Edit photos of {listingTitle}",
  "EditListingPricingForm.priceInputPlaceholder": "Choose your price…",
  "EditListingPricingForm.pricePerNight": "Price per night in euros",
  "EditListingPricingForm.priceRequired": "You need to add a valid price.",
  "EditListingPricingForm.updateFailed": "Failed to update listing. Please try again.",
  "EditListingPricingForm.updated": "Updated!",
-  "EditListingPricingPanel.title": "How much does it cost?",
+  "EditListingPricingPanel.title": "Edit pricing of {listingTitle}",
  "EditListingWizard.saveEditDescription": "Save description",
  "EditListingWizard.saveEditLocation": "Save location",
  "EditListingWizard.saveEditPhotos": "Save photos",