Rails port/UI

From OpenStreetMap Wiki
Jump to: navigation, search
Available languages — Rails port/UI
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް

Once you've got The Rails Port running, it's pretty simple to start hacking on UI improvement. Here are a few tips:


OSM's templates are in app/views, and you can try to guess their filenames from URLs - for instance, /user/joe maps to app/views/user/view. The templates are written in Erubis, which has a friendly beginners guide on its website. For smaller tweaks, you won't need to edit the logic of the templates, but it's handy to understand what they're doing.


OpenStreetMap is translated by volunteers, so people use it in all kinds of languages. Thus the design needs to be flexible to work with right-to-left languages like Arabic as well as left-to-right languages like English.

To test RTL, we usually set the active user to Arabic:

From your terminal run:

   rails console
   user = User.find_by_display_name("yourusername")
   user.languages = ['ar']

Test the site, make any fixes in the .rtl stylesheets, and then revert to English (or your language code of choice)

   user.languages = ['en']

If you're looking to actually translate the website, read up on Website Internationalization.


OSM is also used on mobile devices and small screens, so also has styles that kick in when the window is narrow. This one's easy to test - resize your browser window until the layout changes, and debug that style in the small- stylesheets


Stylesheets in the Rails port are all SCSS stylesheets - that means that they're written in SASS, a language extended from CSS. However, the site tends not to use this functionality and instead only uses special powers in sheets like large-rtl.css, that concatenate together other stylesheets. So, by default use traditional CSS syntax.

The prevailing CSS style is like so:

   #small-title {
     display: none;

Which means: braces are on the same line as the selector, not dropped. And after properties there's one space, and then the property name.

All Done?

So you've made some awesome tweaks to OpenStreetMap - next up is contributing it back, so that millions can see it. The technique is the same as for any change to the rails port - make a pull request on the GitHub repository - see CONTRIBUTING.md in GitHub repository for full details. If you want to be extra-nice, add screenshots of your changes so that the maintainers and other contributors can quickly figure out what you've changed and why.