feat: add rtl support (#2178)

frontend/src/css/_shell.css

@@ -16,6 +16,10 @@
   transition: .2s ease transform;
 }
 
+body.rtl .shell {
+  direction: ltr;
+}
+
 .shell__result {
   display: flex;
   padding: 0.5em;

frontend/src/css/base.css

@@ -5,6 +5,10 @@ body {
   color: #333333;
 }
 
+body.rtl {
+  direction: rtl;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -58,6 +62,11 @@ nav {
   left: 0;
 }
 
+body.rtl nav {
+  left: unset;
+  right: 0;
+}
+
 nav .action {
   width: 100%;
   display: block;
@@ -69,6 +78,11 @@ nav .action {
   text-overflow: ellipsis;
 }
 
+body.rtl .action {
+  direction: rtl;
+  text-align: right;
+}
+
 nav > div {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
@@ -101,6 +115,10 @@ main {
   border-radius: 0.125em;
 }
 
+body.rtl .breadcrumbs a {
+  transform: translateX(-16em);
+}
+
 .breadcrumbs a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }

frontend/src/css/dashboard.css

@@ -8,6 +8,10 @@
   flex-wrap: wrap;
 }
 
+body.rtl .dashboard .row {
+  margin-right: 16em;
+}
+
 .dashboard .row .column {
   display: flex;
   padding: 0 .5em;
@@ -60,6 +64,10 @@ p code {
   border-bottom: 2px solid rgba(0, 0, 0, 0.05);
 }
 
+body.rtl #nav .wrapper {
+  margin-right: 16em;
+}
+
 .dashboard #nav ul {
   list-style: none;
   display: flex;
@@ -138,6 +146,13 @@ table tr>*:first-child {
   padding-left: 1em;
 }
 
+body.rtl table tr>* {
+  padding-left: unset;
+  padding-right: 1em;
+  text-align: right;
+  direction: ltr;
+}
+
 table tr>*:last-child {
   padding-right: 1em;
 }
@@ -181,6 +196,11 @@ table tr>*:last-child {
   margin-right: auto;
 }
 
+body.rtl .card .card-title>*:first-child {
+  margin-right: 0;
+  text-align: right;
+}
+
 .card>div {
   padding: 1em 1em;
 }
@@ -461,4 +481,10 @@ table tr>*:last-child {
 .card .card-action.full .action .title {
   font-size: 1.5em;
   font-weight: 500;
+}
+
+/*** RTL - Fix disk usage information (in english) ***/
+body.rtl .credits {
+  text-align: right;
+  direction: ltr;
 }

frontend/src/css/header.css

@@ -135,10 +135,25 @@ header .menu-button {
   z-index: 1;
 }
 
+body.rtl #search #result {
+  direction: ltr;
+}
+
 #search #result>div>*:first-child {
   margin-top: 0;
 }
 
+body.rtl #search #result {
+  direction: rtl;
+  text-align: right;
+}
+
+/*** RTL - Keep search result LTR because it has paths (in english) ***/
+body.rtl #search #result ul>* {
+  direction: ltr;
+  text-align: left;
+}
+
 #search.active #result {
   padding: .5em;
   height: calc(100% - 4em);
@@ -224,6 +239,10 @@ header .menu-button {
   padding: .5em;
 }
 
+body.rtl #search .boxes h3 {
+  text-align: right;
+}
+
 #search .boxes>div {
   display: flex;
   flex-wrap: wrap;

frontend/src/css/listing.css

@@ -2,6 +2,10 @@
   --item-selected: white;
 }
 
+body.rtl #listing {
+  margin-right: 16em;
+}
+
 #listing h2 {
   margin: 0 0 0 0.5em;
   font-size: .9em;

frontend/src/css/mobile.css

@@ -40,6 +40,13 @@
     transform-origin: top right;
     z-index: 99999;
   }
+
+  body.rtl #dropdown {
+    right: unset;
+    left: 1em;
+    transform-origin: top left;
+  }
+
   #dropdown > div {
     display: block;
   }
@@ -95,9 +102,20 @@
     transition: .1s ease left;
     left: -17em;
   }
+
+  body.rtl nav {
+    left: unset;
+    right: -17em;
+  }
   nav.active {
     left: 0;
   }
+
+  body.rtl nav.active {
+    left: unset;
+    right: 0;
+  }
+
   header .search-button,
   header .menu-button {
     display: inherit;
@@ -108,6 +126,23 @@
   #listing {
     margin-bottom: 5em;
   }
+
+  body.rtl #listing {
+    margin-right: unset;
+  }
+
+  body.rtl .breadcrumbs {
+    transform: translateX(16em);
+  }
+
+  body.rtl #nav .wrapper {
+    margin-right: unset;
+  }
+  
+  body.rtl .dashboard .row {
+    margin-right: unset;
+  }
+
   main {
     margin: 0 1em;
     width: calc(100% - 2em);

frontend/src/css/styles.css

@@ -315,6 +315,11 @@ main .spinner .bounce2 {
   padding: 0 1em;
 }
 
+/*** RTL - flip and position arrow of path ***/
+body.rtl .breadcrumbs .chevron {
+  transform: scaleX(-1) translateX(16em);
+}
+
 #editor-container .breadcrumbs span {
   font-size: .75rem;
 }
@@ -404,3 +409,22 @@ main .spinner .bounce2 {
 }
 
 @import './mobile.css';
+
+/* * * * * * * * * * * * * * * *
+ *         RTL overrides       *
+ * * * * * * * * * * * * * * * */
+
+body.rtl .card-content textarea {
+  direction: ltr;
+  text-align: left;
+}
+
+body.rtl .card-content .small + input {
+  direction: ltr;
+  text-align: left;
+}
+
+body.rtl .card.floating .card-content .file-list {
+  direction: ltr;
+  text-align: left;
+}