Skip to content
This repository has been archived by the owner on Apr 21, 2023. It is now read-only.

RTL support for Urdu version #6

Merged
merged 2 commits into from
May 15, 2019
Merged

RTL support for Urdu version #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a08da11
Updates in readme file
mumairofficial May 12, 2019
939533f
RTL support for Urdu language
mumairofficial May 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand Down
4 changes: 3 additions & 1 deletion src/components/ButtonLink/ButtonLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
1 change: 1 addition & 0 deletions src/components/CodeEditor/CodeEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion src/components/CodeExample/CodeExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class CodeExample extends Component {

'& p': {
marginTop: 15,
marginRight: 40,
marginLeft: 40,
lineHeight: 1.7,

[media.greaterThan('xlarge')]: {
Expand Down
1 change: 1 addition & 0 deletions src/components/Layout/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ class Template extends Component<Props> {

return (
<div
dir="rtl"
css={{
display: 'flex',
flexDirection: 'column',
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayoutFooter/ExternalFooterLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const ExternalFooterLink = ({children, href, target, rel}: Props) => (
cssProps={{
verticalAlign: -2,
display: 'inline-block',
marginLeft: 5,
marginRight: 5,
color: colors.subtle,
}}
/>
Expand Down
12 changes: 7 additions & 5 deletions src/components/LayoutFooter/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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}>
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 6 additions & 5 deletions src/components/LayoutHeader/DocSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -59,6 +59,7 @@ class DocSearch extends Component<{}, State> {
},
}}>
<input
dir="rtl"
css={{
width: '100%',
appearance: 'none',
Expand All @@ -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,
Expand All @@ -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',
},
Expand Down
46 changes: 21 additions & 25 deletions src/components/LayoutHeader/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -62,7 +63,6 @@ const Header = ({location}: {location: Location}) => (
},
}}
to="/">
<img src={logoSvg} alt="" height="20" />
<span
css={{
color: 'inherit',
Expand All @@ -88,6 +88,7 @@ const Header = ({location}: {location: Location}) => (
}}>
React
</span>
<img src={logoSvg} alt="" height="20" />
</Link>

<nav
Expand Down Expand Up @@ -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,

Expand All @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},

Expand All @@ -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',
},
Expand All @@ -108,7 +108,7 @@ class StickyResponsiveSidebar extends Component<Props, State> {
},

[media.greaterThan('sidebarFixed')]: {
borderLeft: '1px solid #ececec',
borderRight: '1px solid #ececec',
},
}}>
<div
Expand Down Expand Up @@ -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)',
Expand Down Expand Up @@ -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',
}}
/>
Expand Down
20 changes: 10 additions & 10 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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': {
Expand Down Expand Up @@ -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,
},
Expand All @@ -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,
Expand Down
Loading