From 4fb1ea240d6eaa1604b9c35ea12040c6febe590d Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Sun, 26 May 2024 13:09:17 +0530 Subject: [PATCH 01/25] feat: separated desktop & mobile layout --- frontend/src/App.vue | 22 +++++++++++++++--- .../src/components/Layouts/MobileLayout.vue | 1 + frontend/src/composables/index.js | 23 +++++++++++++++++++ 3 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/Layouts/MobileLayout.vue create mode 100644 frontend/src/composables/index.js diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7b3f6525..e03266bf 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,15 +1,31 @@ diff --git a/frontend/src/components/Layouts/MobileLayout.vue b/frontend/src/components/Layouts/MobileLayout.vue new file mode 100644 index 00000000..41a40c8d --- /dev/null +++ b/frontend/src/components/Layouts/MobileLayout.vue @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/composables/index.js b/frontend/src/composables/index.js new file mode 100644 index 00000000..ff5a5bb6 --- /dev/null +++ b/frontend/src/composables/index.js @@ -0,0 +1,23 @@ +import { onMounted, onUnmounted, reactive } from 'vue' + +export function useScreenSize() { + const size = reactive({ + width: window.innerWidth, + height: window.innerHeight, + }) + + const onResize = () => { + size.width = window.innerWidth + size.height = window.innerHeight + } + + onMounted(() => { + window.addEventListener('resize', onResize) + }) + + onUnmounted(() => { + window.removeEventListener('resize', onResize) + }) + + return size +} From 9655cbe5b5541d1523e044f99fd1ef81ca183385 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Mon, 27 May 2024 11:43:37 +0530 Subject: [PATCH 02/25] fix: added mobile sidebar --- .../src/components/Layouts/MobileLayout.vue | 14 ++++++- .../src/components/Mobile/MobileAppHeader.vue | 27 +++++++++++++ .../src/components/Mobile/MobileSidebar.vue | 38 +++++++++++++++++++ frontend/src/stores/settings.js | 2 + 4 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/Mobile/MobileAppHeader.vue create mode 100644 frontend/src/components/Mobile/MobileSidebar.vue diff --git a/frontend/src/components/Layouts/MobileLayout.vue b/frontend/src/components/Layouts/MobileLayout.vue index 41a40c8d..7214c8f3 100644 --- a/frontend/src/components/Layouts/MobileLayout.vue +++ b/frontend/src/components/Layouts/MobileLayout.vue @@ -1 +1,13 @@ - \ No newline at end of file + + diff --git a/frontend/src/components/Mobile/MobileAppHeader.vue b/frontend/src/components/Mobile/MobileAppHeader.vue new file mode 100644 index 00000000..d96b22a9 --- /dev/null +++ b/frontend/src/components/Mobile/MobileAppHeader.vue @@ -0,0 +1,27 @@ + + + diff --git a/frontend/src/components/Mobile/MobileSidebar.vue b/frontend/src/components/Mobile/MobileSidebar.vue new file mode 100644 index 00000000..aaa9d866 --- /dev/null +++ b/frontend/src/components/Mobile/MobileSidebar.vue @@ -0,0 +1,38 @@ + + diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js index 534ade97..0796d4ea 100644 --- a/frontend/src/stores/settings.js +++ b/frontend/src/stores/settings.js @@ -19,3 +19,5 @@ createResource({ callEnabled.value = Boolean(data) }, }) + +export const mobileSidebarOpened = ref(false) From 4531dbd99f42cc3588bbc03c745920b94c704a64 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Mon, 27 May 2024 12:04:25 +0530 Subject: [PATCH 03/25] fix: dont show collapse button in mobile view --- frontend/src/components/Layouts/AppSidebar.vue | 3 ++- frontend/src/components/Mobile/MobileAppHeader.vue | 10 +--------- frontend/src/stores/settings.js | 6 +++++- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue index dde14d02..e9ea5a97 100644 --- a/frontend/src/components/Layouts/AppSidebar.vue +++ b/frontend/src/components/Layouts/AppSidebar.vue @@ -74,7 +74,7 @@ -
+
-
+
@@ -17,11 +14,6 @@ diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js index 0796d4ea..bfffc459 100644 --- a/frontend/src/stores/settings.js +++ b/frontend/src/stores/settings.js @@ -1,5 +1,6 @@ import { createResource } from 'frappe-ui' -import { ref } from 'vue' +import { useScreenSize } from '@/composables' +import { computed, ref } from 'vue' export const whatsappEnabled = ref(false) createResource({ @@ -21,3 +22,6 @@ createResource({ }) export const mobileSidebarOpened = ref(false) + +const screenSize = useScreenSize() +export const isMobileView = computed(() => screenSize.width < 768) From c7a5cf911620d8ae292c4ce2712822e1c03866b8 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Mon, 27 May 2024 12:27:37 +0530 Subject: [PATCH 04/25] fix: scroll to refresh for mobile view --- frontend/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/index.html b/frontend/index.html index a8d04a14..79342d04 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -11,7 +11,7 @@ href="/assets/crm/crm_logo.png" /> - +
From 8101533092651bcbb1cccc6fcc7759eb5839b0c2 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Mon, 27 May 2024 12:27:54 +0530 Subject: [PATCH 05/25] fix: changed view control layout for mobile view --- frontend/src/components/ViewControls.vue | 64 +++++++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue index f4b111a1..c541f397 100644 --- a/frontend/src/components/ViewControls.vue +++ b/frontend/src/components/ViewControls.vue @@ -1,5 +1,66 @@