Fix #35: Add RTL Support

pratikborsadiya · Feb 22, 2018 · 9be149d · 9be149d
1 parent 12cd008
commit 9be149d
Show file tree

Hide file tree

Showing 23 changed files with 140 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,9 @@ Use `npm run build` task to compile all source files.
 ## Customiztion
 For more information about customizing theme colors please follow this [guide](http://pratikborsadiya.in/blog/vali-admin/).
 
+## RTL Support
+Please follow this [guide](http://pratikborsadiya.in/blog/vali-admin/) to enable RTL support.
+
 ## Contributors
 
 * **[Pratik Borsadiya](http://pratikborsadiya.in)** - *Project Author*

diff --git a/docs/blank-page.html b/docs/blank-page.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/bootstrap-components.html b/docs/bootstrap-components.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/charts.html b/docs/charts.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/css/main.css b/docs/css/main.css
@@ -14248,7 +14248,7 @@ be a descendant of the grid when it is being dragged.
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  padding-left: 20px;
+  padding: 0 20px;
   -ms-flex-item-align: center;
       align-self: center;
 }

diff --git a/docs/form-components.html b/docs/form-components.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/form-custom.html b/docs/form-custom.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/form-notifications.html b/docs/form-notifications.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/form-samples.html b/docs/form-samples.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/index.html b/docs/index.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
@@ -211,7 +211,7 @@ <h3 class="tile-title">Features</h3>
             </ul>
             <p>Vali is a free and responsive admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.</p>
             <p>Vali is is light-weight, expendable and good looking theme. The theme has all the features required in a dashboard theme but this features are built like plug and play module. Take a look at the <a href="http://pratikborsadiya.in/blog/vali-admin" target="_blank">documentation</a> about customizing the theme colors and functionality.</p>
-            <p class="mt-4 mb-4"><a class="btn btn-primary mr-2 mb-2" href="http://pratikborsadiya.in/blog/vali-admin" target="_blank"><i class="fa fa-file"></i>Docs</a><a class="btn btn-info mr-2 mb-2" href="https://github.com/pratikborsadiya/vali-admin" target="_blank"><i class="fa fa-github"></i>GitHub</a><a class="btn btn-success mb-2" href="https://github.com/pratikborsadiya/vali-admin/archive/master.zip" target="_blank"><i class="fa fa-download"></i>Download</a></p>
+            <p class="mt-4 mb-4"><a class="btn btn-primary mr-2 mb-2" href="http://pratikborsadiya.in/blog/vali-admin" target="_blank"><i class="fa fa-file"></i>Docs</a><a class="btn btn-info mr-2 mb-2" href="https://github.com/pratikborsadiya/vali-admin" target="_blank"><i class="fa fa-github"></i>GitHub</a><a class="btn btn-success mr-2 mb-2" href="https://github.com/pratikborsadiya/vali-admin/archive/master.zip" target="_blank"><i class="fa fa-download"></i>Download</a></p>
           </div>
         </div>
         <div class="col-md-6">

diff --git a/docs/page-calendar.html b/docs/page-calendar.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/page-invoice.html b/docs/page-invoice.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/page-mailbox.html b/docs/page-mailbox.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/page-user.html b/docs/page-user.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/table-basic.html b/docs/table-basic.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/table-data-table.html b/docs/table-data-table.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/ui-cards.html b/docs/ui-cards.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/docs/widgets.html b/docs/widgets.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>Vali Admin</title>
   </head>
-  <body class="app sidebar-mini">
+  <body class="app sidebar-mini rtl">
     <!-- Navbar-->
     <header class="app-header"><a class="app-header__logo" href="index.html">Vali</a>
       <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>

diff --git a/src/pug/index.pug b/src/pug/index.pug
@@ -91,7 +91,7 @@ block content
 					a.btn.btn-info.mr-2.mb-2(href="https://github.com/pratikborsadiya/vali-admin", target="_blank")
 						i.fa.fa-github
 						| GitHub
-					a.btn.btn-success.mb-2(href="https://github.com/pratikborsadiya/vali-admin/archive/master.zip", target="_blank")
+					a.btn.btn-success.mr-2.mb-2(href="https://github.com/pratikborsadiya/vali-admin/archive/master.zip", target="_blank")
 						i.fa.fa-download
 						| Download
 

diff --git a/src/pug/layouts/_layout.pug b/src/pug/layouts/_layout.pug
@@ -24,7 +24,7 @@ html(lang="en")
 
 		include ../includes/_head.pug
 
-	body.app.sidebar-mini
+	body.app.sidebar-mini.rtl
 
 		// Navbar
 		include ../includes/_header.pug

diff --git a/src/sass/3-component/_rtl.scss b/src/sass/3-component/_rtl.scss
@@ -0,0 +1,110 @@
+// Componant: RTL
+// Right to left support
+
+[dir=rtl] {
+	body {
+		text-align: right;
+		direction: rtl;
+	}
+
+	.app-sidebar {
+		left: auto;
+		right: 0;
+	}
+
+	.app-sidebar__user-avatar {
+		margin-left: 15px;
+		margin-right: 0;
+	}
+
+	.dropdown-menu.dropdown-menu-right {
+		right: auto;
+		left: 0;
+	}
+
+	.list-unstyled,
+	.app-nav,
+	.app-menu,
+	.user .user-tabs,
+	.treeview-menu {
+		padding-right: 0;
+	}
+
+	.btn .icon,
+	.btn .fa,
+	.treeview-item .icon {
+		margin-right: 0;
+		margin-left: 5px;
+	}
+
+	.modal-header .close {
+		margin-left: 0;
+		margin-right: auto;
+	}
+
+	.modal-footer > :not(:last-child) {
+		margin-right: 0;
+		margin-left: 0.25rem;
+	}
+
+	.widget-small .icon { border-radius: 0 4px 4px 0; }
+
+	.user .timeline-post .post-media img {
+		margin-right: 0;
+		margin-left: 10px;
+	}
+
+	table.table-bordered.dataTable th:last-child,
+	table.table-bordered.dataTable th:last-child,
+	table.table-bordered.dataTable td:last-child,
+	table.table-bordered.dataTable td:last-child {
+		border-right-width: 1px;
+	}
+
+	@media(min-width: 768px) {
+		.app-header {
+			padding-right: 0;
+			padding-left: 30px;
+		}
+		.app-content {
+			margin-left: 0;
+			margin-right: 230px;
+			transition: margin-right 0.3s ease;
+		}
+		.sidebar-mini.sidenav-toggled .app-content {
+			margin-left: 0;
+			margin-right: 50px;
+		}
+		.sidebar-mini.sidenav-toggled .app-menu__label,
+		.sidebar-mini.sidenav-toggled .treeview-menu {
+			left: auto;
+			right: 50px;
+		}
+		.sidebar-mini.sidenav-toggled .treeview .app-menu__label {
+			border-top-left-radius: 4px;
+			border-top-right-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+		.sidebar-mini.sidenav-toggled .treeview-menu {
+			border-bottom-right-radius: 0;
+			border-bottom-left-radius: 4px;
+		}
+		.sidebar-mini.sidenav-toggled .app-menu__label {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+			border-top-left-radius: 4px;
+			border-bottom-left-radius: 4px;
+		}
+	}
+
+	@media(max-width: 768px) {
+		.app.sidenav-toggled .app-sidebar {
+			left: auto;
+			right: 0;
+		}
+		.app .app-sidebar {
+			left: auto;
+			right: -230px;
+		}
+	}
+}
diff --git a/src/sass/3-component/_widgets.scss b/src/sass/3-component/_widgets.scss
@@ -20,7 +20,7 @@
 
 	.info {
 		flex: 1;
-		padding-left: 20px;
+		padding: 0 20px;
 		align-self: center;
 
 		h4 {

diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -36,6 +36,7 @@
 @import '3-component/header';
 @import '3-component/sidebar';
 @import '3-component/sidebar-mini';
+
 // This styles are optional based on your preferance
 @import '3-component/dropdown';
 @import '3-component/button';
@@ -49,6 +50,11 @@
 @import '3-component/widgets';
 @import '3-component/chat';
 
+// Include the following style if you need RTL support
+// Also you will need to add dir="rtl" attribute to HTML tag
+
+//@import '3-component/rtl';
+
 // 4 -Pages
 //---------------------------------------------------