From 25a3718d91aee0735de3488667114b1da99bd72e Mon Sep 17 00:00:00 2001
From: Craig <craigbett@gmail.com>
Date: Thu, 30 Jan 2020 23:57:00 +0000
Subject: [PATCH] slight mobile changes

---
 client/src/app.vue                 | 28 +++++++++++++++++++++++++++-
 client/src/components/controls.vue |  9 ++++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/client/src/app.vue b/client/src/app.vue
index 5912ef6e..dc7b4287 100644
--- a/client/src/app.vue
+++ b/client/src/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="neko">
+  <div id="neko" :class="[side ? 'expanded' : '']">
     <template v-if="!$client.supported">
       <neko-unsupported />
     </template>
@@ -41,10 +41,13 @@
     left: 0;
     right: 0;
     bottom: 0;
+    max-width: 100vw;
+    max-height: 100vh;
     flex-direction: row;
     display: flex;
 
     .neko-main {
+      min-width: 360px;
       max-width: 100%;
       flex-grow: 1;
       flex-direction: column;
@@ -104,6 +107,29 @@
       }
     }
   }
+
+  @media only screen and (max-width: 600px) {
+    #neko {
+      &.expanded {
+        .neko-main {
+          transform: translateX(-$side-width);
+        }
+        .neko-menu {
+          transform: translateX(-$side-width);
+        }
+      }
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    #neko {
+      .neko-main {
+        .room-container {
+          display: none;
+        }
+      }
+    }
+  }
 </style>
 
 <script lang="ts">
diff --git a/client/src/components/controls.vue b/client/src/components/controls.vue
index ef058918..ee423afa 100644
--- a/client/src/components/controls.vue
+++ b/client/src/components/controls.vue
@@ -1,6 +1,6 @@
 <template>
   <ul>
-    <li>
+    <li v-if="!isTouch">
       <i
         :class="[
           hosted && !hosting ? 'disabled' : '',
@@ -114,6 +114,13 @@
 
   @Component({ name: 'neko-controls' })
   export default class extends Vue {
+    get isTouch() {
+      return (
+        (typeof navigator.maxTouchPoints !== 'undefined' ? navigator.maxTouchPoints < 0 : false) ||
+        'ontouchstart' in document.documentElement
+      )
+    }
+
     get hosted() {
       return this.$accessor.remote.hosted
     }