ENH - phone responsiveness

frontend/src/App.vue

@@ -4,6 +4,7 @@ import {
   computed,
   onBeforeUnmount,
   onMounted,
+  ref,
   type CSSProperties,
   watch,
 } from 'vue'
@@ -28,14 +29,24 @@ type AppMessage = {
   data?: PhoneNotificationInput | PhoneOpenPayload
 }
 
+const REFERENCE_VIEWPORT_WIDTH = 1920
+const REFERENCE_VIEWPORT_HEIGHT = 1080
+
 const phone = usePhoneStore()
 const clock = useClockStore()
 const notifications = useNotificationsStore()
 const route = useRoute()
 const isAppRoute = computed(() => route.name === 'app')
 const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
-const phoneDeviceStyle = computed<CSSProperties>(() => ({
-  '--phone-scale': phone.preferences.settings.phoneScale / 100,
+const viewportScale = ref(
+  Math.min(
+    window.innerWidth / REFERENCE_VIEWPORT_WIDTH,
+    window.innerHeight / REFERENCE_VIEWPORT_HEIGHT,
+  ),
+)
+const phoneResolutionStyle = computed<CSSProperties>(() => ({
+  '--phone-zoom':
+    viewportScale.value * (phone.preferences.settings.phoneScale / 100),
 }))
 const phoneFrameImage = computed(
   () => PHONE_FRAME_IMAGES[phone.preferences.settings.frame],
@@ -62,9 +73,17 @@ function onSystemColorSchemeChange(event: MediaQueryListEvent): void {
   phone.setSystemDarkMode(event.matches)
 }
 
+function updateViewportScale(): void {
+  viewportScale.value = Math.min(
+    window.innerWidth / REFERENCE_VIEWPORT_WIDTH,
+    window.innerHeight / REFERENCE_VIEWPORT_HEIGHT,
+  )
+}
+
 onMounted(() => {
   window.addEventListener('message', onMessage)
   window.addEventListener('keydown', onKeydown)
+  window.addEventListener('resize', updateViewportScale)
   systemColorScheme.addEventListener('change', onSystemColorSchemeChange)
   phone.setSystemDarkMode(systemColorScheme.matches)
   void nuiCall('ui:ready')
@@ -109,6 +128,7 @@ onBeforeUnmount(() => {
   if (clockTicker) clearInterval(clockTicker)
   window.removeEventListener('message', onMessage)
   window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('resize', updateViewportScale)
   systemColorScheme.removeEventListener('change', onSystemColorSchemeChange)
 })
 </script>
@@ -119,40 +139,38 @@ onBeforeUnmount(() => {
     class="phone-stage"
     :class="{ 'phone-stage--peek': notifications.isPeeking }"
   >
-    <section
-      class="phone-device"
-      :style="phoneDeviceStyle"
-      :aria-label="phone.t('Common.phone')"
-    >
-      <div class="phone-screen" :class="{ 'phone-screen--app': isAppRoute }">
-        <k-app
-          theme="ios"
-          :dark="phone.isDarkMode"
-          safe-areas
-          class="phone-app"
-          :class="{
-            dark: phone.isDarkMode,
-            'phone-app--light': !phone.isDarkMode,
-          }"
-        >
-          <PhoneStatusBar />
-          <SpringboardView />
-          <RouterView v-slot="{ Component }">
-            <Transition name="app-window">
-              <component :is="Component" v-if="isAppRoute" />
-            </Transition>
-          </RouterView>
-          <PhoneHomeIndicator />
-          <PhoneNotifications />
-        </k-app>
-      </div>
-      <img
-        class="phone-device__frame"
-        :src="phoneFrameImage"
-        alt=""
-        aria-hidden="true"
-        draggable="false"
-      />
-    </section>
+    <div class="phone-resolution-wrapper" :style="phoneResolutionStyle">
+      <section class="phone-device" :aria-label="phone.t('Common.phone')">
+        <div class="phone-screen" :class="{ 'phone-screen--app': isAppRoute }">
+          <k-app
+            theme="ios"
+            :dark="phone.isDarkMode"
+            safe-areas
+            class="phone-app"
+            :class="{
+              dark: phone.isDarkMode,
+              'phone-app--light': !phone.isDarkMode,
+            }"
+          >
+            <PhoneStatusBar />
+            <SpringboardView />
+            <RouterView v-slot="{ Component }">
+              <Transition name="app-window">
+                <component :is="Component" v-if="isAppRoute" />
+              </Transition>
+            </RouterView>
+            <PhoneHomeIndicator />
+            <PhoneNotifications />
+          </k-app>
+        </div>
+        <img
+          class="phone-device__frame"
+          :src="phoneFrameImage"
+          alt=""
+          aria-hidden="true"
+          draggable="false"
+        />
+      </section>
+    </div>
   </main>
 </template>

frontend/src/assets/main.css

@@ -42,23 +42,27 @@ button {
   padding: 0 24px;
 }
 .phone-stage--peek .phone-device {
-  transform: translateY(calc(100% - 190px)) scale(var(--phone-scale, 1));
+  transform: translateY(calc(100% - 190px));
   transform-origin: right bottom;
 }
+.phone-resolution-wrapper {
+  width: 390px;
+  height: 844px;
+  zoom: var(--phone-zoom, 1);
+}
 .phone-device {
   position: relative;
-  width: min(39vh, 390px);
-  aspect-ratio: 390/844;
-  padding: min(1.05vh, 10px);
+  width: 390px;
+  height: 844px;
+  padding: 10px;
   overflow: visible;
   pointer-events: auto;
   background: transparent;
   border: 0;
-  border-radius: min(5.2vh, 52px);
-  transform: scale(var(--phone-scale, 1));
+  border-radius: 52px;
   transition: transform 0.25s ease;
   box-shadow: none;
-  filter: drop-shadow(0 4vh 10vh #0009);
+  filter: drop-shadow(0 40px 100px #0009);
 }
 .phone-device__frame {
   position: absolute;
@@ -73,12 +77,12 @@ button {
   position: relative;
   container-type: size;
   margin: auto;
-  margin-top: min(0.8vh, 8px);
+  margin-top: 8px;
   width: 94.5%;
   height: 98%;
   overflow: hidden;
   background: #08080a;
-  border-radius: min(4vh, 40px);
+  border-radius: 40px;
 }
 .phone-app {
   position: absolute !important;

sky_phone/source/html/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-BU3Jk7le.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-jOwsuLI6.css">
+    <script type="module" crossorigin src="./assets/sky-index-DOaxLsz3.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-It2eOh-6.css">
   </head>
   <body>
     <div id="app"></div>