From 382abb4b4501426344565803fee1c4ad131648fc Mon Sep 17 00:00:00 2001 From: Hector Ramos Date: Wed, 4 Oct 2017 13:20:28 -0700 Subject: [PATCH] Adjust layout --- docs/Props.md | 4 +- website/package.json | 3 - website/pages/en/index.js | 92 ++++++++++++++--------------- website/siteConfig.js | 8 ++- website/static/css/prism.css | 21 ------- website/static/css/react-native.css | 27 +++++++-- website/static/css/showcase.css | 7 ++- 7 files changed, 83 insertions(+), 79 deletions(-) diff --git a/docs/Props.md b/docs/Props.md index 2a66422cfe2..e65a926f707 100644 --- a/docs/Props.md +++ b/docs/Props.md @@ -8,7 +8,7 @@ Most components can be customized when they are created, with different paramete For example, one basic React Native component is the `Image`. When you create an image, you can use a prop named `source` to control what image it shows. - +```ReactNativeWebPlayer import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; @@ -25,7 +25,7 @@ export default class Bananas extends Component { // skip this line if using Create React Native App AppRegistry.registerComponent('AwesomeProject', () => Bananas); - +``` Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX. diff --git a/website/package.json b/website/package.json index a7eb5905009..bdc1d5c3c56 100644 --- a/website/package.json +++ b/website/package.json @@ -4,8 +4,5 @@ "build": "docusaurus-build", "publish-gh-pages": "docusaurus-publish", "examples": "docusaurus-examples" - }, - "devDependencies": { - "docusaurus": "^1.0.0-alpha.35" } } diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 3420782ab07..ba0e0af76e0 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -131,23 +131,23 @@ class Features extends React.Component { {`import React, { Component } from 'react'; - import { Text, View } from 'react-native'; +import { Text, View } from 'react-native'; - class WhyReactNativeIsSoGreat extends Component { - render() { +class WhyReactNativeIsSoGreat extends Component { + render() { return ( - - - If you like React on the web, you'll like React Native. - - - You just use native components like 'View' and 'Text', - instead of web components like 'div' and 'span'. - - + + + If you like React on the web, you'll like React Native. + + + You just use native components like 'View' and 'Text', + instead of web components like 'div' and 'span'. + + ); - } - }`} + } +}`} @@ -163,30 +163,30 @@ class Features extends React.Component { {`import React, { Component } from 'react'; - import { Image, ScrollView, Text } from 'react-native'; +import { Image, ScrollView, Text } from 'react-native'; - class AwkwardScrollingImageWithText extends Component { - render() { +class AwkwardScrollingImageWithText extends Component { + render() { return ( - - - - On iOS, a React Native ScrollView uses a native UIScrollView. - On Android, it uses a native ScrollView. + + + + On iOS, a React Native ScrollView uses a native UIScrollView. + On Android, it uses a native ScrollView. - On iOS, a React Native Image uses a native UIImageView. - On Android, it uses a native ImageView. + On iOS, a React Native Image uses a native UIImageView. + On Android, it uses a native ImageView. - React Native wraps the fundamental native components, giving you - the performance of a native app, plus the clean design of React. - - + React Native wraps the fundamental native components, giving you + the performance of a native app, plus the clean design of React. + + ); - } - }`} + } +}`} @@ -219,22 +219,22 @@ class Features extends React.Component { {`import React, { Component } from 'react'; - import { Text, View } from 'react-native'; - import { TheGreatestComponentInTheWorld } from './your-native-code'; +import { Text, View } from 'react-native'; +import { TheGreatestComponentInTheWorld } from './your-native-code'; - class SomethingFast extends Component { - render() { +class SomethingFast extends Component { + render() { return ( - - - - TheGreatestComponentInTheWorld could use native Objective-C, - Java, or Swift - the product development process is the same. - - + + + + TheGreatestComponentInTheWorld could use native Objective-C, + Java, or Swift - the product development process is the same. + + ); - } - }`} + } +}`} diff --git a/website/siteConfig.js b/website/siteConfig.js index f97e403d908..5b6185f0287 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -50,8 +50,12 @@ const siteConfig = { /* remove this section to disable search bar */ algolia: { apiKey: - "0f9f28b9ab9efae89810921a351753b5" /* use your search-only api key */, - indexName: "github" + "2c98749b4a1e588efec53b2acec13025" /* use your search-only api key */, + indexName: "react-native-versions", + algoliaOptions: { + facetFilters: [ "tags:VERSION" ], + hitsPerPage: 5 + } }, facebookAppId: '1677033832619985', twitter: 'reactnative' diff --git a/website/static/css/prism.css b/website/static/css/prism.css index 762b9adf8e1..e69de29bb2d 100644 --- a/website/static/css/prism.css +++ b/website/static/css/prism.css @@ -1,21 +0,0 @@ -.prism { - border-left: 4px solid $secondaryColor; -} - -.token.keyword { - color: #1990b8; -} - -.token.string, -.token.regex { - color: #2f9c0a; -} - -.token.boolean, -.token.number { - color: #c92c2c; -} - -.token.comment { - color: #7d8b99; -} diff --git a/website/static/css/react-native.css b/website/static/css/react-native.css index f36d33501f8..398d2fb87a6 100644 --- a/website/static/css/react-native.css +++ b/website/static/css/react-native.css @@ -121,6 +121,10 @@ code { } } +.wrapper { + max-width: 1200px; +} + .container { max-width: 900px; } @@ -198,8 +202,23 @@ p { max-width: 800px; } -/* @media only screen and (min-device-width: 768px) { - .container { - margin-right: 0; +.prism { + white-space: pre-wrap; + font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace; + font-size: 13px; + line-height: 20px; + border-left: 4px solid #05A5D1; + padding: 5px 10px; + background-color: rgba(5, 165, 209, 0.05); + overflow: auto; } + +.prism + .prism { + margin-top: 10px; } + +@media only screen and (max-device-width: 1024px) { + .prism { + padding: 4px 8px; + margin-left: -12px; + font-size: 11px; } -} */ +} diff --git a/website/static/css/showcase.css b/website/static/css/showcase.css index 5f3c842f9eb..3e837c36f72 100644 --- a/website/static/css/showcase.css +++ b/website/static/css/showcase.css @@ -77,8 +77,13 @@ color: #484848; } +@media only screen and (min-device-width: 736px) { + .showcaseSection .showcase img { + width: 100px; + } +} + .showcaseSection .showcase img { - width: 100px; height: 100px; border-radius: 20px; }