Skip to content

Commit

Permalink
Merge pull request #8 from asantarissy/rtl-support
Browse files Browse the repository at this point in the history 
RTL Support
  • Loading branch information
@asantarissy
asantarissy committed Feb 17, 2019
2 parents cd6ca87 + b00486f commit dcf8442
Show file tree
Hide file tree
Showing 15 changed files with 84 additions and 72 deletions.
4 changes: 3 additions & 1 deletion src/components/ButtonLink/ButtonLink.js
View file
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
Expand Up @@ -71,6 +71,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
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
3 changes: 2 additions & 1 deletion src/components/Layout/Layout.js
View file
Expand Up @@ -39,7 +39,8 @@ class Template extends Component<Props> {
display: 'flex',
flexDirection: 'column',
minHeight: 'calc(100vh - 40px)',
}}>
}}
dir="rtl">
<Header location={location} />
<Flex
direction="column"
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayoutFooter/ExternalFooterLink.js
View file
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
11 changes: 7 additions & 4 deletions src/components/LayoutFooter/Footer.js
View file
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,9 +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)',
Expand Down
11 changes: 6 additions & 5 deletions src/components/LayoutHeader/DocSearch.js
View file
Expand Up @@ -49,7 +49,7 @@ class DocSearch extends Component<{}, State> {
justifyContent: 'flex-end',
},
[media.lessThan('large')]: {
marginRight: 10,
marginLeft: 10,
},
[media.between('small', 'medium')]: {
width: 'calc(100% / 3)',
Expand All @@ -62,6 +62,7 @@ class DocSearch extends Component<{}, State> {
},
}}>
<input
dir="rtl"
css={{
appearance: 'none',
background: 'transparent',
Expand All @@ -71,12 +72,12 @@ class DocSearch extends Component<{}, State> {
fontWeight: 300,
fontFamily: 'inherit',
position: 'relative',
padding: '5px 5px 5px 29px',
padding: '5px 29px 5px 5px',
backgroundImage: 'url(/search.svg)',
backgroundSize: '16px 16px',
backgroundRepeat: 'no-repeat',
backgroundPositionY: 'center',
backgroundPositionX: '5px',
backgroundPositionX: '98%',

':focus': {
outline: 0,
Expand All @@ -93,10 +94,10 @@ class DocSearch extends Component<{}, State> {
[media.lessThan('small')]: {
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
39 changes: 20 additions & 19 deletions src/components/LayoutHeader/Header.js
View file
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 @@ -146,9 +147,10 @@ const Header = ({location}: {location: Location}) => (
width: 'calc(100% / 6)',
},
}}>
<Link
<a
css={{
padding: '5px 10px',
marginRight: 10,
whiteSpace: 'nowrap',
...fonts.small,

Expand All @@ -162,13 +164,21 @@ const Header = ({location}: {location: Location}) => (
borderRadius: 15,
},
}}
to="/versions">
v{version}
</Link>
<a
href="https://github.com/facebook/react/"
target="_blank"
rel="noopener">
GitHub
<ExternalLinkSvg
cssProps={{
marginLeft: 5,
verticalAlign: -2,
color: colors.subtle,
}}
/>
</a>
<Link
css={{
padding: '5px 10px',
marginLeft: 10,
whiteSpace: 'nowrap',
...fonts.small,

Expand All @@ -182,18 +192,9 @@ const Header = ({location}: {location: Location}) => (
borderRadius: 15,
},
}}
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
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
Expand Up @@ -54,7 +54,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 @@ -198,23 +198,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 @@ -327,17 +327,17 @@ const CtaItem = ({children, primary = false}) => (
},

[media.greaterThan('xlarge')]: {
paddingLeft: 40,
paddingRight: 40,
},

'&:first-child': {
textAlign: 'right',
paddingRight: 15,
textAlign: 'left',
paddingLeft: 15,
},

'&:nth-child(2)': {
[media.greaterThan('small')]: {
paddingLeft: 15,
paddingRight: 15,
},
},
}}>
Expand Down
6 changes: 3 additions & 3 deletions src/templates/components/NavigationFooter/NavigationFooter.js
View file
Expand Up @@ -26,15 +26,15 @@ const NavigationFooter = ({next, prev, location}) => {
halign="space-between"
css={{
[media.between('small', 'medium')]: {
paddingRight: 240,
paddingLeft: 240,
},

[media.between('large', 'largerSidebar')]: {
paddingRight: 280,
paddingLeft: 280,
},

[media.between('largerSidebar', 'sidebarFixed', true)]: {
paddingRight: 380,
paddingLeft: 380,
},
}}>
<Flex basis="50%" type="li">
Expand Down
4 changes: 2 additions & 2 deletions src/templates/components/Sidebar/Section.js
View file
Expand Up @@ -46,7 +46,6 @@ class Section extends React.Component {
},
},
}}>
{section.title}
<ChevronSvg
cssProps={{
marginLeft: 7,
Expand All @@ -58,6 +57,7 @@ class Section extends React.Component {
},
}}
/>
{section.title}
</MetaTitle>
</button>
<ul
Expand Down Expand Up @@ -92,7 +92,7 @@ class Section extends React.Component {
})}

{item.subitems && (
<ul css={{marginLeft: 20}}>
<ul css={{marginRight: 20}}>
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
Expand Down
4 changes: 2 additions & 2 deletions src/templates/components/Sidebar/Sidebar.js
View file
Expand Up @@ -38,11 +38,11 @@ class Sidebar extends Component {
halign="stretch"
css={{
width: '100%',
paddingLeft: 20,
paddingRight: 20,
position: 'relative',

[media.greaterThan('largerSidebar')]: {
paddingLeft: 40,
paddingRight: 40,
},

[media.lessThan('small')]: {
Expand Down

0 comments on commit dcf8442

Please sign in to comment.