3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-14 09:37:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix button wrapping behavior on mobile (#921)

Browse source 
* fixed button wrapping behavior

previous+next buttons with long text now stack properly on smaller screens

* truncates function/component names of prev/next buttons

Function/component names are truncated, while regular titles are wrapped

* removed unused styles

* fixed using idx (safe getter) for previous/next titles

passed through prettier and all tests pass
This commit is contained in:
Jaril Valenciano 2018-09-02 01:45:32 -04:00 • committed by Yangshun Tay
parent 7987e66bed
commit e613725a25
2 changed files with 53 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

37
lib/core/DocsLayout.js
View file

@ -53,6 +53,18 @@ class DocsLayout extends React.Component {
const title = const title =
idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle; idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
const hasOnPageNav = this.props.config.onPageNav === 'separate'; const hasOnPageNav = this.props.config.onPageNav === 'separate';
const previousTitle =
idx(i18n, ['localized-strings', metadata.previous_id]) ||
idx(i18n, ['localized-strings', 'previous']) ||
metadata.previous_title ||
'Previous';
const nextTitle =
idx(i18n, ['localized-strings', metadata.next_id]) ||
idx(i18n, ['localized-strings', 'next']) ||
metadata.next_title ||
'Next';
return ( return (
<Site <Site
config={this.props.config} config={this.props.config}
@ -85,11 +97,14 @@ class DocsLayout extends React.Component {
metadata.localized_id, metadata.localized_id,
metadata.previous_id metadata.previous_id
)}> )}>
←{' '} <span className="arrow-prev">← </span>
{idx(i18n, ['localized-strings', metadata.previous_id]) || <span
idx(i18n, ['localized-strings', 'previous']) || className={
metadata.previous_title || previousTitle.match(/[a-z][A-Z]/) &&
'Previous'} 'function-name-prevnext'
}>
{previousTitle}
</span>
</a> </a>
)} )}
{metadata.next_id && ( {metadata.next_id && (
@ -99,11 +114,13 @@ class DocsLayout extends React.Component {
metadata.localized_id, metadata.localized_id,
metadata.next_id metadata.next_id
)}> )}>
{idx(i18n, ['localized-strings', metadata.next_id]) || <span
idx(i18n, ['localized-strings', 'next']) || className={
metadata.next_title || nextTitle.match(/[a-z][A-Z]/) && 'function-name-prevnext'
'Next'}{' '} }>
→ {nextTitle}
</span>
<span className="arrow-next"> →</span>
</a> </a>
)} )}
</div> </div>

28
lib/static/css/main.css
View file

@ -1545,8 +1545,32 @@ input::placeholder {
} }
@media only screen and (max-width: 735px) { @media only screen and (max-width: 735px) {
.docs-prevnext { .docs-next {
height: 40px; clear: both;
float: left;
margin: 10px 0;
}
.docs-prev {
margin: 10px 0;
}
.arrow-next {
float: right;
margin-left: 10px;
}
.arrow-prev {
float: left;
margin-right: 10px;
}
.function-name-prevnext {
width: 200px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
/* End of Docs Navigation */ /* End of Docs Navigation */