diff options
Diffstat (limited to 'web/react/components/tutorial')
-rw-r--r-- | web/react/components/tutorial/tutorial_intro_screens.jsx | 37 |
1 files changed, 23 insertions, 14 deletions
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx index c7abccae3..a99e9fe28 100644 --- a/web/react/components/tutorial/tutorial_intro_screens.jsx +++ b/web/react/components/tutorial/tutorial_intro_screens.jsx @@ -35,6 +35,9 @@ export default class TutorialIntroScreens extends React.Component { preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue); AsyncClient.savePreferences([preference]); } + componentDidMount() { + $('.tutorials__scroll').perfectScrollbar(); + } createScreen() { switch (this.state.currentScreen) { case 0: @@ -50,7 +53,7 @@ export default class TutorialIntroScreens extends React.Component { <div> <h3>{'Welcome to:'}</h3> <h1>{'Mattermost'}</h1> - <p>{'Your team communications all in one place, instantly searchable and available anywhere.'}</p> + <p>{'Your team communication all in one place, instantly searchable and available anywhere.'}</p> <p>{'Keep your team connected to help them achieve what matters most.'}</p> <div className='tutorial__circles'> <div className='circle active'/> @@ -65,7 +68,7 @@ export default class TutorialIntroScreens extends React.Component { <div> <h3>{'How Mattermost works:'}</h3> <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p> - <p>{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}</p> + <p>{'Everything is archived and searchable from any web-enabled desktop, laptop or phone.'}</p> <div className='tutorial__circles'> <div className='circle'/> <div className='circle active'/> @@ -120,7 +123,7 @@ export default class TutorialIntroScreens extends React.Component { </a> {'.'} </p> - {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'} + {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up. Use it for posting updates everyone needs to know.'} <div className='tutorial__circles'> <div className='circle'/> <div className='circle'/> @@ -130,20 +133,26 @@ export default class TutorialIntroScreens extends React.Component { ); } render() { + const height = Utils.windowHeight() - 100; const screen = this.createScreen(); return ( - <div className='tutorial-steps__container'> - <div className='tutorial__content'> - <div className='tutorial__steps'> - {screen} - <button - className='btn btn-primary' - tabIndex='1' - onClick={this.handleNext} - > - {'Next'} - </button> + <div + className='tutorials__scroll' + style={{height}} + > + <div className='tutorial-steps__container'> + <div className='tutorial__content'> + <div className='tutorial__steps'> + {screen} + <button + className='btn btn-primary' + tabIndex='1' + onClick={this.handleNext} + > + {'Next'} + </button> + </div> </div> </div> </div> |