3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-13 17:17:28 +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 =
idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
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 (
<Site
config={this.props.config}
@ -85,11 +97,14 @@ class DocsLayout extends React.Component {
metadata.localized_id,
metadata.previous_id
)}>
←{' '}
{idx(i18n, ['localized-strings', metadata.previous_id]) ||
idx(i18n, ['localized-strings', 'previous']) ||
metadata.previous_title ||
'Previous'}
<span className="arrow-prev">← </span>
<span
className={
previousTitle.match(/[a-z][A-Z]/) &&
'function-name-prevnext'
}>
{previousTitle}
</span>
</a>
)}
{metadata.next_id && (
@ -99,11 +114,13 @@ class DocsLayout extends React.Component {
metadata.localized_id,
metadata.next_id
)}>
{idx(i18n, ['localized-strings', metadata.next_id]) ||
idx(i18n, ['localized-strings', 'next']) ||
metadata.next_title ||
'Next'}{' '}
→
<span
className={
nextTitle.match(/[a-z][A-Z]/) && 'function-name-prevnext'
}>
{nextTitle}
</span>
<span className="arrow-next"> →</span>
</a>
)}
</div>