From 890d12ea922d961b36020fb6e9e78664a32a845f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Thu, 9 Feb 2023 08:31:38 +0100
Subject: [PATCH] i18n: move sidebar to the right in RTL #470

---
 static/css/format-print.css |  2 ++
 static/css/theme.css        | 47 +++++++++++++++++++++++++++++++------
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/static/css/format-print.css b/static/css/format-print.css
index 86d7ac76d9..1148ad2604 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -5,6 +5,7 @@
 }
 #body {
     margin-left: 0 !important;
+    margin-right: 0 !important;
     min-width: 100% !important;
     max-width: 100% !important;
     width: 100% !important;
@@ -36,6 +37,7 @@ pre {
     border-bottom: 1px solid #ddd;
     border-radius: 0;
     padding-left: 0; /* for print, we want to align with the footer to ease the layout */
+    padding-right: 0;
     color: #777;
 }
 .navigation,
diff --git a/static/css/theme.css b/static/css/theme.css
index 3bb8f119c7..18ac3dcaac 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -52,7 +52,6 @@ dd {
     flex-shrink: 0;
     font-size: .953125rem;
     height: 100%;
-    left: 0;
     line-height: 1.574;
     min-height: 100%;
     min-width: 300px;
@@ -60,6 +59,12 @@ dd {
     position: fixed;
     width: 300px;
 }
+html[dir="ltr"] #sidebar {
+    left: 0;
+}
+html[dir="rtl"] #sidebar {
+    right: 0;
+}
 
 #header-wrapper {
     border-bottom-style: solid;
@@ -285,7 +290,6 @@ dd {
     flex-grow: 1;
     flex-shrink: 0;
     height: 100%;
-    margin-left: 300px;
     min-height: 100%;
     min-width: calc( 100% - 300px);
     max-width: calc( 100% - 300px);
@@ -294,6 +298,12 @@ dd {
     width: calc( 100% - 300px);
     z-index: 70;
 }
+html[dir="ltr"] #body {
+    margin-left: 300px;
+}
+html[dir="rtl"] #body {
+    margin-right: 300px;
+}
 
 #body img:not(.lightbox-image),
 #body img.center,
@@ -966,37 +976,60 @@ html[dir="rtl"] .progress {
         width: 230px;
     }
     #body {
-        margin-left: 230px;
         min-width: calc( 100% - 230px);
         max-width: calc( 100% - 230px);
         width: calc( 100% - 230px);
     }
+    html[dir="ltr"] #body {
+        margin-left: 230px;
+    }
+    html[dir="rtl"] #body {
+        margin-right: 230px;
+    }
 }
 @media screen and (max-width: 47.938em) {
     /* we don't support sidebar flyout in mobile */
-    .mobile-support #sidebar {
+    html[dir="ltr"] .mobile-support #sidebar {
         left: -230px;
     }
+    html[dir="rtl"] .mobile-support #sidebar {
+        right: -230px;
+    }
     .mobile-support #navshow{
         display: inline;
     }
     .mobile-support #body {
-        margin-left: 0;
         min-width: 100%;
         max-width: 100%;
         width: 100%;
     }
+    html[dir="ltr"] .mobile-support #body {
+        margin-left: 0;
+    }
+    html[dir="rtl"] .mobile-support #body {
+        margin-right: 0;
+    }
     .mobile-support.sidebar-flyout {
         overflow: hidden;
     }
     .mobile-support.sidebar-flyout #sidebar {
-        left: 0;
         z-index: 90;
     }
+    html[dir="ltr"] .mobile-support.sidebar-flyout #sidebar {
+        left: 0;
+    }
+    html[dir="rtl"] .mobile-support.sidebar-flyout #sidebar {
+        right: 0;
+    }
     .mobile-support.sidebar-flyout #body {
-        margin-left: 230px;
         overflow: hidden;
     }
+    html[dir="ltr"] .mobile-support.sidebar-flyout #body {
+        margin-left: 230px;
+    }
+    html[dir="rtl"] .mobile-support.sidebar-flyout #body {
+        margin-right: 230px;
+    }
     .mobile-support.sidebar-flyout #sidebar-overlay{
         background-color: rgba(134, 134, 134, 0.5);
         bottom: 0;