add language setting for moobile devices, add upgrade a update app function

resources/js/components/Mobile/MenuItemList.vue

@@ -17,6 +17,7 @@
                 <cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
                 <monitor-icon v-if="link.icon === 'monitor'" size="17"></monitor-icon>
                 <box-icon v-if="link.icon === 'box'" size="17"></box-icon>
+                <globe-icon v-if="link.icon === 'language'" size="17"></globe-icon>
             </div>
             <b class="menu-link">
                 <span>{{ link.title }}</span>
@@ -39,6 +40,7 @@
         Trash2Icon,
         CloudIcon,
         PowerIcon,
+        GlobeIcon,
         ShareIcon,
         UsersIcon,
         UserIcon,
@@ -61,6 +63,7 @@
             Trash2Icon,
             CloudIcon,
             PowerIcon,
+            GlobeIcon,
             UsersIcon,
             ShareIcon,
             LockIcon,

resources/js/views/Admin/Languages/Language.vue

@@ -14,7 +14,7 @@
                         </div>
 
                         <!-- Languages -->
-                        <div  class="all-language-wrapper">
+                        <div class="all-language-wrapper">
                             <div @click="openLanguage(language)" v-for="language in languages" :key="language.id">
                                 <div class="language" >
                                     <label class="name" :class="{'active' :activeLanguage.locale === language.locale}">
@@ -228,21 +228,29 @@ export default {
     }
 }
 
-//  @media only screen and (max-width: 1024px) {
-//         .side-content {
-//             flex: 0 0 205px;
-//         }
-//     }
+ @media only screen and (max-width: 1024px) {
+         .wrapper {
+            flex-direction: column;
+            .side-content{
+                margin-bottom: 70px;
+            }
+            .languages-wrapper {
+                margin-top: 0px;
+            }
+        }
+    }
 
-//     @media only screen and (max-width: 690px) {
-//         .side-content {
-//             display: none;
-//         }
-//     }
+    @media only screen and (max-width: 690px) {
+        .side-content{
+            margin-bottom: 35px !important;
+            flex: none;
+        }
+    }
 
  @media (prefers-color-scheme: dark) {
     
     .language{
+
         .name {
             color: $dark_mode_text_primary !important;
         }

resources/js/views/Admin/Languages/LanguageStrings.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Serach bar -->
-    <div v-if="strings" class="language-strings-wrapper form-block form">
+    <div v-if="strings" class="language-strings-wrapper form">
         <div class="search-bar-wrapper">
             <div class="search-bar">
                 <div v-if="!searchInput" class="icon" >
@@ -58,8 +58,9 @@
 
             <!-- Strings -->
             <FormLabel class="mt-70">Language Strings</FormLabel>
-
-            <Spinner class="spinner" v-if="!loadSearch || filteredStrings.length === 0 && !searchInput"/>
+            <div v-if="!loadSearch || filteredStrings.length === 0 && !searchInput" class="spinner-wrapper">
+                <Spinner class="spinner" />
+            </div>
 
             <div v-if="loadSearch && filteredStrings.length > 0">
                 <div class="block-wrapper string" v-for="(string,index) in filteredStrings" :key="index">
@@ -225,8 +226,12 @@ export default {
 @import '@assets/vue-file-manager/_mixins';
 @import '@assets/vue-file-manager/_forms';
 
-.spinner {
-    top: 60% !important;
+.spinner-wrapper {
+    position: relative;
+    height: 50%;
+    .spinner {
+        top: 60% !important;
+    }
 }
 
 .not-found-wrapper {
@@ -249,6 +254,7 @@ export default {
 
 .block-form {
     padding: 1px;
+    height: 100%;
 }
 .disable-switch {
    cursor: not-allowed;
@@ -344,23 +350,23 @@ export default {
 
 @media only screen and (max-width: 690px) {
 
-    .search-bar {
+    // .search-bar {
 
-        input {
-            min-width: initial;
-            width: 100%;
-            max-width: initial;
-            padding: 9px 20px 9px 30px;
+    //     input {
+    //         min-width: initial;
+    //         width: 100%;
+    //         max-width: initial;
+    //         padding: 9px 20px 9px 30px;
 
-            &:focus {
-                box-shadow: none;
-            }
-        }
+    //         &:focus {
+    //             box-shadow: none;
+    //         }
+    //     }
 
-        .icon {
-            padding: 11px 15px 11px 0;
-        }
-    }
+    //     .icon {
+    //         padding: 11px 15px 11px 0;
+    //     }
+    // }
 
 }
 

resources/js/views/Mobile/AdminMobileMenu.vue

@@ -54,6 +54,13 @@
                         routeName: 'AppOthers',
                         isVisible: true,
                     },
+                    {
+                        icon: 'language',
+                        title: this.$t('admin_menu.language'),
+                        routeName: 'Language',
+                        isVisible: true,
+
+                    }
                 ],
                 SassNavigation: [
                     {