added RTL support

notice: the example project strings are hard coded so in order to have translations there too we need to include them into translation files or somewhere inside that example project.
rmccrary · May 31, 2016 · 7d00a55 · 7d00a55
1 parent d5203d1
commit 7d00a55
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 5 deletions.
diff --git a/app/routes/login_page.route.js b/app/routes/login_page.route.js
@@ -5,8 +5,9 @@ function route_login_page (config) {
   return function (req, res, next) {
 
     return res.render('login', {
-      layout : null,
-      lang   : config.lang
+      layout      : null,
+      lang        : config.lang,
+      rtl_layout  : config.rtl_layout
     });
 
   };

diff --git a/example/config.default.js b/example/config.default.js
@@ -58,6 +58,9 @@ var config = {
 
   locale: 'en',
 
+  // Set to true to render suitable layout for RTL languages
+  rtl_layout: false,
+
   // Edit Home Page title, description, etc.
   home_meta : {
     //title       : 'Custom Home Title',

diff --git a/gulpfile.js b/gulpfile.js
@@ -8,6 +8,7 @@ gulp.task('copy_libs', function () {
 
   var source = [
     'node_modules/bootstrap/**/*',
+    'node_modules/bootstrap-rtl/**/*',
     'node_modules/fitvids/**/*',
     'node_modules/highlightjs/**/*',
     'node_modules/jquery/**/*',

diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "always-tail": "0.2.0",
     "body-parser": "1.14.2",
     "bootstrap": "3.3.6",
+    "bootstrap-rtl": "^3.3.4",
     "commander": "2.9.0",
     "cookie-parser": "1.4.1",
     "debug": "2.2.0",
@@ -68,4 +69,4 @@
     "mocha": "2.4.5",
     "supertest": "1.1.0"
   }
-}
+}
diff --git a/themes/default/public/styles/raneto.rtl.css b/themes/default/public/styles/raneto.rtl.css
@@ -0,0 +1,39 @@
+* {
+  direction: rtl;
+  unicode-bidi: embed;
+  font-family: 'Roboto', sans-serif;
+}
+
+.header .logo {
+  margin-right: 20px;
+  font-size: 20px;
+  line-height: 34px;
+}
+
+.header .search-form {
+  margin-left: 20px;
+}
+
+.footer .copyright {
+  margin: 0 0 40px 20px;
+  font-size: 85%;
+  color: #999;
+}
+
+.list-group {
+  padding-left: unset;
+  padding-right: 0;
+}
+
+.header
+.container-fluid
+.row
+.col-sm-6
+form {
+  float: left !important;
+}
+
+.content
+.btn-group {
+  float: left !important;
+}
diff --git a/themes/default/templates/layout.html b/themes/default/templates/layout.html
@@ -13,6 +13,10 @@
   <link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
   <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
   <link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
+  {{#config.rtl_layout}}
+  <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.rtl.css">
+  <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap-rtl/dist/css/bootstrap-rtl.min.css">
+  {{/config.rtl_layout}}
 
   {{{config.analytics}}}
 
@@ -64,7 +68,7 @@
 
   {{#config.allow_editing}}
   {{#loggedIn}}
-  
+
     <!-- Modal: Add Page -->
     <div class="modal fade" id="addModal" tabindex="-1">
       <div class="modal-dialog">
@@ -103,7 +107,7 @@ <h4 class="modal-title" id="myModalLabel">{{lang.global.reallyDeletePage}}</h4>
         </div>
       </div>
     </div>
-  
+
   {{/loggedIn}}
   {{/config.allow_editing}}
 

diff --git a/themes/default/templates/login.html b/themes/default/templates/login.html
@@ -14,6 +14,10 @@
   <link rel="stylesheet" href="{{config.base_url}}/styles/login-form.css">
   <link rel="stylesheet" href="{{config.base_url}}/styles/login-style.css">
   <link rel="stylesheet" href="{{config.base_url}}/lib/sweetalert/dist/sweetalert.css">
+  {{#rtl_layout}}
+  <link rel="stylesheet" href="{{config.base_url}}/styles/raneto.rtl.css">
+  <link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap-rtl/dist/css/bootstrap-rtl.min.css">
+  {{/rtl_layout}}
 
   {{{config.analytics}}}