diff --git a/.env-template b/.env-template index 7ab796c35..179fc74d0 100644 --- a/.env-template +++ b/.env-template @@ -1,3 +1,6 @@ +# Environment variables for the client app. +# Note that variables, that start with "REACT_APP" prefix, are exposed to the public web. +# https://create-react-app.dev/docs/adding-custom-environment-variables # Mandatory configuration # diff --git a/CHANGELOG.md b/CHANGELOG.md index 06c7f7189..1fa31217e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,25 @@ https://github.com/sharetribe/flex-template-web/ --- -## Upcoming version 2021-XX-XX +## Upcoming version 2022-XX-XX + +## [v10.4.1] 2022-03-16 + +- [fix] FieldDateInput: input font-size must be min 16px for mobile. EditListingPage.duck: fix image + upload (dublicate images shown). [#186](https://github.com/sharetribe/ftw-daily/pull/186) + +### Updates from upstream (FTW-daily v8.4.1) + +- [fix] Portal version of Modals couldn't use 100vh on mobile Safari. Safari changes the window's + height based on if the location bar is squeezed or not (and that depends on scroll-effect). + [#1501](https://github.com/sharetribe/ftw-daily/pull/1501) +- [fix] Setting multiple environment variables in Windows requires using the set command before each + individual variable. Updated the 'for windows users' section in documentation. + [#1491](https://github.com/sharetribe/ftw-daily/pull/1491) +- [add] Code comment about "REACT_APP" prefix in environment variables. + [#1492](https://github.com/sharetribe/ftw-daily/pull/1492) + + [v10.4.1]: https://github.com/sharetribe/ftw-hourly/compare/v10.4.0...v10.4.1 ## [v10.4.0] 2021-12-02 diff --git a/README.md b/README.md index 23ca96a2a..f8ef394f2 100644 --- a/README.md +++ b/README.md @@ -63,11 +63,11 @@ Change `export` to `set` in the package.json file if you're using Windows/DOS. Y change to "dev" and "dev-sever" commands. ``` -"dev": "yarn run config-check&&set NODE_ENV=development REACT_APP_DEV_API_SERVER_PORT=3500&&concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\"" +"dev": "yarn run config-check&&set NODE_ENV=development&& set REACT_APP_DEV_API_SERVER_PORT=3500&&concurrently --kill-others \"yarn run dev-frontend\" \"yarn run dev-backend\"" ``` ``` -"dev-server": "set NODE_ENV=development PORT=4000 REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js" +"dev-server": "set NODE_ENV=development&& set PORT=4000&& set REACT_APP_CANONICAL_ROOT_URL=http://localhost:4000&&yarn run build&&nodemon --watch server server/index.js" ``` We strongly recommend installing diff --git a/package.json b/package.json index 58b0c75cf..05b0cc108 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "10.4.0", + "version": "10.4.1", "private": true, "license": "Apache-2.0", "dependencies": { diff --git a/src/components/BookingPanel/BookingPanel.module.css b/src/components/BookingPanel/BookingPanel.module.css index 284ca75f3..2c3b3bd13 100644 --- a/src/components/BookingPanel/BookingPanel.module.css +++ b/src/components/BookingPanel/BookingPanel.module.css @@ -9,7 +9,7 @@ @media (--viewportMedium) { flex-basis: 576px; - height: 100%; + height: unset; padding: var(--modalPaddingMedium); background-color: var(--matterColorLight); margin-top: 12.5vh; @@ -135,13 +135,10 @@ flex-grow: 1; display: flex; flex-direction: column; - /* Mobile phones introduce bottom-bar, which takes 102px vertical space. - In addition to that we have fixed button that takes 84px vertical space. - */ - margin: 0 0 186px 0; + padding: 0; @media (--viewportMedium) { - margin: 0; + padding: 0; min-height: 400px; } diff --git a/src/components/FieldDateInput/DateInput.module.css b/src/components/FieldDateInput/DateInput.module.css index e0c6a3cc4..893585941 100644 --- a/src/components/FieldDateInput/DateInput.module.css +++ b/src/components/FieldDateInput/DateInput.module.css @@ -27,6 +27,7 @@ & :global(.DateInput_input) { @apply --marketplaceDefaultFontStyles; @apply --marketplaceInputStyles; + font-size: 16px; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: var(--attentionColor); diff --git a/src/components/FieldDateRangeInput/DateRangeInput.module.css b/src/components/FieldDateRangeInput/DateRangeInput.module.css index e81bd5c32..692cba2e1 100644 --- a/src/components/FieldDateRangeInput/DateRangeInput.module.css +++ b/src/components/FieldDateRangeInput/DateRangeInput.module.css @@ -26,6 +26,7 @@ & :global(.DateInput_input) { @apply --marketplaceH4FontStyles; + font-size: 16px; padding: 0; margin: 0; border: 0; diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js index 9f1eed666..39f8ad8c9 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.js @@ -51,8 +51,10 @@ export class ModalComponent extends Component { super(props); this.handleBodyKeyUp = this.handleBodyKeyUp.bind(this); this.handleClose = this.handleClose.bind(this); + this.handleResize = this.handleResize.bind(this); this.refDiv = React.createRef(); + this.vh = null; this.state = { portalRoot: null, @@ -62,7 +64,15 @@ export class ModalComponent extends Component { componentDidMount() { const { id, isOpen, onManageDisableScrolling } = this.props; onManageDisableScrolling(id, isOpen); - document.body.addEventListener('keyup', this.handleBodyKeyUp); + window.document.body.addEventListener('keyup', this.handleBodyKeyUp); + + // A hack to update container height for mobile Safari, + // when resizing happens due to scroll. + // css.isOpenInPortal has "height: calc(var(--vh, 1vh) * 100)" + this.vh = window.innerHeight * 0.01; + window.document.documentElement.style.setProperty('--vh', `${this.vh}px`); + window.addEventListener('resize', this.handleResize); + this.setState({ portalRoot: document.getElementById('portal-root'), }); @@ -83,7 +93,8 @@ export class ModalComponent extends Component { componentWillUnmount() { const { id, onManageDisableScrolling } = this.props; - document.body.removeEventListener('keyup', this.handleBodyKeyUp); + window.document.body.removeEventListener('keyup', this.handleBodyKeyUp); + window.document.body.removeEventListener('resize', this.handleResize); onManageDisableScrolling(id, false); } @@ -100,6 +111,11 @@ export class ModalComponent extends Component { onClose(event); } + handleResize() { + this.vh = window.innerHeight * 0.01; + window.document.documentElement.style.setProperty('--vh', `${this.vh}px`); + } + render() { const { children, @@ -136,7 +152,8 @@ export class ModalComponent extends Component { // If props doesn't contain isClosedClassName, styles default to css.isClosed // This makes it possible to create ModalInMobile on top of Modal where style modes are: // visible, hidden, or none (ModalInMobile's children are always visible on desktop layout.) - const modalClass = isOpen ? css.isOpen : isClosedClassName; + const isOpenClass = usePortal ? css.isOpenInPortal : css.isOpenInPlace; + const modalClass = isOpen ? isOpenClass : isClosedClassName; const classes = classNames(modalClass, className); const scrollLayerClasses = scrollLayerClassName || css.scrollLayer; const containerClasses = containerClassName || css.container; diff --git a/src/components/Modal/Modal.module.css b/src/components/Modal/Modal.module.css index 67dc0122f..e4ab613e5 100644 --- a/src/components/Modal/Modal.module.css +++ b/src/components/Modal/Modal.module.css @@ -2,13 +2,6 @@ /* Content is visible as modal layer */ .isOpen { - display: flex; - flex-direction: column; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; width: 100%; z-index: 100; @@ -45,6 +38,34 @@ } } +.isOpenInPlace { + composes: isOpen; + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.isOpenInPortal { + composes: isOpen; + display: block; + height: calc(var(--vh, 1vh) * 100); + position: absolute; + + @media (--viewportMedium) { + display: flex; + flex-direction: column; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + .content { } diff --git a/src/containers/EditListingPage/EditListingPage.duck.js b/src/containers/EditListingPage/EditListingPage.duck.js index b8ba5bce6..160485d35 100644 --- a/src/containers/EditListingPage/EditListingPage.duck.js +++ b/src/containers/EditListingPage/EditListingPage.duck.js @@ -167,7 +167,7 @@ export default function reducer(state = initialState, action = {}) { case SHOW_LISTINGS_REQUEST: return { ...state, showListingsError: null }; case SHOW_LISTINGS_SUCCESS: - return state; + return { ...state, images: {}, imageOrder: [], removedImageIds: [] }; case SHOW_LISTINGS_ERROR: // eslint-disable-next-line no-console diff --git a/src/forms/BookingTimeForm/BookingTimeForm.module.css b/src/forms/BookingTimeForm/BookingTimeForm.module.css index af80614b8..c827a5985 100644 --- a/src/forms/BookingTimeForm/BookingTimeForm.module.css +++ b/src/forms/BookingTimeForm/BookingTimeForm.module.css @@ -15,7 +15,7 @@ .priceBreakdownContainer { padding: 0 24px; - margin-bottom: 40px; + margin-bottom: 24px; @media (--viewportMedium) { padding: 0; diff --git a/yarn.lock b/yarn.lock index 430752d11..2846cfd7b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6721,9 +6721,9 @@ flush-write-stream@^1.0.0: readable-stream "^2.3.6" follow-redirects@^1.0.0, follow-redirects@^1.14.0: - version "1.14.7" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685" - integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ== + version "1.14.8" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc" + integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA== for-in@^1.0.2: version "1.0.2" @@ -9637,9 +9637,9 @@ nan@^2.12.1: integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg== nanoid@^3.1.15: - version "3.1.16" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.16.tgz#b21f0a7d031196faf75314d7c65d36352beeef64" - integrity sha512-+AK8MN0WHji40lj8AEuwLOvLSbWYApQpre/aFJZD71r43wVRLrOYS4FmJOPQYon1TqB462RzrrxlfA74XRES8w== + version "3.2.0" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c" + integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA== nanomatch@^1.2.9: version "1.2.13" @@ -14221,9 +14221,9 @@ url-parse-lax@^3.0.0: prepend-http "^2.0.0" url-parse@^1.4.3: - version "1.5.3" - resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862" - integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ== + version "1.5.10" + resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1" + integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ== dependencies: querystringify "^2.1.1" requires-port "^1.0.0"