diff --git a/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx b/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx
index 44922caf..0ec5d665 100644
--- a/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/onboarding_modal.jsx
@@ -3,6 +3,7 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Permalink from '../../../components/permalink';
+import { TransitionMotion, spring } from 'react-motion';
const PageOne = ({ acct, domain }) => (
@@ -13,60 +14,80 @@ const PageOne = ({ acct, domain }) => (
-
{acct}@{domain} }}/>
+
{acct}@{domain} }}/>
);
const PageTwo = () => (
-
+
);
const PageThree = () => (
-
-
-
+
+
#illustration, introductions: #introductions }}/>
+
);
const PageFour = () => (
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
}} />
);
-const PageFive = () => (
+const PageFive = ({ domain }) => (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
-const PageSix = ({ admin }) => (
-
-
- @{admin.get('acct')} }} />
-
- }}/>
-
-
GitHub }} />
-
}} />
-
-
-);
+const PageSix = ({ admin }) => {
+ let adminSection = '';
+
+ if (admin) {
+ adminSection = (
+
+ @{admin.get('acct')} }} />
+
+ }}/>
+
+ );
+ }
+
+ return (
+
+
+ {adminSection}
+
GitHub }} />
+
}} />
+
+ );
+};
const mapStateToProps = state => ({
me: state.getIn(['accounts', state.getIn(['meta', 'me'])]),
@@ -120,7 +141,7 @@ const OnboardingModal = React.createClass({
,
,
,
- ,
+ ,
];
@@ -135,11 +156,22 @@ const OnboardingModal = React.createClass({
nextOrDoneBtn = ;
}
+ const styles = pages.map((page, i) => ({
+ key: i,
+ style: { opacity: spring(i === currentIndex ? 1 : 0) }
+ }));
+
return (
-
- {pages.map((page, i) =>
{page}
)}
-
+
+ {interpolatedStyles =>
+
+ {pages.map((page, i) =>
+
{page}
+ )}
+
+ }
+
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 83b6ce6d..d626017c 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -2006,6 +2006,7 @@ button.icon-button.active i.fa-retweet {
.modal-root__modal {
pointer-events: auto;
display: flex;
+ z-index: 9999;
}
.media-modal {
@@ -2033,19 +2034,39 @@ button.icon-button.active i.fa-retweet {
width: 80vw;
max-width: 500px;
max-height: 500px;
- display: flex;
+ position: relative;
& > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
padding: 25px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
+ display: flex;
+ opacity: 0;
user-select: text;
+ }
+}
- &.active {
- display: flex;
- }
+@media screen and (max-width: 550px) {
+ .onboarding-modal {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ }
+
+ .onboarding-modal__pager {
+ width: 100%;
+ height: auto;
+ max-width: none;
+ max-height: none;
+ flex: 1 1 auto;
}
}
@@ -2151,12 +2172,27 @@ button.icon-button.active i.fa-retweet {
margin-right: 10px;
}
-.onboarding-modal__page-two__compose {
- position: relative;
- height: 300px;
+.onboarding-modal__page-two,
+.onboarding-modal__page-three,
+.onboarding-modal__page-four,
+.onboarding-modal__page-five {
+ p {
+ text-align: center;
+ }
- & > div {
- position: absolute;
+ .figure {
+ background: $color1;
+ color: $color2;
+ margin-bottom: 20px;
+ border-radius: 8px;
+ padding: 10px;
+ text-align: center;
+ font-size: 14px;
+
+ .onboarding-modal__image {
+ border-radius: 4px;
+ margin-bottom: 10px;
+ }
}
}
@@ -2167,6 +2203,7 @@ button.icon-button.active i.fa-retweet {
max-height: auto;
display: block;
margin: auto;
+ margin-bottom: 20px;
}
.onboard-sliders {