Move the mastodon on Getting Started column to drawer column (#6109)
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:
parent
d8a0c19166
commit
093af89c43
5 changed files with 19 additions and 22 deletions
Binary file not shown.
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 32 KiB |
BIN
app/javascript/images/wave-drawer.png
Normal file
BIN
app/javascript/images/wave-drawer.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.2 KiB |
|
@ -94,6 +94,7 @@ export default class Compose extends React.PureComponent {
|
||||||
<div className='drawer__inner' onFocus={this.onFocus}>
|
<div className='drawer__inner' onFocus={this.onFocus}>
|
||||||
<NavigationContainer onClose={this.onBlur} />
|
<NavigationContainer onClose={this.onBlur} />
|
||||||
<ComposeFormContainer />
|
<ComposeFormContainer />
|
||||||
|
<div className='mastodon' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
|
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
|
||||||
|
|
|
@ -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' />
|
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='getting-started__footer scrollable optionally-scrollable'>
|
<div className='static-content getting-started'>
|
||||||
<div className='static-content getting-started'>
|
<p>
|
||||||
<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>
|
||||||
<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>
|
<p>
|
||||||
<p>
|
<FormattedMessage
|
||||||
<FormattedMessage
|
id='getting_started.open_source_notice'
|
||||||
id='getting_started.open_source_notice'
|
defaultMessage='Mastodon is open source software. You can contribute or report issues on GitHub at {github}.'
|
||||||
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> }}
|
||||||
values={{ github: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>tootsuite/mastodon</a> }}
|
/>
|
||||||
/>
|
</p>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1758,7 +1758,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 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;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1771,6 +1771,11 @@
|
||||||
&.darker {
|
&.darker {
|
||||||
background: $ui-base-color;
|
background: $ui-base-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .mastodon {
|
||||||
|
background: url('../images/mastodon-drawer.png') no-repeat left bottom / contain;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pseudo-drawer {
|
.pseudo-drawer {
|
||||||
|
@ -2072,15 +2077,8 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.getting-started__footer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.getting-started {
|
.getting-started {
|
||||||
box-sizing: border-box;
|
background: $ui-base-color;
|
||||||
padding-bottom: 235px;
|
|
||||||
background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
|
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
Loading…
Reference in a new issue