fix: improve mobile view

jesusantguerrero · Nov 17, 2023 · 11d615d · 11d615d
1 parent 722c5e2
commit 11d615d
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 49 deletions.
diff --git a/resources/js/Components/AppUserMenu.vue b/resources/js/Components/AppUserMenu.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import JetDropdown from '@/Components/atoms/Dropdown.vue'
+import JetDropdownLink from '@/Components/atoms/DropdownLink.vue'
+import AppUserMenuButton from './AppUserMenuButton.vue';
+
+import { useAppContextStore } from '@/store';
+import { AtDropdownLink } from 'atmosphere-ui';
+import { useImportModal } from '@/domains/transactions/useImportModal';
+
+defineProps({
+    hasImage: {
+        type: Boolean
+    },
+    hasApiFeatures: {
+        type: Boolean
+    },
+    imageUrl: {
+        type: String
+    },
+    user: {
+        type: Object
+    }
+})
+
+const context = useAppContextStore()
+
+
+const { toggleModal: toggleImportModal } = useImportModal();
+</script>
+
+
 <template>
     <JetDropdown align="right" width="48" v-if="!context.isMobile">
         <template #trigger>
@@ -60,33 +91,3 @@
         @click="context.toggleOptionsModal()"
     />
 </template>
-
-<script setup lang="ts">
-import JetDropdown from '@/Components/atoms/Dropdown.vue'
-import JetDropdownLink from '@/Components/atoms/DropdownLink.vue'
-import AppUserMenuButton from './AppUserMenuButton.vue';
-
-import { useAppContextStore } from '@/store';
-import { AtDropdownLink } from 'atmosphere-ui';
-import { useImportModal } from '@/domains/transactions/useImportModal';
-
-defineProps({
-    hasImage: {
-        type: Boolean
-    },
-    hasApiFeatures: {
-        type: Boolean
-    },
-    imageUrl: {
-        type: String
-    },
-    user: {
-        type: Object
-    }
-})
-
-const context = useAppContextStore()
-
-
-const { toggleModal: toggleImportModal } = useImportModal();
-</script>
diff --git a/resources/js/Components/templates/AppLayout.vue b/resources/js/Components/templates/AppLayout.vue
@@ -24,6 +24,7 @@
     import { useTransactionModal } from '@/domains/transactions'
     import { useOnMessage } from '@/composables/useFirebase'
     import AppProvider from './AppProvider.vue'
+    import { useAppContextStore } from '@/store'
     // import LogerAssistant from '../organisms/logerAssistant.vue'
 
     const props = defineProps({
@@ -39,6 +40,8 @@
         },
     })
 
+    const context = useAppContextStore()
+
     const { appMenu, headerMenu, mobileMenu } = useAppMenu(t)
     const serverMenu = computed(() => {
         return pageProps.menu
@@ -145,7 +148,7 @@
                              />
                              <!-- <LogerAssistant /> -->
                              <AtTeamSelect
-                                v-if="$page.props.user.all_teams.length"
+                                v-if="$page.props.user.all_teams.length && !context.isMobile"
                                 :has-team-features="$page.props.jetstream.hasTeamFeatures"
                                 :can-create-teams="$page.props.jetstream.canCreateTeams"
                                 :current-team="$page.props.user.current_team"

diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
@@ -116,33 +116,33 @@
             <AppIcon size="medium" class="ml-2" />
         </template>
 
-        <div class="px-5 mx-auto mt-5 space-y-10 md:space-y-0 md:space-x-10 md:flex max-w-screen-2xl sm:px-6 lg:px-8">
+        <div class="px-5 mx-auto mt-5 mb-10 md:space-y-0 md:space-x-10 md:flex max-w-screen-2xl sm:px-6 lg:px-8">
             <div class="mt-6 md:w-9/12">
-                <section class="flex space-x-4">
+                <section class="flex flex-col md:flex-row md:space-x-4">
                     <BudgetTracker
-                        class="w-8/12 "
+                        class="md:w-8/12 w-full order-1 mt-2 md:mt-0"
                         ref="budgetTrackerRef"
                         :budget="budgetTotal"
                         :expenses="transactionTotal.total_amount"
-                        :message="t('dashboard.welcome')"
+                        :message="$t('dashboard.welcome')"
                         :username="user.name"
                         @section-click="selected=$event"
                     >
                         <ChartCurrentVsPrevious
                             v-if="selected=='expenses'"
-                            class="w-full mt-4 mb-10 overflow-hidden bg-white rounded-lg"
+                            class="w-full mt-4 md:mb-10 overflow-hidden bg-white rounded-lg"
                             :class="[cardShadow]"
                             :title="t('This month vs last month')"
                             ref="ComparisonRevenue"
                             :data="expenses"
                         />
                     </BudgetTracker>
-                    <WeatherWidget class="w-4/12" />
+                    <WeatherWidget class="md:w-4/12" />
                 </section>
 
                 <section class="flex space-x-4">
                     <ChartComparison
-                        class="w-full mt-4 mb-10 overflow-hidden bg-white rounded-lg"
+                        class="w-full mt-4 md:mb-10 overflow-hidden bg-white rounded-lg"
                         :class="[cardShadow]"
                         :title="$t('Spending summary')"
                         ref="ComparisonRevenue"
@@ -154,9 +154,8 @@
                         @action="router.visit('/trends/income-expenses-graph')"
                     />
                 </section>
-
             </div>
-            <div class="py-6 space-y-4 md:w-3/12">
+            <div class="py-6  space-y-4 md:w-3/12">
                 <OccurrenceCard :checks="checks" />
                 <OnboardingSteps
                     v-if="onboarding.steps"

diff --git a/resources/js/Pages/Finance/Index.vue b/resources/js/Pages/Finance/Index.vue
@@ -1,6 +1,6 @@
 
 <script setup lang="ts">
-import { computed, toRefs, watch, ref } from "vue";
+import { computed, toRefs, ref } from "vue";
 import { router, useForm } from "@inertiajs/vue3";
 import { format, subMonths } from "date-fns";
 // @ts-ignore
@@ -215,7 +215,7 @@ const deleteBulkTransactions = () => {
                 </div>
             </WidgetTitleCard>
 
-            <section class="grid grid-cols-2 gap-2">
+            <section class="grid md:grid-cols-2 gap-2">
                 <WidgetTitleCard title="Planned Transactions" class="hidden md:block">
                     <TransactionsList
                       class="w-full"

diff --git a/resources/js/domains/app/index.ts b/resources/js/domains/app/index.ts
@@ -32,12 +32,6 @@ export const useAppMenu = t => {
                return /finance|budgets/.test(currentPath)
             }
         },
-        {
-            icon: 'fas fa-heart',
-            label: t('Relationship'),
-            to: '/relationships/partner',
-            as: Link
-        },
         {
             icon: 'fas fa-home',
             label: t('Housing'),
@@ -47,6 +41,12 @@ export const useAppMenu = t => {
                 return /housing/.test(currentPath)
              }
         },
+        {
+            icon: 'fas fa-heart',
+            label: t('Relationship'),
+            to: '/relationships/partner',
+            as: Link
+        },
         {
             icon: 'fas fa-users',
             label: t('Profiles'),
@@ -67,7 +67,7 @@ export const useAppMenu = t => {
         }
     ].filter(item => !item.hidden);
 
-    let mobileMenu = cloneDeep(appMenu)
+    let mobileMenu = cloneDeep(appMenu).splice(0, 4)
     mobileMenu.splice(2, null, {
         name: 'add',
         label: 'Add',