Remove Releases tab from header

Summary:This pull request moves the content of the Releases tab to the version number next to the title. With the search bar, the header was getting too crowded. - I've cleaned up the search style a bit and made it look like the React one (with the background color). - I've also improved the styling of the versions page. ![screen shot 2016-03-09 at 2 22 17 pm](https://cloud.githubusercontent.com/assets/197597/13652946/e0584326-e603-11e5-96f7-962debb1b43a.png) Closes facebook#6388 Differential Revision: D3033151 Pulled By: vjeux fb-gh-sync-id: ec44f8f1a50331cd001c6cb7723f084751c342ab shipit-source-id: ec44f8f1a50331cd001c6cb7723f084751c342ab
expo · Mar 10, 2016 · 8c2e531 · 8c2e531
1 parent 593d766
commit 8c2e531
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 68 deletions.
diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js
@@ -16,7 +16,6 @@ var HeaderLinks = React.createClass({
   linksInternal: [
     {section: 'docs', href: 'docs/getting-started.html', text: 'Docs'},
     {section: 'support', href: 'support.html', text: 'Support'},
-    {section: 'releases', href: 'https://github.com/facebook/react-native/releases', text: 'Releases'},
     {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'},
     {section: 'showcase', href: 'showcase.html', text: 'Showcase'},
   ],

diff --git a/website/core/Site.js b/website/core/Site.js
@@ -86,7 +86,7 @@ var Site = React.createClass({
               apiKey: '2c98749b4a1e588efec53b2acec13025',
               indexName: 'react-native-versions',
               inputSelector: '#algolia-doc-search',
-              algoliaOptions: { facetFilters: [ "tags:${algoliaVersion}" ] }
+              algoliaOptions: { facetFilters: [ "tags:${algoliaVersion}" ], hitsPerPage: 5 }
             });
           `}} />
           <script src="js/scripts.js" />

diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css
@@ -486,15 +486,6 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
   box-shadow: 5px 5px 5px #888888;
 }
 
-.versions ul {
-  list-style: none;
-}
-
-.versions li {
-  font-size: 16px;
-  padding-top: 10px;
-}
-
 #examples h3, .home-presentation h3 {
   color: #2d2d2d;
   font-size: 24px;
@@ -1199,6 +1190,18 @@ div[data-twttr-id] iframe {
   border-radius: 20px;
 }
 
+.versions th {
+  text-align: right;
+}
+
+.versions td, .versions th {
+  padding: 2px 5px;
+}
+
+.versions tr:nth-child(2n+1) {
+  background-color: hsl(198, 100%, 94%);
+}
+
 @media only screen
   and (max-device-width: 1024px) {
   #content {
@@ -1283,88 +1286,64 @@ div.algolia-search-wrapper {
   margin-left: 15px;
 }
 
+.algolia-autocomplete .aa-dropdown-menu {
+  margin-left: -210px;
+  margin-top: -4px;
+}
+
 @media screen and (max-width: 960px) {
   div.algolia-search-wrapper {
     display: none;
   }
 }
 
 input#algolia-doc-search {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  background: transparent url('../img/search.png') no-repeat left center;
+  background: transparent url('../img/search.png') no-repeat 10px center;
   background-size: 16px 16px;
 
-  padding-left: 30px;
+  padding: 0 10px;
+  padding-left: 35px;
+  margin-top: 10px;
+  height: 30px;
   font-size: 16px;
   line-height: 20px;
-  background-color: #3B3738;
-  border-bottom: solid 3px #3B3738;
+  background-color: #555;
+  border-radius: 4px;
   color: white;
   outline: none;
-  width: 130px;
-  height: 53px;
-
-  transition: border-color .2s ease, width .2s ease;
-  -webkit-transition: border-color .2s ease, width .2s ease;
-  -moz-transition: border-color .2s ease, width .2s ease;
-  -o-transition: border-color .2s ease, width .2s ease;
+  border: none;
+  width: 170px;
 }
 
 input#algolia-doc-search:focus {
-  border-color: #05A5D1;
-  width: 240px;
-}
-
-@media screen and (max-width: 1085px) {
-  input#algolia-doc-search:focus {
-    width: 178px;
-  }
+  width: 220px;
 }
 
 .algolia-autocomplete {
   vertical-align: top;
   height: 53px;
-
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-/* Bottom border of each suggestion */
-.algolia-docsearch-suggestion {
-  border-bottom-color: #05A5D1;
-}
-/* Main category headers */
 .algolia-docsearch-suggestion--category-header {
   background-color: #3B3738;
 }
-/* Highlighted search terms */
 .algolia-docsearch-suggestion--highlight {
   color: #05A5D1;
 }
-/* Highligted search terms in the main category headers */
 .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight  {
   background-color: #05A5D1;
 }
-/* Currently selected suggestion */
 .aa-cursor .algolia-docsearch-suggestion--content {
   color: #05A5D1;
 }
 .aa-cursor .algolia-docsearch-suggestion {
   background: hsl(198, 100%, 96%);
 }
-
-/* For bigger screens, when displaying results in two columns */
-@media (min-width: 768px) {
-  /* Bottom border of each suggestion */
-  .algolia-docsearch-suggestion {
-    border-bottom-color: hsl(198, 100%, 94%);
-  }
-  /* Left column, with secondary category header */
-  .algolia-docsearch-suggestion--subcategory-column {
-    border-right-color: hsl(198, 100%, 94%);
-    background-color: hsl(198, 100%, 96%);
-    color: #3B3738;
-  }
+.algolia-docsearch-suggestion {
+  border-bottom-color: hsl(198, 100%, 94%);
+}
+.algolia-docsearch-suggestion--subcategory-column {
+  border-right-color: hsl(198, 100%, 94%);
+  background-color: hsl(198, 100%, 96%);
+  color: #3B3738;
 }
diff --git a/website/src/react-native/versions.js b/website/src/react-native/versions.js
@@ -13,19 +13,30 @@ var Metadata = require('Metadata');
 
 var versions = React.createClass({
   render: function() {
-
     var availableDocs = (Metadata.config.RN_AVAILABLE_DOCS_VERSIONS || '').split(',');
 
     var versions = [
       {
         title: 'master',
         path: '/react-native/releases/next',
+        release: null
       },
     ].concat(availableDocs.map((version) => {
       const isLatest =  Metadata.config.RN_LATEST_VERSION === version;
+      const isRC = Metadata.config.RN_LATEST_VERSION < version;
+
+      var title = version;
+      if (isLatest) {
+        title = '(current) ' + title;
+      }
+      if (isRC) {
+        title += '-rc';
+      }
+
       return {
-        title: isLatest ? `${version} (current)` : version,
-        path: isLatest ? '/react-native' : '/react-native/releases/' + version
+        title: title,
+        path: isLatest ? '/react-native' : '/react-native/releases/' + version,
+        release: 'https://github.com/facebook/react-native/releases/tag/v' + version + '.0' + (isRC ? '-rc' : '')
       }
     }));
 
@@ -34,20 +45,29 @@ var versions = React.createClass({
         {
           title: 'current',
           path: '/react-native',
+          release: null
         },
       ].concat(versions);
     }
 
-    var versionsLi = versions.map((version) =>
-      <li><a href={version.path}>{version.title}</a></li>
-    );
     return (
       <Site section="versions" title="Documentation archive">
-        <section className="content wrap versions documentationContent">
-          <h1>Documentation archive</h1>
-          <ul>
-            {versionsLi}
-          </ul>
+        <section className="content wrap documentationContent nosidebar">
+          <div className="inner-content">
+            <h1>React Native Versions</h1>
+            <p>React Native is following a 2-week train release. Every two weeks, a Release Candidate (rc) branch is created off of master and the previous rc branch is being officially released.</p>
+            <table className="versions">
+              <tbody>
+                {versions.map((version) =>
+                  <tr>
+                    <th>{version.title}</th>
+                    <td><a href={version.path}>Docs</a></td>
+                    <td>{version.release && <a href={version.release}>Release Notes</a>}</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
         </section>
       </Site>
     );