improve right to left ui

src/components/GameCards/GameCardDefault.vue

@@ -9,11 +9,10 @@
       v-if="game && game.name"
     >
       <b-col cols="4">
-        <!-- TODO: handle rtl -->
         <b-img
           fluid
           blank-color="#ccc"
-          rounded="left"
+          :rounded="isRTL ? 'left' : 'right'"
           :src="coverUrl"
           :alt="game.name"
         />

src/components/Sidebar.vue

@@ -4,6 +4,7 @@
     title="Sidebar"
     shadow
     backdrop
+    :right="!isRTL"
     bg-variant="dark"
     text-variant="white"
     header-class="px-2 pt-2 d-flex align-items-center justify-content-between"
@@ -133,7 +134,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 
 export default {
   data() {
@@ -189,6 +190,7 @@ export default {
 
   computed: {
     ...mapState(['user', 'profile']),
+    ...mapGetters(['isRTL']),
 
     dev() {
       return process.env.NODE_ENV === 'development';

src/mixins/gameCardMixin.js

@@ -11,7 +11,7 @@ export default {
 
   computed: {
     ...mapState(['settings', 'games', 'tags', 'notes', 'progresses', 'board']),
-    ...mapGetters(['gameTags']),
+    ...mapGetters(['gameTags', 'isRTL']),
 
     highlightCompletedGame() {
       return this.gameProgress && Number(this.gameProgress) === 100;

src/store/getters.js

@@ -20,6 +20,9 @@ export default {
     return boardOwner === userId;
   },
 
+  // Arabic is the only ltr language supported at the moment
+  isRTL: ({ settings }) => settings && settings.language !== 'ar',
+
   platformNames: (state) => {
     const formattedPlatforms = {};