Basic RTL tweaks

2025-11-03 03:16:10 -06:00 · 2024-04-27 22:28:50 -07:00
4 changed files with 94 additions and 3 deletions
--- a/src-ui/src/rtl.scss
+++ b/src-ui/src/rtl.scss
@@ -0,0 +1,87 @@
+[dir="rtl"] {
+  .btn-group,
+  .input-group,
+  .pagination {
+      flex-direction: row-reverse;
+  }
+
+  .sidebar {
+    right: 0;
+    left: auto;
+  }
+
+  .sidebar-slim-toggler {
+    right: auto;
+    left: -12px;
+  }
+
+  .ms-sm-auto {
+    margin-inline-start: auto !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .nav {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
+
+  .dropdown-toggle:after {
+    margin-inline-start: .255em;
+    margin-inline-end: 0;
+  }
+
+  .ms-auto {
+    margin-inline-start: auto !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .ms-1 {
+    margin-inline-start: .25rem !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .ms-2 {
+    margin-inline-start: .5rem !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .ms-3 {
+    margin-inline-start: 1rem !important;
+    margin-inline-end: 0 !important;
+  }
+
+  .me-1 {
+    margin-inline-start: 0 !important;
+    margin-inline-end: .25rem !important;
+  }
+
+  .me-2 {
+    margin-inline-start: 0 !important;
+    margin-inline-end: .5rem !important;
+  }
+
+  .me-3 {
+    margin-inline-start: 0 !important;
+    margin-inline-end: 1rem !important;
+  }
+
+  .ps-1 {
+    padding-inline-start: .25rem !important;
+    padding-inline-end: 0 !important;
+  }
+
+  .ps-2 {
+    padding-inline-start: .5rem !important;
+    padding-inline-end: 0 !important;
+  }
+
+  .pe-1 {
+    padding-inline-start: 0 !important;
+    padding-inline-end: .25rem !important;
+  }
+
+  .pe-2 {
+    padding-inline-start: 0 !important;
+    padding-inline-end: .5rem !important;
+  }
+}
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -16,6 +16,7 @@ $form-file-button-hover-bg: var(--pngx-bg-alt);

@import "node_modules/bootstrap/scss/bootstrap";
@import "theme";
+@import "rtl";
@import "~@ng-select/ng-select/themes/default.theme.css";
@import "print";

--- a/src/documents/templates/index.html
+++ b/src/documents/templates/index.html
@@ -1,8 +1,9 @@
 <!doctype html>
-
 {% load static i18n %}
+{% get_current_language as LANGUAGE_CODE %}
+{% get_current_language_bidi as LANGUAGE_IS_RTL %}

-<html lang="en" data-bs-theme="auto">
+<html lang="{{ LANGUAGE_CODE }}" {% if LANGUAGE_IS_RTL %}dir="rtl"{% else %}dir="ltr"{% endif %} data-bs-theme="auto">
 <head>
 	<meta charset="utf-8">
 	<title>Paperless-ngx</title>
--- a/src/documents/templates/paperless-ngx/base.html
+++ b/src/documents/templates/paperless-ngx/base.html
@@ -1,7 +1,9 @@
 <!doctype html>
 {% load static i18n %}
+{% get_current_language as LANGUAGE_CODE %}
+{% get_current_language_bidi as LANGUAGE_IS_RTL %}

-<html lang="en">
+<html lang="{{ LANGUAGE_CODE }}" {% if LANGUAGE_IS_RTL %}dir="rtl"{% else %}dir="ltr"{% endif %} data-bs-theme="auto">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">