diff --git a/CHANGELOG.md b/CHANGELOG.md index 91ee9c211..1f4c7c555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,15 @@ https://github.com/sharetribe/flex-template-web/ ## Upcoming version 2020-XX-XX +## [v8.4.2] 2020-10-30 + +### Updates from upstream (FTW-daily v6.4.2) + +- [fix] Fix the issue with form on AuthenticationPage not showing on smaller screens when using + Safari as browser. [#1377](https://github.com/sharetribe/ftw-daily/pull/1377) + + [v6.4.2]: https://github.com/sharetribe/ftw-hourly/compare/v8.4.1...v8.4.2 + ## [v8.4.1] 2020-10-20 ### Updates from upstream (FTW-daily v6.4.1) diff --git a/package.json b/package.json index 5cc2f4164..d3205defe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "8.4.1", + "version": "8.4.2", "private": true, "license": "Apache-2.0", "dependencies": { diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css index 92ea1e7c1..08f6054e9 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.css +++ b/src/containers/AuthenticationPage/AuthenticationPage.css @@ -42,12 +42,43 @@ .form { margin-top: 24px; + @media (--viewportMedium) { + margin-top: 30px; + padding-top: 2px; + } +} + +.loginForm { + margin-top: 24px; + + /* We don't want the form to take the whole space so that on mobile view + the social login buttons will be after the sign up button + and not in the bottom of the page. + We also need to add flex-basis value so that Safari will show the + whole form correctly. */ + flex-grow: 0; + flex-basis: 260px; + + @media (--viewportMedium) { + flex-basis: 330px; + margin-top: 30px; + padding-top: 2px; + } +} + +.signupForm { + margin-top: 24px; + /* We don't want the form to take the whole space so that on mobile view the social login buttons will be after the sign up button - and not in the bottom of the page */ + and not in the bottom of the page. + We also need to add flex-basis value so that Safari will show the + whole form correctly. */ flex-grow: 0; + flex-basis: 340px; @media (--viewportMedium) { + flex-basis: 410px; margin-top: 30px; padding-top: 2px; } diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js index 2f6f006a5..e50a0ee5b 100644 --- a/src/containers/AuthenticationPage/AuthenticationPage.js +++ b/src/containers/AuthenticationPage/AuthenticationPage.js @@ -274,10 +274,10 @@ export class AuthenticationPageComponent extends Component { {loginOrSignupError} {isLogin ? ( - + ) : ( this.setState({ tosModalOpen: true })}