From 70bac31f5140b4a362956054676caf8a392ec83c Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Thu, 11 May 2023 03:28:26 -0700
Subject: [PATCH] view: many fixes for mobile

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/ClusterHList.vue     |  3 ++-
 src/components/Explore.vue          |  1 +
 src/components/Timeline.vue         |  1 +
 src/components/frame/Photo.vue      |  1 +
 src/components/frame/RowHead.vue    |  2 ++
 src/components/modal/EditDate.vue   |  1 +
 src/components/modal/Modal.vue      | 24 +++++++++++++++++++-----
 src/components/modal/ShareModal.vue |  4 ++++
 src/main.ts                         |  5 +++++
 9 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/ClusterHList.vue b/src/components/ClusterHList.vue
index de62ed4d..3fec2926 100644
--- a/src/components/ClusterHList.vue
+++ b/src/components/ClusterHList.vue
@@ -53,12 +53,13 @@ export default defineComponent({
     display: flex;
 
     > .name {
-      font-size: 18px;
+      font-size: 1.1em;
       flex-grow: 1;
     }
 
     > .action {
       :deep a {
+        font-size: 0.9em;
         color: var(--color-primary);
       }
     }
diff --git a/src/components/Explore.vue b/src/components/Explore.vue
index d433eab8..688ed77c 100644
--- a/src/components/Explore.vue
+++ b/src/components/Explore.vue
@@ -176,6 +176,7 @@ export default defineComponent({
 .explore-outer {
   height: 100%;
   overflow: auto;
+  padding-top: 8px;
 
   .link-list {
     padding: 8px 10px;
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 3924dd32..e69720f5 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1272,6 +1272,7 @@ export default defineComponent({
   width: 100%;
   overflow: hidden;
   user-select: none;
+  -webkit-user-select: none; // iOS Safari is a horrible browser
   position: relative;
 }
 
diff --git a/src/components/frame/Photo.vue b/src/components/frame/Photo.vue
index eb0d7616..b814b85f 100644
--- a/src/components/frame/Photo.vue
+++ b/src/components/frame/Photo.vue
@@ -390,6 +390,7 @@ div.img-outer {
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
     user-select: none;
+    -webkit-user-select: none;
     pointer-events: none;
     transition: border-radius 0.1s ease-in, transform 0.3s ease-in-out;
 
diff --git a/src/components/frame/RowHead.vue b/src/components/frame/RowHead.vue
index 976b52fc..76870d16 100644
--- a/src/components/frame/RowHead.vue
+++ b/src/components/frame/RowHead.vue
@@ -74,6 +74,8 @@ export default defineComponent({
   padding-top: 10px;
   padding-left: 3px;
   font-size: 0.9em;
+  user-select: none;
+  -webkit-user-select: none;
 
   > div {
     position: relative;
diff --git a/src/components/modal/EditDate.vue b/src/components/modal/EditDate.vue
index 8980b4c9..b25e8ad0 100644
--- a/src/components/modal/EditDate.vue
+++ b/src/components/modal/EditDate.vue
@@ -335,6 +335,7 @@ export default defineComponent({
   .field {
     width: 4.1em;
     display: inline-block;
+    max-width: calc(20% - 4px);
   }
 
   :deep label {
diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
index 6367edd0..317a33f9 100644
--- a/src/components/modal/Modal.vue
+++ b/src/components/modal/Modal.vue
@@ -141,11 +141,25 @@ export default defineComponent({
 }
 
 @media (max-width: 512px) {
-  .memories-modal:deep .modal-wrapper > .modal-container {
-    max-height: calc(100% - var(--header-height));
-    height: unset;
-    top: unset;
-    bottom: 0;
+  .memories-modal:deep {
+    .modal-header {
+      display: none !important;
+    }
+
+    .modal-wrapper > .modal-container {
+      max-height: calc(99% - env(keyboard-inset-height, 0px));
+      height: unset;
+      top: unset;
+      bottom: env(keyboard-inset-height, 0px);
+
+      // Hide scrollbar
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+        width: 0 !important;
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/modal/ShareModal.vue b/src/components/modal/ShareModal.vue
index d943d104..7c00716f 100644
--- a/src/components/modal/ShareModal.vue
+++ b/src/components/modal/ShareModal.vue
@@ -252,5 +252,9 @@ ul.options {
   :deep .avatar {
     padding: 0 0.5em;
   }
+
+  @media (max-width: 512px) {
+    font-size: 0.9em;
+  }
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index b878bbca..6f88b5cd 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -75,6 +75,11 @@ globalThis.videoClientId = getClientId();
 globalThis.videoClientIdPersistent = localStorage.getItem('videoClientIdPersistent') ?? getClientId();
 localStorage.setItem('videoClientIdPersistent', globalThis.videoClientIdPersistent);
 
+// Turn on virtual keyboard support
+if ('virtualKeyboard' in navigator) {
+  (<any>navigator.virtualKeyboard).overlaysContent = true;
+}
+
 Vue.mixin(GlobalMixin as any);
 Vue.use(VueVirtualScroller);
 Vue.component('XImg', XImg);