Fix button wrapping behavior on mobile (#921)

* 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
facebook · Sep 2, 2018 · e613725 · e613725
1 parent 7987e66
commit e613725
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 12 deletions.
diff --git a/lib/core/DocsLayout.js b/lib/core/DocsLayout.js
@@ -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>

diff --git a/lib/static/css/main.css b/lib/static/css/main.css
@@ -1545,8 +1545,32 @@ input::placeholder {
 }
 
 @media only screen and (max-width: 735px) {
-  .docs-prevnext {
-    height: 40px;
+  .docs-next {
+    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 */