Merge pull request #6 from mumairofficial/master

RTL support for Urdu version - Resolves #4
stale-reactjs-org-translations · May 15, 2019 · d848779 · d848779
2 parents b91049c + 939533f
commit d848779
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -10,11 +10,11 @@ This repo contains the source code and documentation powering [reactjs.org](http
 1. Node: any 8.x version starting with 8.4.0 or greater
 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
 1. A fork of the repo (for any contributions)
-1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine
+1. A clone of the [reactjs.org repo](https://github.com/reactjs/ur.reactjs.org) on your local machine
 
 ### Installation
 
-1. `cd reactjs.org` to go into the project root
+1. `cd ur.reactjs.org` to go into the project root
 1. `yarn` to install the website's npm dependencies
 
 ### Running locally
@@ -26,11 +26,11 @@ This repo contains the source code and documentation powering [reactjs.org](http
 
 ### Guidelines
 
-The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
+The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/ur.reactjs.org/blob/master/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.
 
 ### Create a branch
 
-1. `git checkout master` from any folder in your local `reactjs.org` repository
+1. `git checkout master` from any folder in your local `ur.reactjs.org` repository
 1. `git pull origin master` to ensure you have the latest main code
 1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch
 

diff --git a/src/components/ButtonLink/ButtonLink.js b/src/components/ButtonLink/ButtonLink.js
@@ -39,7 +39,9 @@ const ButtonLink = ({children, type, ...rest}) => {
   return (
     <Link {...rest} css={[style, typeStyle]}>
       {children}
-      {type === 'secondary' && <ArrowSvg cssProps={{marginLeft: 10}} />}
+      {type === 'secondary' && (
+        <ArrowSvg cssProps={{marginRight: 10, transform: 'rotate(180deg)'}} />
+      )}
     </Link>
   );
 };

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
@@ -77,6 +77,7 @@ class CodeEditor extends Component {
     return (
       <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
         <div
+          dir="ltr"
           css={{
             [media.greaterThan('medium')]: {
               display: 'flex',

diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
@@ -47,7 +47,7 @@ class CodeExample extends Component {
 
               '& p': {
                 marginTop: 15,
-                marginRight: 40,
+                marginLeft: 40,
                 lineHeight: 1.7,
 
                 [media.greaterThan('xlarge')]: {

diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
@@ -35,6 +35,7 @@ class Template extends Component<Props> {
 
     return (
       <div
+        dir="rtl"
         css={{
           display: 'flex',
           flexDirection: 'column',

diff --git a/src/components/LayoutFooter/ExternalFooterLink.js b/src/components/LayoutFooter/ExternalFooterLink.js
@@ -34,7 +34,7 @@ const ExternalFooterLink = ({children, href, target, rel}: Props) => (
       cssProps={{
         verticalAlign: -2,
         display: 'inline-block',
-        marginLeft: 5,
+        marginRight: 5,
         color: colors.subtle,
       }}
     />

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
@@ -18,6 +18,7 @@ import ossLogoPng from 'images/oss_logo.png';
 
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
+    dir="rtl"
     css={{
       backgroundColor: colors.darker,
       color: colors.white,
@@ -36,14 +37,14 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           flexWrap: 'wrap',
 
           [media.between('small', 'medium')]: {
-            paddingRight: layoutHasSidebar ? 240 : null,
+            paddingLeft: layoutHasSidebar ? 240 : null,
           },
 
           [media.between('large', 'largerSidebar')]: {
-            paddingRight: layoutHasSidebar ? 280 : null,
+            paddingLeft: layoutHasSidebar ? 280 : null,
           },
           [media.between('largerSidebar', 'sidebarFixed', true)]: {
-            paddingRight: layoutHasSidebar ? 380 : null,
+            paddingLeft: layoutHasSidebar ? 380 : null,
           },
         }}>
         <div
@@ -56,7 +57,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
             [media.greaterThan('xlarge')]: {
               width: 'calc(100% / 3 * 2)',
-              paddingLeft: 40,
+              paddingRight: 40,
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
@@ -143,10 +144,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           </FooterNav>
         </div>
         <section
+          dir="ltr"
           css={{
             paddingTop: 40,
             display: 'block !important', // Override 'Installation' <style> specifics
-
+            paddingLeft: 40,
             [media.greaterThan('xlarge')]: {
               width: 'calc(100% / 3)',
               order: -1,

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
@@ -47,7 +47,7 @@ class DocSearch extends Component<{}, State> {
 
           [media.lessThan('expandedSearch')]: {
             justifyContent: 'flex-end',
-            marginRight: 10,
+            marginLeft: 10,
           },
           // TODO: Something like this could show the full search box in more cases
           // but it currently breaks its expanding animation.
@@ -59,6 +59,7 @@ class DocSearch extends Component<{}, State> {
           },
         }}>
         <input
+          dir="rtl"
           css={{
             width: '100%',
             appearance: 'none',
@@ -69,12 +70,12 @@ class DocSearch extends Component<{}, State> {
             fontWeight: 300,
             fontFamily: 'inherit',
             position: 'relative',
-            padding: '4px 4px 4px 29px',
+            padding: '5px 29px 5px 5px',
             backgroundImage: 'url(/search.svg)',
             backgroundSize: '16px 16px',
             backgroundRepeat: 'no-repeat',
             backgroundPositionY: 'center',
-            backgroundPositionX: '4px',
+            backgroundPositionX: '98%',
 
             ':focus': {
               outline: 0,
@@ -86,10 +87,10 @@ class DocSearch extends Component<{}, State> {
               fontSize: 16,
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
-              paddingLeft: '16px',
+              paddingRight: '16px',
 
               ':focus': {
-                paddingLeft: '29px',
+                paddingRight: '29px',
                 width: '8rem',
                 outline: 'none',
               },

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
@@ -18,6 +18,7 @@ import logoSvg from 'icons/logo.svg';
 
 const Header = ({location}: {location: Location}) => (
   <header
+    dir="rtl"
     css={{
       backgroundColor: colors.darker,
       color: colors.white,
@@ -62,7 +63,6 @@ const Header = ({location}: {location: Location}) => (
             },
           }}
           to="/">
-          <img src={logoSvg} alt="" height="20" />
           <span
             css={{
               color: 'inherit',
@@ -88,6 +88,7 @@ const Header = ({location}: {location: Location}) => (
             }}>
             React
           </span>
+          <img src={logoSvg} alt="" height="20" />
         </Link>
 
         <nav
@@ -158,9 +159,10 @@ const Header = ({location}: {location: Location}) => (
             //width: 'calc(100% / 4)',
             //},
           }}>
-          <Link
+          <a
             css={{
               padding: '5px 10px',
+              marginLeft: 10,
               whiteSpace: 'nowrap',
               ...fonts.small,
 
@@ -174,13 +176,22 @@ const Header = ({location}: {location: Location}) => (
                 borderRadius: 15,
               },
 
-              [media.lessThan('medium')]: {
+              [media.lessThan('large')]: {
                 display: 'none',
               },
             }}
-            to="/versions">
-            v{version}
-          </Link>
+            href="https://github.com/facebook/react/"
+            target="_blank"
+            rel="noopener">
+            GitHub
+            <ExternalLinkSvg
+              cssProps={{
+                marginLeft: 5,
+                verticalAlign: -2,
+                color: colors.subtle,
+              }}
+            />
+          </a>
           <Link
             css={{
               display: 'flex',
@@ -212,12 +223,10 @@ const Header = ({location}: {location: Location}) => (
               Languages
             </span>
           </Link>
-          <a
+          <Link
             css={{
               padding: '5px 10px',
-              marginLeft: 10,
               whiteSpace: 'nowrap',
-              ...fonts.small,
 
               ':hover': {
                 color: colors.brand,
@@ -228,23 +237,10 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
-
-              [media.lessThan('large')]: {
-                display: 'none',
-              },
             }}
-            href="https://github.com/facebook/react/"
-            target="_blank"
-            rel="noopener">
-            GitHub
-            <ExternalLinkSvg
-              cssProps={{
-                marginLeft: 5,
-                verticalAlign: -2,
-                color: colors.subtle,
-              }}
-            />
-          </a>
+            to="/versions">
+            v{version}
+          </Link>
         </div>
       </div>
     </Container>

diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
@@ -76,8 +76,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             [media.lessThan('small')]: smallScreenSidebarStyles,
 
             [media.greaterThan('medium')]: {
-              marginRight: -999,
-              paddingRight: 999,
+              marginLeft: -999,
+              paddingLeft: 999,
               backgroundColor: '#f7f7f7',
             },
 
@@ -93,8 +93,8 @@ class StickyResponsiveSidebar extends Component<Props, State> {
               height: 'calc(100vh - 60px)',
               overflowY: 'auto',
               WebkitOverflowScrolling: 'touch',
-              marginRight: -999,
-              paddingRight: 999,
+              marginLeft: -999,
+              paddingLeft: 999,
               backgroundColor: '#f7f7f7',
               opacity: '1 !important',
             },
@@ -108,7 +108,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             },
 
             [media.greaterThan('sidebarFixed')]: {
-              borderLeft: '1px solid #ececec',
+              borderRight: '1px solid #ececec',
             },
           }}>
           <div
@@ -146,7 +146,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
             display: 'none', // gets overriden at small screen sizes
             cursor: 'pointer',
             position: 'fixed',
-            right: 20,
+            left: 20,
             zIndex: 3,
             borderRadius: '50%',
             border: '1px solid rgba(255, 255, 255, 0.1)',
@@ -184,14 +184,14 @@ class StickyResponsiveSidebar extends Component<Props, State> {
                 <ChevronSvg
                   size={15}
                   cssProps={{
-                    transform: `translate(2px, ${iconOffset}px) rotate(180deg)`,
+                    transform: `translate(-2px, ${iconOffset}px) rotate(180deg)`,
                     transition: 'transform 0.2s ease',
                   }}
                 />
                 <ChevronSvg
                   size={15}
                   cssProps={{
-                    transform: `translate(2px, ${0 - iconOffset}px)`,
+                    transform: `translate(-2px, ${0 - iconOffset}px)`,
                     transition: 'transform 0.2s ease',
                   }}
                 />

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -53,7 +53,7 @@ class Home extends Component {
           title="React &ndash; A JavaScript library for building user interfaces"
           ogUrl={createOgUrl('index.html')}
         />
-        <div css={{width: '100%'}}>
+        <div dir="rtl" css={{width: '100%'}}>
           <header
             css={{
               backgroundColor: colors.dark,
@@ -200,23 +200,23 @@ class Home extends Component {
                         display: 'flex',
                         flexDirection: 'column',
                         flex: '0 1 33%',
-                        marginLeft: 40,
+                        marginRight: 40,
 
                         '&:first-of-type': {
-                          marginLeft: 0,
+                          marginRight: 0,
 
                           [media.lessThan('medium')]: {
-                            marginLeft: 10,
+                            marginRight: 10,
                           },
                         },
 
                         [media.lessThan('medium')]: {
                           display: 'inline-block',
                           verticalAlign: 'top',
-                          marginLeft: 0,
+                          marginRight: 0,
                           whiteSpace: 'normal',
                           width: '75%',
-                          marginRight: 20,
+                          marginLeft: 20,
                           paddingBottom: 40,
 
                           '&:first-of-type': {
@@ -326,13 +326,13 @@ const CtaItem = ({children, primary = false}) => (
       },
 
       [media.greaterThan('xlarge')]: {
-        paddingLeft: 40,
+        paddingRight: 40,
       },
 
       '&:first-child': {
-        textAlign: 'right',
+        textAlign: 'left',
         paddingRight: 7,
-        paddingLeft: 7,
+        paddingLeft: 15,
         [media.lessThan('small')]: {
           marginBottom: 10,
         },
@@ -342,7 +342,7 @@ const CtaItem = ({children, primary = false}) => (
         paddingRight: 7,
         paddingLeft: 7,
         [media.greaterThan('small')]: {
-          paddingLeft: 15,
+          paddingRight: 15,
         },
         [media.lessThan('small')]: {
           marginBottom: 10,