status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Increase text size, rename Tutorial, update nav... 

Summary:
Several things here. See commits.
Closes https://github.com/facebook/react-native/pull/14757

Differential Revision: D5332034

Pulled By: hramos

fbshipit-source-id: 6ff9e33c0bc9d2ea3dd5b1a4752621ce7e83f9bb
This commit is contained in:
Hector Ramos 2017-06-27 14:10:12 -07:00 committed by Facebook Github Bot
parent 7ee051db28
commit 75eb55096e
9 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/Tutorial.md
View File

@ -1,6 +1,6 @@
---
id: tutorial
title: Tutorial
title: Learn the Basics
layout: docs
category: The Basics
permalink: docs/tutorial.html

1
website/core/HeaderLinks.js
View File

@ -17,7 +17,6 @@ var HeaderLinks = React.createClass({
linksInternal: [
{section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
{section: 'support', href: '/react-native/support.html', text: 'Help'},
{section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'},
{section: 'blog', href: '/react-native/blog/', text: 'Blog'},
],
linksExternal: [

40
website/core/Site.js
View File

@ -204,11 +204,11 @@ var Site = React.createClass({
<a href="docs/getting-started.html">
Getting Started
</a>
<a href="docs/tutorial.html">Tutorial</a>
<a href="docs/tutorial.html">Learn the Basics</a>
<a
href="docs/integration-with-existing-apps.html"
href="docs/components-and-apis.html"
>
Integration With Existing Apps
Components and APIs
</a>
<a href="docs/more-resources.html">
More Resources
@ -221,13 +221,13 @@ var Site = React.createClass({
</a>
</h5>
<a href="/react-native/showcase.html">
Showcase
Who's using React Native?
</a>
<a
href="http://www.meetup.com/topics/react-native/"
target="_blank"
>
Upcoming Events
Meetups
</a>
<a
href="https://www.facebook.com/groups/react.native.community"
@ -275,18 +275,31 @@ var Site = React.createClass({
<div>
<h5>More</h5>
<a href="/react-native/blog">Blog</a>
<a
href="https://github.com/facebook/react-native"
target="_blank"
>
GitHub
</a>
<a
href="http://facebook.github.io/react/"
target="_blank"
>
React
</a>
<a
href="https://github.com/facebook/react-native"
target="_blank"
>
GitHub
</a>
<div className="githubButton">
<a
className="github-button"
href="https://github.com/facebook/react-native"
data-icon="octicon-star"
data-count-href="/facebook/react-native/stargazers"
data-count-api="/repos/facebook/react-native#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star facebook/react-native on GitHub"
>
Star
</a>
</div>
</div>
</section>
<section className="newsletter">
@ -405,6 +418,11 @@ var Site = React.createClass({
type="text/javascript"
src="https://snack.expo.io/embed.js"
/>
<script
async
defer
src="https://buttons.github.io/buttons.js"
/>
</body>
</html>
);

1
website/layout/BlogPostLayout.js
View File

@ -31,7 +31,6 @@ var BlogPostLayout = React.createClass({
authorTwitter={this.props.metadata.authorTwitter}
image={this.props.metadata.hero ? 'https://facebook.github.io' + this.props.metadata.hero : 'https://facebook.github.io/react-native/img/opengraph.png' }
>
<Hero title="React Native Blog" subtitle="Stay up-to-date with the latest React Native news and events." />
<section className="content wrap documentationContent">
<BlogPost
post={this.props.metadata}

4
website/layout/DocsLayout.js
View File

@ -48,8 +48,8 @@ var DocsLayout = React.createClass({
{(metadata.banner === 'ejected') ? <EjectBanner/> : null}
<Marked>{content}</Marked>
<div className="docs-prevnext">
{metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
{metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
{metadata.previous && <a className="docs-prev btn" href={'docs/' + metadata.previous + '.html#content'}>&larr; Previous</a>}
{metadata.next && <a className="docs-next btn" href={'docs/' + metadata.next + '.html#content'}>Continue Reading &rarr;</a>}
</div>
<Footer path={'docs/' + metadata.filename} />
</div>

16
website/showcase.json
View File

@ -73,7 +73,7 @@
"icon": "http://is5.mzstatic.com/image/thumb/Purple111/v4/5f/e9/00/5fe90072-c9ce-87c3-bdfe-8611f9325f0e/source/175x175bb.jpg",
"infoLink": "https://eng.uber.com/ubereats-react-native/",
"infoTitle": "Powering UberEATS with React Native and Uber Engineering",
"pinned": true
"pinned": false
},
{
"name": "Baidu Mobile (手机百度)",
@ -82,7 +82,7 @@
"linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8",
"infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
"infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China",
"pinned": true
"pinned": false
},
{
"name": "Bloomberg",
@ -91,7 +91,7 @@
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
"infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
"infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
"pinned": true
"pinned": false
},
{
"name": "Vogue",
@ -99,7 +99,7 @@
"linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
"infoLink": "http://www.vogue.com/app",
"infoTitle": "",
"pinned": true
"pinned": false
},
{
"name": "li.st",
@ -107,7 +107,7 @@
"linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp",
"infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE",
"infoTitle": "Building li.st for Android with React Native",
"pinned": true
"pinned": false
},
{
"name": "Discord",
@ -115,7 +115,7 @@
"linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
"infoLink": "https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933",
"infoTitle": "Using React Native: One Year Later",
"pinned": true
"pinned": false
},
{
"name": "Gyroscope",
@ -123,7 +123,7 @@
"linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
"infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
"infoTitle": "Building a visualization experience with React Native",
"pinned": true
"pinned": false
},
{
"name": "Townske",
@ -131,7 +131,7 @@
"linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
"infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c",
"infoTitle": "The experience of a web developer building an app using React Native",
"pinned": true
"pinned": false
},
{
"name": "SoundCloud Pulse",

25
website/src/react-native/css/react-native.css
View File

@ -443,7 +443,7 @@ h1, h2, h3, h4 {
line-height: 40px; }
h1 {
font-size: 39px; }
font-size: 40px; }
h2 {
font-size: 31px; }
@ -506,6 +506,9 @@ html * {
color-profile: sRGB;
rendering-intent: auto; }
.content {
font-size: 18px;
}
.subHeader {
font-size: 21px;
font-weight: 300;
@ -605,7 +608,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
text-decoration: none; }
.nav-main .nav-site-wrapper {
display: inline; }
display: inline;
float: right;
}
.nav-main .nav-site-internal {
margin: 0 0 0 20px; }
@ -719,7 +724,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
padding-bottom: 0; }
.nav-docs-section h3 {
color: white;
font-size: 16px;
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin-top: 0;
@ -928,7 +933,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
margin-bottom: 60px; }
.docs-nextprev {
*zoom: 1; }
*zoom: 1;
}
.docs-nextprev:before, .docs-nextprev:after {
content: " ";
@ -1002,7 +1008,7 @@ h2 {
.docs-prevnext {
min-width: 320px;
max-width: 640px;
margin: 0 auto 40px;
margin: 40px auto;
padding-bottom: 20px; }
.button {
@ -1534,7 +1540,7 @@ table.versions {
.edit-page-block {
padding: 5px;
margin-bottom: 40px;
margin: 40px auto;
font-size: 12px;
color: #887766;
text-align: center;
@ -1987,7 +1993,7 @@ article li {
padding: 9px 18px;
border-radius: 4px;
text-align: center;
font-size: 12px; }
}
.btn a {
text-decoration: none !important; }
@ -2019,7 +2025,7 @@ article li {
footer.nav-footer {
box-sizing: border-box;
border: none;
font-weight: 300;
font-weight: normal;
color: #202020;
font-size: 15px;
line-height: 24px;
@ -2085,7 +2091,8 @@ footer .sitemap h6,
footer .sitemap h5 > a,
footer .sitemap h6 > a {
color: #05A5D1;
font-weight: 900; }
font-size: 15px;
}
footer .sitemap h5 > a,
footer .sitemap h6 > a {

7
website/src/react-native/index.js vendored
View File

@ -47,7 +47,7 @@ const index = React.createClass({
<Hero title="React Native" subtitle="Learn once, write anywhere: Build mobile apps with React">
<div className="buttons-unit">
<a href="docs/getting-started.html" className="button">Get Started</a>
<a href="docs/tutorial.html" className="button">Take the Tutorial</a>
<a href="docs/tutorial.html" className="button">Learn the Basics</a>
</div>
</Hero>
@ -117,7 +117,7 @@ class AwkwardScrollingImageWithText extends Component {
<h2>Don't waste time recompiling</h2>
<p>
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With <a href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Hot Reloading</a>, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
</p>
<br />
<img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
@ -160,9 +160,6 @@ class SomethingFast extends Component {
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
</p>
<AppList apps={pinnedApps} />
<p className="footnote">
Some of these are hybrid native/React Native apps.
</p>
<div className="buttons-unit">
<a href="/react-native/showcase.html" className="button">More React Native apps</a>
</div>

2
website/src/react-native/support.js vendored
View File

@ -141,7 +141,7 @@ var support = React.createClass({
>
open source
</a>
! If you want to contribute, take a look at the
! If you want to contribute, read the <a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">contributor guidelines</a>, then take a look at the
{' '}
<a
href="https://github.com/facebook/react-native/wiki/Roadmap"