SWREI/instrumental
0
0
Fork 0
Code Issues Activity

Move the mastodon on Getting Started column to drawer column (#6109)

Browse Source 
Getting Started column obtained many links, and it became much taller.
Because of its height, Getting Started column required long scrolling on
devices with small screen, such as 4 inch phones and 10 inch laptops.

This change moves the mastodon which took large space on the column to
drawer column. The drawer column has only the compose form and has more
space.
This commit is contained in:
Akihiko Odaki 2017-12-27 11:31:30 +09:00 committed by Eugen Rochko
parent e0ef7f9d79
commit 65f30f65a2
5 changed files with 19 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/javascript/images/mastodon-getting-started.png → app/javascript/images/mastodon-drawer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 32 KiB

BIN
app/javascript/images/wave-drawer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

1
app/javascript/mastodon/features/compose/index.js
View File

@ -94,6 +94,7 @@ export default class Compose extends React.PureComponent {
<div className='drawer__inner' onFocus={this.onFocus}>
<NavigationContainer onClose={this.onBlur} />
<ComposeFormContainer />
<div className='mastodon' />
</div>
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>

24
app/javascript/mastodon/features/getting_started/index.js
View File

@ -98,19 +98,17 @@ export default class GettingStarted extends ImmutablePureComponent {
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
</div>
<div className='getting-started__footer scrollable optionally-scrollable'>
<div className='static-content getting-started'>
<p>
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a>
</p>
<p>
<FormattedMessage
id='getting_started.open_source_notice'
defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
/>
</p>
</div>
<div className='static-content getting-started'>
<p>
<a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/FAQ.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.faq' defaultMessage='FAQ' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/User-guide.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.userguide' defaultMessage='User Guide' /></a> • <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' rel='noopener' target='_blank'><FormattedMessage id='getting_started.appsshort' defaultMessage='Apps' /></a>
</p>
<p>
<FormattedMessage
id='getting_started.open_source_notice'
defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
/>
</p>
</div>
</Column>
);

16
app/javascript/styles/mastodon/components.scss
View File

@ -1758,7 +1758,7 @@
position: absolute;
top: 0;
left: 0;
background: lighten($ui-base-color, 13%);
background: lighten($ui-base-color, 13%) url('../images/wave-drawer.png') no-repeat bottom / 100% auto;
box-sizing: border-box;
padding: 0;
display: flex;
@ -1771,6 +1771,11 @@
&.darker {
background: $ui-base-color;
}
> .mastodon {
background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain;
flex: 1;
}
}
.pseudo-drawer {
@ -2072,15 +2077,8 @@
overflow-y: auto;
}
.getting-started__footer {
display: flex;
flex-direction: column;
}
.getting-started {
box-sizing: border-box;
padding-bottom: 235px;
background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
background: $ui-base-color;
flex: 1 0 auto;
p {