Update dos and examples for better rtl support (#125)

gpbl · Jan 26, 2016 · e0a0d6e · e0a0d6e
1 parent 430b939
commit e0a0d6e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git a/docs/Localization.md b/docs/Localization.md
@@ -1,9 +1,6 @@
 # Localization
 
-As default, react-day-picker is localized in English, but it can be localized into any language. 
-
-To localize the day picker, there are two options:
-
-1. [Use the provided utility based on moment.js](LocalizationMoment.md)
-2. [Create your own utility with your favorite i18n library](LocalizationCustom.md)
+react-day-picker can be localized into any language (english is the default). You have two options:
 
+1. [using the provided utility based on moment.js](LocalizationMoment.md)
+2. [creating your own localization or use another i18n library](LocalizationCustom.md)
diff --git a/docs/LocalizationCustom.md b/docs/LocalizationCustom.md
@@ -2,8 +2,7 @@
 
 You can define your custom utility to localize the day picker – for example to reduce the size of your JavaScript bundle without using [external libraries](LocalizationMoment.md).
 
-The `DayPicker` component uses [localeUtils](LocaleUtils.md), a small set of functions defining how to display the day picker for the given locale.
-You can overwrite its behavior passing a custom set of functions to the `localeUtils` props.
+The `DayPicker` component uses [localeUtils](LocaleUtils.md), a small set of functions defining how to display the day picker for the given locale. To localize the component, you can overwrite its behavior by passing your own custom set of functions to the `localeUtils` props.
 
 [See an example](http://www.gpbl.org/react-day-picker/examples/#localizedCustom).
 

diff --git a/examples/src/Examples.js b/examples/src/Examples.js
@@ -54,17 +54,17 @@ const EXAMPLES = {
   },
   localized: {
     title: "Localization (moment.js)",
-    description: "This calendar is localized using moment.js. <a href='http://www.gpbl.org/react-day-picker/docs/LocalizationMoment.html'>Read more about localization</a>.",
+    description: "This calendar is localized using moment.js. <a href='http://www.gpbl.org/react-day-picker/docs/Localization.html'>Read more about localization</a>.<br>Note the use of the <a href='https://www.w3.org/TR/html/dom.html#the-dir-attribute'>dir attribute</a> to support <abbr title='Right to left'>RTL</abbr> languages.",
     Component: Localized
   },
   localizedCustom: {
     title: "Localization (custom)",
-    description: "If you prefer to not include external libraries to localize the calendar, you can provide your own <code>localeUtils</code> which is basically a rewrite of the <a href='https://github.com/gpbl/react-day-picker/blob/master/src/LocaleUtils.js'>original one</a>. The following example provides Russian and English localizations.",
+    description: "If you prefer to not include external libraries to localize the calendar, you can provide your own <code>localeUtils</code> which is basically a rewrite of the <a href='https://github.com/gpbl/react-day-picker/blob/master/src/LocaleUtils.js'>original one</a>. The following example provides Russian and English localizations.  <a href='http://www.gpbl.org/react-day-picker/docs/Localization.html'>Read more about localization</a>.",
     Component: LocalizedCustom
   },
   yearNavigation: {
     title: "Year Navigation",
-    description: "With the <code>captionElement</code> prop, you can use your own element as month caption. In this example, the caption element is a form to navigate between years and months.",
+    description: "With the <code>captionElement</code> prop, you can use your own element as month caption. In this example, the caption element is a form to navigate up to the next 10 years.",
     Component: YearNavigation
   },
   touch: {

diff --git a/examples/src/examples/Restricted.js b/examples/src/examples/Restricted.js
@@ -12,7 +12,7 @@ export default function Restricted() {
   return (
     <DayPicker
       enableOutsideDays
-      numberOfMonths={ 3 }
+      numberOfMonths={ 2 }
       initialMonth={ fromMonth }
       fromMonth={ fromMonth }
       toMonth={ toMonth }

diff --git a/examples/src/styles/main.css b/examples/src/styles/main.css
@@ -3,6 +3,7 @@ body {
   font-weight: 300;
   margin: 0;
   padding: 0;
+  color: #555;
 }
 
 h1 {
@@ -73,7 +74,7 @@ input {
 
 select {
   appearance: none;
-  padding: .5rem 1rem;
+  padding: .5rem 1rem .5rem 2rem;
   border: 1px solid #DCE0E0;
   color: #565A5C;
   font-size: 16px;
@@ -86,16 +87,15 @@ select {
   width: 70%;
   display: inline-block;
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDAuMDAwMDAwKSIgZmlsbD0iIzU2NUE1QyI+CiAgICAgICAgICAgIDxwb2x5Z29uIHBvaW50cz0iMy41IDAgNyA1IDAgNSAiPjwvcG9seWdvbj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsNyBMNyw3IEwzLjUsMTIgTDAsNyBaIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
-  background-position: 98% center;
+  background-position: .75rem center;
   background-repeat: no-repeat;
 }
 
 .DayPicker-Caption select {
   border: 0;
   width: auto;
-  padding-left: .5rem;
-  margin-top: -0.4rem;
-  margin-right: 3px;
+  margin-top: -0.35rem;
+  margint-right: 1rem;
 }
 
 .Header {