starred/sky_phone
1
0
Fork 0
mirror of https://github.com/sky-systems/sky_phone.git synced 2026-08-29 01:08:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

ENH - better dev preview

Browse Source
This commit is contained in:
Eichenholz
2026-08-04 14:35:27 +02:00
parent da122a407d
commit 5d2906adba
3 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+18 -12
View File
@@ -32,6 +32,7 @@ type AppMessage = {
const REFERENCE_VIEWPORT_WIDTH = 1920
const REFERENCE_VIEWPORT_HEIGHT = 1080
const PHONE_BASE_SCALE = 0.69
const isDevelopment = import.meta.env.DEV
const phone = usePhoneStore()
const clock = useClockStore()
@@ -39,12 +40,7 @@ const notifications = useNotificationsStore()
const route = useRoute()
const isAppRoute = computed(() => route.name === 'app')
const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
const viewportScale = ref(
Math.min(
window.innerWidth / REFERENCE_VIEWPORT_WIDTH,
window.innerHeight / REFERENCE_VIEWPORT_HEIGHT,
),
)
const viewportScale = ref(getViewportScale())
const phoneResolutionStyle = computed<CSSProperties>(() => ({
'--phone-edge-gap': `${24 * viewportScale.value}px`,
'--phone-zoom':
@@ -57,6 +53,16 @@ const phoneFrameImage = computed(
)
let clockTicker: ReturnType<typeof setInterval> | undefined
function getViewportScale(): number {
const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT
if (isDevelopment) return heightScale
return Math.min(
window.innerWidth / REFERENCE_VIEWPORT_WIDTH,
heightScale,
)
}
function onMessage(event: MessageEvent<AppMessage>): void {
if (event.data?.type === 'app:open') {
phone.open(event.data.data as PhoneOpenPayload)
@@ -78,10 +84,7 @@ function onSystemColorSchemeChange(event: MediaQueryListEvent): void {
}
function updateViewportScale(): void {
viewportScale.value = Math.min(
window.innerWidth / REFERENCE_VIEWPORT_WIDTH,
window.innerHeight / REFERENCE_VIEWPORT_HEIGHT,
)
viewportScale.value = getViewportScale()
}
onMounted(() => {
@@ -118,7 +121,7 @@ onMounted(() => {
})
}
}, 1000)
if (import.meta.env.DEV) phone.open()
if (isDevelopment) phone.open()
})
watch(
@@ -142,7 +145,10 @@ onBeforeUnmount(() => {
<main
v-if="phone.isOpen || notifications.current"
class="phone-stage"
:class="{ 'phone-stage--peek': notifications.isPeeking }"
:class="{
'phone-stage--dev': isDevelopment,
'phone-stage--peek': notifications.isPeeking,
}"
:style="phoneResolutionStyle"
>
<div class="phone-resolution-wrapper">
frontend/src/assets/main.css
+4
View File
@@ -38,6 +38,10 @@ button {
padding: 0 var(--phone-edge-gap, 24px) var(--phone-edge-gap, 24px) 0;
pointer-events: none;
}
.phone-stage--dev {
place-items: center;
padding: 0;
}
.phone-stage--peek .phone-device {
transform: translateY(calc(100% - 190px));
transform-origin: right bottom;
sky_phone/source/html/index.html
+1 -1
View File
@@ -4,7 +4,7 @@
<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-D8rAzywY.js"></script>
<script type="module" crossorigin src="./assets/sky-index-DgnAE74E.js"></script>
<link rel="stylesheet" crossorigin href="./assets/sky-index-CCqdfChw.css">
</head>
<body>