From c5914d3a28917661b3da9da4e7fdac113adb085a Mon Sep 17 00:00:00 2001 From: Jack Hadrill Date: Tue, 22 Mar 2022 19:57:47 +0000 Subject: [PATCH] Add support for mobile devices --- index.html | 2 +- src/App.vue | 43 ++++++++++++++++-- src/common/animate.js | 4 +- src/components/channelSettings/AddChannel.vue | 20 ++++----- .../channelSettings/ConfiguredChannels.vue | 2 +- src/components/common/Key.vue | 2 +- src/components/{userlist => common}/User.vue | 2 +- src/components/{ => content}/Content.vue | 28 +++++++++--- src/components/conversation/Message.vue | 4 +- src/components/conversation/MessageInput.vue | 7 ++- src/components/sidebar/Channels.vue | 1 + src/components/sidebar/Footer.vue | 14 ++++++ src/components/sidebar/Sidebar.vue | 44 ++++++++++++------- .../{userlist => sidebar}/UserList.vue | 10 ++--- src/components/userSettings/ColorPicker.vue | 1 - src/components/userSettings/UserSettings.vue | 3 +- src/plugins/websocket.js | 6 +-- src/router/index.js | 2 +- src/stores/channelStore.js | 2 +- src/stores/mercuryStore.js | 4 +- src/views/ConversationView.vue | 34 +++++++------- src/views/HomeView.vue | 8 ++-- src/views/SettingsView.vue | 6 +-- 23 files changed, 160 insertions(+), 89 deletions(-) rename src/components/{userlist => common}/User.vue (97%) rename src/components/{ => content}/Content.vue (60%) create mode 100644 src/components/sidebar/Footer.vue rename src/components/{userlist => sidebar}/UserList.vue (67%) diff --git a/index.html b/index.html index f8f1c52..53e44d2 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + Mercury diff --git a/src/App.vue b/src/App.vue index 9afc2ae..599bd1c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -11,10 +11,8 @@ -
-
- -
+
+
@@ -23,12 +21,19 @@ import { onMounted, ref, watch } from 'vue' import { Modal } from 'bootstrap' import { useMercuryStore } from './stores/mercuryStore' import UserSettings from './components/userSettings/UserSettings.vue' +import { useWindowSize } from '@vueuse/core'; const mercuryStore = useMercuryStore() const configured = mercuryStore.configured() const settingsModal = ref() +const { width, height } = useWindowSize() +watch(width, () => { + mercuryStore.mobile = window.innerWidth < 768 ? true : false + mercuryStore.showSidebar = !mercuryStore.mobile +}, { immediate: true }) + onMounted(() => { const modal = new Modal(settingsModal.value) @@ -44,9 +49,39 @@ onMounted(() => { }, { immediate: true }) }) +visualViewport.addEventListener('resize', () => { + window.scrollTo(0, 0) + document.querySelector('#app').style.height = `${window.visualViewport.height}px` +}) + +document.addEventListener('gesturestart', (e) => { + e.preventDefault() +}) + +document.addEventListener('touchmove', (e) => { + e.preventDefault() +}) + \ No newline at end of file + diff --git a/src/components/common/Key.vue b/src/components/common/Key.vue index 540aa17..6db7b00 100644 --- a/src/components/common/Key.vue +++ b/src/components/common/Key.vue @@ -21,4 +21,4 @@ onBeforeRouteUpdate(() => { i { cursor: pointer; } - \ No newline at end of file + diff --git a/src/components/userlist/User.vue b/src/components/common/User.vue similarity index 97% rename from src/components/userlist/User.vue rename to src/components/common/User.vue index b2510f0..3fbd934 100644 --- a/src/components/userlist/User.vue +++ b/src/components/common/User.vue @@ -16,4 +16,4 @@ const color = computed(() => { return user.color ?? Colors.Secondary }) span:hover { color: white !important; } - \ No newline at end of file + diff --git a/src/components/Content.vue b/src/components/content/Content.vue similarity index 60% rename from src/components/Content.vue rename to src/components/content/Content.vue index bc75750..2368732 100644 --- a/src/components/Content.vue +++ b/src/components/content/Content.vue @@ -1,20 +1,23 @@ @@ -40,9 +41,9 @@ import { onBeforeRouteUpdate, useRoute } from 'vue-router' import { useChannelStore } from '../stores/channelStore' import { useMessageStore } from '../stores/messageStore' import Sidebar from '../components/sidebar/Sidebar.vue' -import Content from '../components/Content.vue' +import Content from '../components/content/Content.vue' import Key from '../components/common/Key.vue' -import UserList from '../components/userList/UserList.vue' +import UserList from '../components/sidebar/UserList.vue' import Message from '../components/conversation/Message.vue' import MessageInput from '../components/conversation/MessageInput.vue' @@ -53,14 +54,13 @@ const messageStore = useMessageStore() const channel = computed(() => { return channelStore.getChannelById(route.params.channelId) }) const messages = computed(() => { return messageStore.getMessagesByChannelId(route.params.channelId) }) -// Show the key. -const locked = ref(false) -onBeforeRouteUpdate(async (to, from) => { locked.value = false }) -const abcdef = ref(null) +// Show the key in the header. +const keyHidden = ref(false) +onBeforeRouteUpdate(async (to, from) => { keyHidden.value = false }) \ No newline at end of file + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 485f5a2..f468574 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -4,7 +4,7 @@ - \ No newline at end of file +