Lay out pages 2 through 5, add images, style modals (#1509)

* Lay out pages 2 through 5

Added images and laid out pages 2 through 5 in the jsx file. SCSS will
come, still working on just seeing if this works at all.

* Fix jsx errors, add images to modal pages, style modal pages
This commit is contained in:
Shel R 2017-04-11 15:12:38 -04:00 committed by GitHub
parent 6433e039ad
commit 269dd2d856
19 changed files with 75 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -12,19 +12,59 @@ const PageOne = ({ acct, domain }) => (
</div> </div>
); );
const PageTwo = ({ admin }) => ( const PageTwo = (
<div className='onboarding-modal__page onboarding-modal__page-two'> <div className='onboarding-modal__page onboarding-modal__page-two'>
<p> <img className="onboarding-modal__image onboard-compose" src={'/onboarding/onboard-compose.jpg'}></img>
<FormattedMessage id='onboarding.page_two.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} /> <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
<br />
<FormattedMessage id='onboarding.page_two.read_guidelines' defaultMessage='Please read the {guidelines} of your instance.' values={{ guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_two.guidelines' defaultMessage='community guidelines' /></a> }}/>
</p>
<p><FormattedMessage id='onboarding.page_two.read_guidelines' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
<p><FormattedMessage id='onboarding.page_two.apps_available' defaultMessage='There are {apps} available for iOS and Android.' values={{ apps: <a href='https://github.com/tootsuite/mastodon/blob/master/docs/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_two.various_app' defaultMessage='mobile apps' /></a> }} /></p>
<p><strong><FormattedMessage id='onboarding.page_two.have_fun' defaultMessage='Have fun!' /></strong></p>
</div> </div>
); );
const PageThree = (
<div className='onboarding-modal__page onboarding-modal__page-three'>
<img className="onboarding-modal__image onboard-compose" src={'/onboarding/onboard-search.jpg'}></img>
<p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find users and look at hashtags, such as #MastoArt and #Introductions.' /></p>
<p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Click "Edit Profile" to change your avatar, bio, and display name.' /></p>
</div>
);
const PageFour = (
<div className='onboarding-modal__page onboarding-modal__page-four'>
<img className="onboarding-modal__image onboard-column" src={'/onboarding/onboard-home.jpg'}></img>
<p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The Home Timeline shows posts from users you follow.'/></p>
<img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-notifications.jpg"}></img>
<p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The Notifications Column shows when a user boosts, favorites, or replies to your posts; and when you have a new follower.' /></p>
<p><FormattedMessage id='onboarding.page_four.filter' defaultMessage='Each column can be customized using the settings menu in the top right.' /><img className="onboard-sliders" src={"/onboarding/onboard-sliders.png"}></img></p>
</div>
);
const PageFive = (
<div className='onboarding-modal__page onboarding-modal__page-five'>
<img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-getting-started.jpg"}></img>
<p><FormattedMessage id='onboarding.page_five.getting-started' defaultMessage='The Getting Started Column changes based on your needs.'/></p>
<img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-local-timeline.jpg"}></img>
<p><FormattedMessage id='onboarding.page_five.local-timeline' defaultMessage='The Local Timeline shows public posts from every user on your instance.' /></p>
<img className="onboarding-modal__image onboard-column" src={"/onboarding/onboard-federated-timeline.jpg"}></img>
<p><FormattedMessage id='onboarding.page_five.federated-timeline' defaultMessage='The Federated Timeline shows public posts from the whole known network of instances.' /></p>
<p><FormattedMessage id='onboarding.page_five.public' defaultMessage='These are the Public Timelines, a great way to find people to follow.' /></p>
</div>
);
const PageSix = ({ admin }) => (
<div className='onboarding-modal__page onboarding-modal__page-six'>
<p>
<FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
<br />
<FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage='Please read the {guidelines} of your instance.' values={{ guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }}/>
</p>
<p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
<p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS and Android.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
<p><strong><FormattedMessage id='onboarding.page_six.have_fun' defaultMessage='Bon Appetoot!' /></strong></p>
</div>
);
const mapStateToProps = state => ({ const mapStateToProps = state => ({
me: state.getIn(['accounts', state.getIn(['meta', 'me'])]), me: state.getIn(['accounts', state.getIn(['meta', 'me'])]),
admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]), admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),
@ -74,7 +114,11 @@ const OnboardingModal = React.createClass({
const pages = [ const pages = [
<PageOne acct={me.get('acct')} domain={domain} />, <PageOne acct={me.get('acct')} domain={domain} />,
<PageTwo admin={admin} /> PageTwo,
PageThree,
PageFour,
PageFive,
<PageSix admin={admin} />
]; ];
const { currentIndex } = this.state; const { currentIndex } = this.state;

View file

@ -1995,9 +1995,11 @@ button.active i.fa-retweet {
} }
p { p {
font-size: 16px; font-size: 18px;
color: lighten($color1, 8%); color: lighten($color1, 8%);
margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 10x;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -2008,3 +2010,21 @@ button.active i.fa-retweet {
} }
} }
} }
.onboarding-modal__image {
border-radius: 8px;
width: 70vw;
max-width: 450px;
max-height: auto;
display: block;
margin: auto;
}
.onboard-sliders {
display: inline-block;
max-width: 30px;
max-height: auto;
margin-left: 10px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB