From 9420010caeba3053fd22e0579c2224c42dd08326 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Fri, 19 Feb 2021 19:34:39 +0800
Subject: [PATCH] fix(webui): right to left compatibility

enabled for arabic
---
 komga-webui/src/App.vue                       |   1 +
 komga-webui/src/components/FilterDrawer.vue   |   2 +-
 komga-webui/src/components/FilterPanels.vue   |   2 +-
 .../src/components/HorizontalScroller.vue     |  52 ++++++---
 komga-webui/src/components/ItemCard.vue       |  16 +--
 komga-webui/src/components/SearchBox.vue      |   8 +-
 .../components/dialogs/EditBooksDialog.vue    |   2 +-
 .../components/dialogs/EditSeriesDialog.vue   |   2 +-
 komga-webui/src/locales/ar.json               |   1 +
 komga-webui/src/locales/de.json               |   1 +
 komga-webui/src/locales/en.json               |   1 +
 komga-webui/src/locales/es.json               | 107 +++++++++---------
 komga-webui/src/locales/fr.json               |   1 +
 komga-webui/src/locales/ko.json               |   1 +
 komga-webui/src/locales/nb_NO.json            |   1 +
 komga-webui/src/locales/pt_BR.json            |   1 +
 komga-webui/src/locales/ru.json               |   1 +
 komga-webui/src/views/BookReader.vue          |   2 +
 komga-webui/src/views/BrowseBook.vue          |  12 +-
 komga-webui/src/views/BrowseCollection.vue    |   2 +-
 komga-webui/src/views/BrowseCollections.vue   |   2 +-
 komga-webui/src/views/BrowseLibraries.vue     |   2 +-
 komga-webui/src/views/BrowseReadList.vue      |   2 +-
 komga-webui/src/views/BrowseReadLists.vue     |   2 +-
 komga-webui/src/views/BrowseSeries.vue        |  12 +-
 komga-webui/src/views/Home.vue                |   3 +-
 komga-webui/src/views/Login.vue               |   3 +-
 komga-webui/src/views/SettingsUsers.vue       |   6 +-
 28 files changed, 141 insertions(+), 107 deletions(-)

diff --git a/komga-webui/src/App.vue b/komga-webui/src/App.vue
index 6721e8042..edf698bd6 100644
--- a/komga-webui/src/App.vue
+++ b/komga-webui/src/App.vue
@@ -15,6 +15,7 @@ export default Vue.extend({
       const locale = this.$cookies.get(cookieLocale)
       if (this.$i18n.availableLocales.includes(locale)) {
         this.$i18n.locale = locale
+        this.$vuetify.rtl = (this.$t('common.locale_rtl') === 'true')
       }
     }
   },
diff --git a/komga-webui/src/components/FilterDrawer.vue b/komga-webui/src/components/FilterDrawer.vue
index 390dea762..00b359538 100644
--- a/komga-webui/src/components/FilterDrawer.vue
+++ b/komga-webui/src/components/FilterDrawer.vue
@@ -1,7 +1,7 @@
 <template>
   <v-navigation-drawer
     v-model="display"
-    right
+    :right="!$vuetify.rtl"
     fixed
     temporary
     disable-route-watcher
diff --git a/komga-webui/src/components/FilterPanels.vue b/komga-webui/src/components/FilterPanels.vue
index 2e9687099..1aafab02a 100644
--- a/komga-webui/src/components/FilterPanels.vue
+++ b/komga-webui/src/components/FilterPanels.vue
@@ -9,7 +9,7 @@
         <v-icon
           color="secondary"
           style="max-width: 24px"
-          class="mr-2"
+          class="mx-2"
           @click.stop="clear(key)"
         >{{ groupActive(key) ? 'mdi-checkbox-marked' : '' }}
         </v-icon>
diff --git a/komga-webui/src/components/HorizontalScroller.vue b/komga-webui/src/components/HorizontalScroller.vue
index 24b089bda..3c7ea455d 100644
--- a/komga-webui/src/components/HorizontalScroller.vue
+++ b/komga-webui/src/components/HorizontalScroller.vue
@@ -3,16 +3,18 @@
     <div style="min-height: 36px">
       <slot name="prepend"/>
     </div>
-    <div style="position: absolute; top: 0; right: 0">
+    <div :style="'position: absolute; top: 0;' + ($vuetify.rtl ? 'left: 0' : 'right: 0')">
       <v-btn icon
-             :disabled="!canScrollLeft"
-             @click="doScroll('left')">
-        <v-icon>mdi-chevron-left</v-icon>
+             :disabled="!canScrollBackward"
+             @click="doScroll('backward')">
+        <v-icon v-if="$vuetify.rtl">mdi-chevron-right</v-icon>
+        <v-icon v-else>mdi-chevron-left</v-icon>
       </v-btn>
       <v-btn icon
-             :disabled="!canScrollRight"
-             @click="doScroll('right')">
-        <v-icon>mdi-chevron-right</v-icon>
+             :disabled="!canScrollForward"
+             @click="doScroll('forward')">
+        <v-icon v-if="$vuetify.rtl">mdi-chevron-left</v-icon>
+        <v-icon v-else>mdi-chevron-right</v-icon>
       </v-btn>
     </div>
 
@@ -36,30 +38,44 @@ export default Vue.extend({
     const uniqueId = this.$_.uniqueId()
     return {
       id: uniqueId,
-      canScrollLeft: false,
-      canScrollRight: true,
+      canScrollBackward: false,
+      canScrollForward: true,
       container: this.$refs[uniqueId] as HTMLElement,
       adjustment: 100,
     }
   },
-  mounted () {
+  mounted() {
     this.container = this.$refs[this.id] as HTMLElement
     this.computeScrollability()
   },
   methods: {
-    computeScrollability () {
+    computeScrollability() {
       if (this.container !== undefined) {
-        this.canScrollLeft = Math.round(this.container.scrollLeft) > 0
-        this.canScrollRight = (Math.round(this.container.scrollLeft) + this.container.clientWidth) < this.container.scrollWidth
+        if (this.$vuetify.rtl) {
+          this.canScrollBackward = Math.round(this.container.scrollLeft) < 0
+          this.canScrollForward = (Math.round(this.container.scrollLeft) - this.container.clientWidth) > -this.container.scrollWidth
+        } else {
+          this.canScrollBackward = Math.round(this.container.scrollLeft) > 0
+          this.canScrollForward = (Math.round(this.container.scrollLeft) + this.container.clientWidth) < this.container.scrollWidth
+        }
       }
     },
-    doScroll (direction: string) {
+    doScroll(direction: string) {
       if (this.container !== undefined) {
-        let target = Math.round(this.container.scrollLeft) + (this.container.clientWidth - this.adjustment)
-        if (direction === 'left') {
-          target = Math.round(this.container.scrollLeft) - (this.container.clientWidth - this.adjustment)
+        let increment = (this.container.clientWidth - this.adjustment)
+        let scrollLeft = Math.round(this.container.scrollLeft)
+        let target
+        if (this.$vuetify.rtl){
+          if (direction === 'backward')
+            target = scrollLeft + increment
+          else
+            target = scrollLeft - increment
+        } else {
+          if (direction === 'backward')
+            target = scrollLeft - increment
+          else
+            target = scrollLeft + increment
         }
-        const scrollMax = this.container.clientWidth
         this.container.scrollTo({
           top: 0,
           left: target,
diff --git a/komga-webui/src/components/ItemCard.vue b/komga-webui/src/components/ItemCard.vue
index 8776df677..ec10248f8 100644
--- a/komga-webui/src/components/ItemCard.vue
+++ b/komga-webui/src/components/ItemCard.vue
@@ -36,7 +36,7 @@
               <!-- Circle icon for selection (top left) -->
               <v-icon v-if="onSelected"
                       :color="selected ? 'secondary' : ''"
-                      style="position: absolute; top: 5px; left: 10px"
+                      :style="'position: absolute; top: 5px; ' + ($vuetify.rtl ? 'right' : 'left') + ': 10px'"
                       @click.stop="selectItem"
               >
                 {{ selected || (preselect && hover) ? 'mdi-checkbox-marked-circle' : 'mdi-checkbox-blank-circle-outline'
@@ -58,7 +58,7 @@
               <!-- Pen icon for edition (bottom left) -->
               <v-btn icon
                      v-if="!selected && !preselect && onEdit"
-                     style="position: absolute; bottom: 5px; left: 5px"
+                     :style="'position: absolute; bottom: 5px; ' + ($vuetify.rtl ? 'right' : 'left' ) +': 5px'"
                      @click.stop="editItem"
               >
                 <v-icon>mdi-pencil</v-icon>
@@ -66,7 +66,7 @@
 
               <!-- Action menu (bottom right) -->
               <div v-if="!selected && !preselect && actionMenu"
-                   style="position: absolute; bottom: 5px; right: 5px"
+                   :style="'position: absolute; bottom: 5px; ' + ($vuetify.rtl ? 'left' : 'right') +': 5px'"
               >
                 <book-actions-menu v-if="computedItem.type() === ItemTypes.BOOK"
                                    :book="item"
@@ -118,13 +118,13 @@
 import BookActionsMenu from '@/components/menus/BookActionsMenu.vue'
 import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
 import SeriesActionsMenu from '@/components/menus/SeriesActionsMenu.vue'
-import { getReadProgress, getReadProgressPercentage } from '@/functions/book-progress'
-import { ReadStatus } from '@/types/enum-books'
-import { createItem, Item, ItemTypes } from '@/types/items'
+import {getReadProgress, getReadProgressPercentage} from '@/functions/book-progress'
+import {ReadStatus} from '@/types/enum-books'
+import {createItem, Item, ItemTypes} from '@/types/items'
 import Vue from 'vue'
-import { RawLocation } from 'vue-router'
+import {RawLocation} from 'vue-router'
 import ReadListActionsMenu from '@/components/menus/ReadListActionsMenu.vue'
-import { BookDto } from '@/types/komga-books'
+import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from "@/types/komga-series";
 
 export default Vue.extend({
diff --git a/komga-webui/src/components/SearchBox.vue b/komga-webui/src/components/SearchBox.vue
index 331e9f1de..e92bc5a16 100644
--- a/komga-webui/src/components/SearchBox.vue
+++ b/komga-webui/src/components/SearchBox.vue
@@ -34,7 +34,7 @@
             <v-img :src="seriesThumbnailUrl(item.id)"
                    height="50"
                    max-width="35"
-                   class="ma-1 mr-3"
+                   class="my-1 mx-3"
             />
             <v-list-item-content>
               <v-list-item-title v-text="item.metadata.title"/>
@@ -52,7 +52,7 @@
             <v-img :src="bookThumbnailUrl(item.id)"
                    height="50"
                    max-width="35"
-                   class="ma-1 mr-3"
+                   class="my-1 mx-3"
             />
             <v-list-item-content>
               <v-list-item-title v-text="item.metadata.title"/>
@@ -70,7 +70,7 @@
             <v-img :src="collectionThumbnailUrl(item.id)"
                    height="50"
                    max-width="35"
-                   class="ma-1 mr-3"
+                   class="my-1 mx-3"
             />
             <v-list-item-content>
               <v-list-item-title v-text="item.name"/>
@@ -88,7 +88,7 @@
             <v-img :src="readListThumbnailUrl(item.id)"
                    height="50"
                    max-width="35"
-                   class="ma-1 mr-3"
+                   class="my-1 mx-3"
             />
             <v-list-item-content>
               <v-list-item-title v-text="item.name"/>
diff --git a/komga-webui/src/components/dialogs/EditBooksDialog.vue b/komga-webui/src/components/dialogs/EditBooksDialog.vue
index db61a9f60..167e59acf 100644
--- a/komga-webui/src/components/dialogs/EditBooksDialog.vue
+++ b/komga-webui/src/components/dialogs/EditBooksDialog.vue
@@ -19,7 +19,7 @@
           </v-toolbar>
 
           <v-card-title class="hidden-xs-only">
-            <v-icon class="mr-4">mdi-pencil</v-icon>
+            <v-icon class="mx-4">mdi-pencil</v-icon>
             {{ dialogTitle }}
           </v-card-title>
 
diff --git a/komga-webui/src/components/dialogs/EditSeriesDialog.vue b/komga-webui/src/components/dialogs/EditSeriesDialog.vue
index a2a72e6a5..c346844c8 100644
--- a/komga-webui/src/components/dialogs/EditSeriesDialog.vue
+++ b/komga-webui/src/components/dialogs/EditSeriesDialog.vue
@@ -19,7 +19,7 @@
           </v-toolbar>
 
           <v-card-title class="hidden-xs-only">
-            <v-icon class="mr-4">mdi-pencil</v-icon>
+            <v-icon class="mx-4">mdi-pencil</v-icon>
             {{ dialogTitle }}
           </v-card-title>
 
diff --git a/komga-webui/src/locales/ar.json b/komga-webui/src/locales/ar.json
index d6425e840..4fb45a24a 100644
--- a/komga-webui/src/locales/ar.json
+++ b/komga-webui/src/locales/ar.json
@@ -102,6 +102,7 @@
     "genre": "نوع",
     "go_to_library": "اذهب إلى المكتبة",
     "locale_name": "اللغة العربية",
+    "locale_rtl": "true",
     "n_selected": "{count} مختار",
     "nothing_to_show": "لا شيء للعرض",
     "pages": "صفحات",
diff --git a/komga-webui/src/locales/de.json b/komga-webui/src/locales/de.json
index ffeeb804c..00651ce8b 100644
--- a/komga-webui/src/locales/de.json
+++ b/komga-webui/src/locales/de.json
@@ -117,6 +117,7 @@
     "genre": "Genre/Gattung",
     "go_to_library": "Gehe zu Bibliothek",
     "locale_name": "Deutsch",
+    "locale_rtl" : "false",
     "n_selected": "{count} markiert",
     "nothing_to_show": "Keine Treffer gefunden die angezeigt werden könnten",
     "pages": "Seiten",
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index 76e35519b..f1b57d099 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -117,6 +117,7 @@
     "genre": "Genre",
     "go_to_library": "Go to library",
     "locale_name": "English",
+    "locale_rtl" : "false",
     "n_selected": "{count} selected",
     "nothing_to_show": "Nothing to show",
     "pages": "pages",
diff --git a/komga-webui/src/locales/es.json b/komga-webui/src/locales/es.json
index 738a72fd0..df410d3ba 100644
--- a/komga-webui/src/locales/es.json
+++ b/komga-webui/src/locales/es.json
@@ -1,56 +1,57 @@
 {
-    "account_settings": {
-        "account_settings": "Configuración de cuenta",
-        "change_password": "Cambiar contraseña"
-    },
-    "bookreader": {
-        "beginning_of_book": "Estás al inicio del libro.",
-        "changing_reading_direction": "Cambiar dirección de lectura a",
-        "end_of_book": "Had llegado al final del libro.",
-        "move_next": "Has click o presiona siguiente de nuevo para moverte al siguiente libro.",
-        "move_next_exit": "Has click o presiona siguiente de nuevo para salir del lector.",
-        "move_previous": "Has click o presiona anterior de nuevo para moverte al libro anterior.",
-        "reader_settings": "Configuraciones del lector",
-        "settings": {
-            "animate_page_transitions": "Animar transición de página",
-            "background_color": "Color de fondo",
-            "general": "General",
-            "gestures": "Gestos",
-            "reading_mode": "Modo de lectura",
-            "scale_type": "Tipo de escala"
-        }
-    },
-    "common": {
-        "locale_name": "Español",
-        "all_libraries": "Todas las bibliotecas",
-        "books": "Libros",
-        "books_n": "Sin libros | 1 libro | {count} libros",
-        "cancel": "Cancelar",
-        "close": "Cerrar",
-        "collections": "Colecciones",
-        "create": "Crear",
-        "delete": "Borrar",
-        "email": "Email",
-        "filter_no_matches": "Los filtros activos no tienen ninguna coincidencia",
-        "genre": "Género",
-        "go_to_library": "Ir a la biblioteca",
-        "n_selected": "{count} seleccionado",
-        "nothing_to_show": "Nada que mostrar",
-        "pages": "páginas",
-        "pages_n": "Sin páginas | 1 página | {count} páginas",
-        "password": "Contraseña",
-        "publisher": "Editor",
-        "readlists": "Listas de lectura",
-        "required": "Requerido",
-        "roles": "Rol",
-        "series": "Series",
-        "tags": "Etiquetas",
-        "use_filter_panel_to_change_filter": "Uso el panel de filtros para cambiar los filtros activos"
-    },
-    "dashboard": {
-        "keep_reading": "Seguir leyendo",
-        "recently_added_books": "Libros recién agregados",
-        "recently_added_series": "Series agregadas recientemente",
-        "recently_updated_series": "Series recientemente actualizadas"
+  "account_settings": {
+    "account_settings": "Configuración de cuenta",
+    "change_password": "Cambiar contraseña"
+  },
+  "bookreader": {
+    "beginning_of_book": "Estás al inicio del libro.",
+    "changing_reading_direction": "Cambiar dirección de lectura a",
+    "end_of_book": "Had llegado al final del libro.",
+    "move_next": "Has click o presiona siguiente de nuevo para moverte al siguiente libro.",
+    "move_next_exit": "Has click o presiona siguiente de nuevo para salir del lector.",
+    "move_previous": "Has click o presiona anterior de nuevo para moverte al libro anterior.",
+    "reader_settings": "Configuraciones del lector",
+    "settings": {
+      "animate_page_transitions": "Animar transición de página",
+      "background_color": "Color de fondo",
+      "general": "General",
+      "gestures": "Gestos",
+      "reading_mode": "Modo de lectura",
+      "scale_type": "Tipo de escala"
     }
+  },
+  "common": {
+    "locale_name": "Español",
+    "locale_rtl": "false",
+    "all_libraries": "Todas las bibliotecas",
+    "books": "Libros",
+    "books_n": "Sin libros | 1 libro | {count} libros",
+    "cancel": "Cancelar",
+    "close": "Cerrar",
+    "collections": "Colecciones",
+    "create": "Crear",
+    "delete": "Borrar",
+    "email": "Email",
+    "filter_no_matches": "Los filtros activos no tienen ninguna coincidencia",
+    "genre": "Género",
+    "go_to_library": "Ir a la biblioteca",
+    "n_selected": "{count} seleccionado",
+    "nothing_to_show": "Nada que mostrar",
+    "pages": "páginas",
+    "pages_n": "Sin páginas | 1 página | {count} páginas",
+    "password": "Contraseña",
+    "publisher": "Editor",
+    "readlists": "Listas de lectura",
+    "required": "Requerido",
+    "roles": "Rol",
+    "series": "Series",
+    "tags": "Etiquetas",
+    "use_filter_panel_to_change_filter": "Uso el panel de filtros para cambiar los filtros activos"
+  },
+  "dashboard": {
+    "keep_reading": "Seguir leyendo",
+    "recently_added_books": "Libros recién agregados",
+    "recently_added_series": "Series agregadas recientemente",
+    "recently_updated_series": "Series recientemente actualizadas"
+  }
 }
diff --git a/komga-webui/src/locales/fr.json b/komga-webui/src/locales/fr.json
index c4d1e4759..844b985dd 100644
--- a/komga-webui/src/locales/fr.json
+++ b/komga-webui/src/locales/fr.json
@@ -117,6 +117,7 @@
     "genre": "Genre",
     "go_to_library": "Aller à la bibliothèque",
     "locale_name": "Français",
+    "locale_rtl" : "false",
     "n_selected": "{count} sélectionné | {count} sélectionnés",
     "nothing_to_show": "Rien à afficher",
     "pages": "pages",
diff --git a/komga-webui/src/locales/ko.json b/komga-webui/src/locales/ko.json
index 809a0b772..8285e4f16 100644
--- a/komga-webui/src/locales/ko.json
+++ b/komga-webui/src/locales/ko.json
@@ -95,6 +95,7 @@
     "genre": "장르",
     "go_to_library": "서재로 가기",
     "locale_name": "한국어",
+    "locale_rtl" : "false",
     "n_selected": "{count}선택 됨",
     "nothing_to_show": "내용 없음",
     "pages": "페이지",
diff --git a/komga-webui/src/locales/nb_NO.json b/komga-webui/src/locales/nb_NO.json
index 6a63d1fbd..ab3974471 100644
--- a/komga-webui/src/locales/nb_NO.json
+++ b/komga-webui/src/locales/nb_NO.json
@@ -67,6 +67,7 @@
     "genre": "Sjanger",
     "go_to_library": "Gå til bibliotek",
     "locale_name": "Norsk bokmål",
+    "locale_rtl" : "false",
     "n_selected": "{count} valgt",
     "nothing_to_show": "Ingenting å vise",
     "pages": "sider",
diff --git a/komga-webui/src/locales/pt_BR.json b/komga-webui/src/locales/pt_BR.json
index 6439574bd..7a5e96198 100644
--- a/komga-webui/src/locales/pt_BR.json
+++ b/komga-webui/src/locales/pt_BR.json
@@ -117,6 +117,7 @@
     "genre": "Gênero",
     "go_to_library": "Ir para biblioteca",
     "locale_name": "Português",
+    "locale_rtl" : "false",
     "n_selected": "{count} selecionados",
     "nothing_to_show": "Nada para exibir",
     "pages": "páginas",
diff --git a/komga-webui/src/locales/ru.json b/komga-webui/src/locales/ru.json
index 0d043f521..1e309c95a 100644
--- a/komga-webui/src/locales/ru.json
+++ b/komga-webui/src/locales/ru.json
@@ -41,6 +41,7 @@
     "genre": "Жанр",
     "go_to_library": "Вернуться к библиотеке",
     "locale_name": "Русский",
+    "locale_rtl" : "false",
     "n_selected": "{count} выбрано",
     "pages": "страниц",
     "password": "Пароль",
diff --git a/komga-webui/src/views/BookReader.vue b/komga-webui/src/views/BookReader.vue
index fead35e3e..a03655bdf 100644
--- a/komga-webui/src/views/BookReader.vue
+++ b/komga-webui/src/views/BookReader.vue
@@ -377,6 +377,7 @@ export default Vue.extend({
     }
   },
   created () {
+    this.$vuetify.rtl = false
     checkWebpFeature('lossy', (feature, isSupported) => {
       if (isSupported) {
         this.supportedMediaTypes.push('image/webp')
@@ -414,6 +415,7 @@ export default Vue.extend({
     this.setup(this.bookId, Number(this.$route.query.page))
   },
   destroyed () {
+    this.$vuetify.rtl = (this.$t('common.locale_rtl') === 'true')
     window.removeEventListener('keydown', this.keyPressed)
   },
   props: {
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index e55fdece4..b2c0a9174 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -28,7 +28,8 @@
         :disabled="$_.isEmpty(siblingPrevious)"
         :to="{ name: 'browse-book', params: { bookId: previousId }, query: { context: context.origin, contextId: context.id}  }"
       >
-        <v-icon>mdi-chevron-left</v-icon>
+        <v-icon v-if="$vuetify.rtl">mdi-chevron-right</v-icon>
+        <v-icon v-else>mdi-chevron-left</v-icon>
       </v-btn>
 
       <!--   List of all books in context (series/readlist) for navigation   -->
@@ -65,7 +66,8 @@
         :disabled="$_.isEmpty(siblingNext)"
         :to="{ name: 'browse-book', params: { bookId: nextId }, query: { context: context.origin, contextId: context.id}  }"
       >
-        <v-icon>mdi-chevron-right</v-icon>
+        <v-icon v-if="$vuetify.rtl">mdi-chevron-left</v-icon>
+        <v-icon v-else>mdi-chevron-right</v-icon>
       </v-btn>
     </toolbar-sticky>
 
@@ -98,7 +100,7 @@
 
           <v-row class="text-body-2">
             <v-col>
-              <span class="mr-3">#{{ book.metadata.number }}</span>
+              <span class="mx-3">#{{ book.metadata.number }}</span>
             </v-col>
             <v-col cols="auto" v-if="book.metadata.releaseDate">
               {{ book.metadata.releaseDate | moment('MMMM DD, YYYY') }}
@@ -128,7 +130,7 @@
             <v-col class="text-body-2 text-capitalize py-1">
               <v-chip v-for="(t, i) in book.metadata.tags"
                       :key="i"
-                      class="mr-2"
+                      :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
                       label
                       small
                       outlined
@@ -173,7 +175,7 @@
           </v-btn>
         </v-col>
         <v-col cols="auto">
-          <v-icon class="mr-2 pb-1">mdi-book-open</v-icon>
+          <v-icon class="mx-2 pb-1">mdi-book-open</v-icon>
           <span class="text-body-2">{{ book.media.pagesCount }} {{ $t('common.pages') }}</span>
         </v-col>
       </v-row>
diff --git a/komga-webui/src/views/BrowseCollection.vue b/komga-webui/src/views/BrowseCollection.vue
index 732709b7b..cd7235d70 100644
--- a/komga-webui/src/views/BrowseCollection.vue
+++ b/komga-webui/src/views/BrowseCollection.vue
@@ -8,7 +8,7 @@
 
       <v-toolbar-title v-if="collection">
         <span>{{ collection.name }}</span>
-        <v-chip label class="ml-4">
+        <v-chip label class="mx-4">
           <span style="font-size: 1.1rem">{{ collection.seriesIds.length }}</span>
         </v-chip>
         <span v-if="collection.ordered"
diff --git a/komga-webui/src/views/BrowseCollections.vue b/komga-webui/src/views/BrowseCollections.vue
index dfbdb3a51..1e2f1ddb7 100644
--- a/komga-webui/src/views/BrowseCollections.vue
+++ b/komga-webui/src/views/BrowseCollections.vue
@@ -7,7 +7,7 @@
 
       <v-toolbar-title>
         <span>{{ library ? library.name : $t('common.all_libraries') }}</span>
-        <v-chip label class="ml-4" v-if="totalElements">
+        <v-chip label class="mx-4" v-if="totalElements">
           <span style="font-size: 1.1rem">{{ totalElements }}</span>
         </v-chip>
       </v-toolbar-title>
diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index 2ec095ccd..08546f457 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -7,7 +7,7 @@
 
       <v-toolbar-title>
         <span>{{ library ? library.name : $t('common.all_libraries') }}</span>
-        <v-chip label class="ml-4" v-if="totalElements">
+        <v-chip label class="mx-4" v-if="totalElements">
           <span style="font-size: 1.1rem">{{ totalElements }}</span>
         </v-chip>
       </v-toolbar-title>
diff --git a/komga-webui/src/views/BrowseReadList.vue b/komga-webui/src/views/BrowseReadList.vue
index 9d633e105..9a1f00f9a 100644
--- a/komga-webui/src/views/BrowseReadList.vue
+++ b/komga-webui/src/views/BrowseReadList.vue
@@ -8,7 +8,7 @@
 
       <v-toolbar-title v-if="readList">
         <span>{{ readList.name }}</span>
-        <v-chip label class="ml-4">
+        <v-chip label class="mx-4">
           <span style="font-size: 1.1rem">{{ readList.bookIds.length }}</span>
         </v-chip>
       </v-toolbar-title>
diff --git a/komga-webui/src/views/BrowseReadLists.vue b/komga-webui/src/views/BrowseReadLists.vue
index 2f1b36d05..c1423e7d9 100644
--- a/komga-webui/src/views/BrowseReadLists.vue
+++ b/komga-webui/src/views/BrowseReadLists.vue
@@ -7,7 +7,7 @@
 
       <v-toolbar-title>
         <span>{{ library ? library.name : $t('common.all_libraries') }}</span>
-        <v-chip label class="ml-4" v-if="totalElements">
+        <v-chip label class="mx-4" v-if="totalElements">
           <span style="font-size: 1.1rem">{{ totalElements }}</span>
         </v-chip>
       </v-toolbar-title>
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 83864fde7..cfec2c48e 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -15,7 +15,7 @@
 
       <v-toolbar-title>
         <span v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</span>
-        <v-chip label class="ml-4" v-if="totalElements">
+        <v-chip label class="mx-4" v-if="totalElements">
           <span style="font-size: 1.1rem">{{ totalElements }}</span>
         </v-chip>
       </v-toolbar-title>
@@ -93,12 +93,12 @@
                       :text-color="statusChip.text"
               >{{ $t(`enums.series_status.${series.metadata.status}`) }}
               </v-chip>
-              <v-chip label small v-if="series.metadata.ageRating" class="ml-2">{{
+              <v-chip label small v-if="series.metadata.ageRating" class="mx-1">{{
                   series.metadata.ageRating
                 }}+
               </v-chip>
-              <v-chip label small v-if="series.metadata.language" class="ml-2">{{ languageDisplay }}</v-chip>
-              <v-chip label small v-if="series.metadata.readingDirection" class="ml-2">{{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}</v-chip>
+              <v-chip label small v-if="series.metadata.language" class="mx-1">{{ languageDisplay }}</v-chip>
+              <v-chip label small v-if="series.metadata.readingDirection" class="mx-1">{{ $t(`enums.reading_direction.${series.metadata.readingDirection}`) }}</v-chip>
             </v-col>
           </v-row>
 
@@ -146,7 +146,7 @@
             <v-col class="text-body-2 text-capitalize py-1">
               <v-chip v-for="(t, i) in series.metadata.genres"
                       :key="i"
-                      class="mr-2"
+                      :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
                       label
                       small
                       outlined
@@ -160,7 +160,7 @@
             <v-col class="text-body-2 text-capitalize py-1">
               <v-chip v-for="(t, i) in series.metadata.tags"
                       :key="i"
-                      class="mr-2"
+                      :class="$vuetify.rtl ? 'ml-2' : 'mr-2'"
                       label
                       small
                       outlined
diff --git a/komga-webui/src/views/Home.vue b/komga-webui/src/views/Home.vue
index 816701f4c..f4e95c859 100644
--- a/komga-webui/src/views/Home.vue
+++ b/komga-webui/src/views/Home.vue
@@ -9,7 +9,7 @@
 
     </v-app-bar>
 
-    <v-navigation-drawer app v-model="drawerVisible">
+    <v-navigation-drawer app v-model="drawerVisible" :right="$vuetify.rtl">
       <v-list-item @click="$router.push({name: 'home'})" inactive class="pb-2">
         <v-list-item-avatar>
           <v-img src="../assets/logo.svg"/>
@@ -221,6 +221,7 @@ export default Vue.extend({
         if (this.$i18n.availableLocales.includes(locale)) {
           this.$i18n.locale = locale
           this.$cookies.set(cookieLocale, locale, Infinity)
+          this.$vuetify.rtl = (this.$t('common.locale_rtl') === 'true')
         }
       },
     },
diff --git a/komga-webui/src/views/Login.vue b/komga-webui/src/views/Login.vue
index 8b9b6b479..7914d3ec6 100644
--- a/komga-webui/src/views/Login.vue
+++ b/komga-webui/src/views/Login.vue
@@ -50,7 +50,7 @@
           >{{ $t('login.login') }}
           </v-btn>
           <v-btn v-if="unclaimed"
-                 class="ml-4"
+                 class="mx-4"
                  color="primary"
                  @click="claim"
           >{{ $t('login.create_user_account') }}
@@ -130,6 +130,7 @@ export default Vue.extend({
         if (this.$i18n.availableLocales.includes(locale)) {
           this.$i18n.locale = locale
           this.$cookies.set(cookieLocale, locale, Infinity)
+          this.$vuetify.rtl = (this.$t('common.locale_rtl') === 'true')
         }
       },
     },
diff --git a/komga-webui/src/views/SettingsUsers.vue b/komga-webui/src/views/SettingsUsers.vue
index 7f2390b69..bb6bd8421 100644
--- a/komga-webui/src/views/SettingsUsers.vue
+++ b/komga-webui/src/views/SettingsUsers.vue
@@ -64,8 +64,10 @@
             </div>
           </v-list>
 
-          <v-btn fab absolute bottom right color="primary"
-                 class="mr-6"
+          <v-btn fab absolute bottom color="primary"
+                 :right="!$vuetify.rtl"
+                 :left="$vuetify.rtl"
+                 class="mx-6"
                  small
                  :to="{name: 'settings-users-add'}">
             <v-icon>mdi-plus</v-icon>