Resolve "Join page language display, rtl & ltr fixes for safari browser"

src/App.vue

@@ -154,7 +154,7 @@ export default {
           document.documentElement.setAttribute("dir", "rtl");
         } else {
           this.$vuetify.rtl = false;
-          document.documentElement.removeAttribute("dir");
+          document.documentElement.setAttribute("dir", "ltr");
         }
       },
       immediate: true,

src/assets/css/join.scss

@@ -60,16 +60,25 @@
             color: $very-very-purple;
             font-weight: bold;
         }
+
+        .inactive {
+            color: unset;
+
+            @media #{map-get($display-breakpoints, 'sm-and-up')} {
+                &:hover {
+                    color: $very-very-purple;
+                }
+            }
+        }
+
         .language-more {
-            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
             border-radius: 18px;
             border: 1px solid black;
-            padding: 0px 5px !important;
-            box-shadow: 0px 4px 4px 0px #00000040;
-            background-color: #FFFFFF !important;
+            padding: 0px 5px;
+            background-color: #FFFFFF;
 
             &:hover {
-                background-color: black !important;
+                background-color: black;
                 color: white;
             }
         }

src/components/Join.vue

@@ -77,8 +77,11 @@
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>
       <v-row class="align-center">
-        <v-col v-for="(lang,key) in getSortedLangByActive.slice(0, 4)" :key="key">
-          <span :class="$i18n.locale==lang.value?'active':''" >  {{lang.text}} </span>
+        <v-col v-for="lang in activeLanguage" :key="lang.value">
+          <span class="active">{{ lang.text }}</span>
+        </v-col>
+        <v-col v-for="(lang, key) in getDisplayLanguage.slice(0,3)" :key="key">
+          <button class="inactive" @click="updateLanguage(lang.value)">{{ lang.text }}</button>
         </v-col>
         <v-col>
           <v-btn
@@ -202,16 +205,13 @@ export default {
         this.$store.commit("setUseLocalStorage", rememberMe);
       },
     },
-
-    getSortedLangByActive() {
-      const context = this;
-      return this.getLanguages().sort(function(lang) {
-        if(lang.value == context.$i18n.locale) {
-          return -1;
-        } else {
-          return 1;
-        }
-      });
+    getDisplayLanguage() {
+      let displayLanguages = [...this.getLanguages()];
+      return displayLanguages.filter(lang => lang.display && lang.value !== this.$i18n.locale);
+    },
+    activeLanguage() {
+      let activeLanguages = [...this.getLanguages()]
+      return activeLanguages.filter(lang => lang.value === this.$i18n.locale);
     }
   },
   watch: {

src/components/languageMixin.js

@@ -3,18 +3,25 @@ export default {
     return {
       languages: [],
       activeLang:null,
+      displayLanguage: ['en','bo','zh_Hans','ug']
     }
   },
   methods: {
     getLanguages() {
       return this.languages;
+    },
+    updateLanguage(lang) {
+      this.$i18n.locale = lang;
+      this.$store.commit('setLanguage', lang);
     }
   },
   mounted() {
+    const context = this
     for (const locale of Object.keys(this.$i18n.messages)) {
       this.languages.push({
         text: this.$i18n.messages[locale].language_display_name || locale,
         value: locale,
+        display: context.displayLanguage.includes(locale)
       });
     }
   }