From 831be69cec5a39e21ad05cb01270c6bfe90712ca Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 13 Nov 2022 11:43:23 +0900 Subject: [PATCH] refactor(client): use dvh --- packages/client/src/init.ts | 10 ---------- packages/client/src/ui/_common_/navbar.vue | 3 +-- packages/client/src/ui/classic.vue | 6 ++---- packages/client/src/ui/deck.vue | 6 ++---- packages/client/src/ui/universal.vue | 9 +++------ packages/client/src/ui/zen.vue | 3 +-- 6 files changed, 9 insertions(+), 28 deletions(-) diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts index 737c044e6..f9e08d79b 100644 --- a/packages/client/src/init.ts +++ b/packages/client/src/init.ts @@ -82,16 +82,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id'; else location.reload(); }); - //#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - // TODO: いつの日にか消したい - const vh = window.innerHeight * 0.01; - document.documentElement.style.setProperty('--vh', `${vh}px`); - window.addEventListener('resize', () => { - const vh = window.innerHeight * 0.01; - document.documentElement.style.setProperty('--vh', `${vh}px`); - }); - //#endregion - // If mobile, insert the viewport meta tag if (['smartphone', 'tablet'].includes(deviceKind)) { const viewport = document.getElementsByName('viewport').item(0); diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue index 0c46e8941..20622b083 100644 --- a/packages/client/src/ui/_common_/navbar.vue +++ b/packages/client/src/ui/_common_/navbar.vue @@ -168,8 +168,7 @@ function more(ev: MouseEvent) { left: 0; z-index: 1001; width: $nav-icon-only-width; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; box-sizing: border-box; overflow: auto; overflow-x: clip; diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue index c42407f5b..cf82142fe 100644 --- a/packages/client/src/ui/classic.vue +++ b/packages/client/src/ui/classic.vue @@ -198,8 +198,7 @@ onMounted(() => { $ui-font-size: 1em; $widgets-hide-threshold: 1200px; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - min-height: calc(var(--vh, 1vh) * 100); + min-height: 100dvh; box-sizing: border-box; &.wallpaper { @@ -301,8 +300,7 @@ onMounted(() => { top: 0; right: 0; z-index: 1001; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; padding: var(--margin); box-sizing: border-box; overflow: auto; diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue index 3c0c2a44b..224ad7ee1 100644 --- a/packages/client/src/ui/deck.vue +++ b/packages/client/src/ui/deck.vue @@ -255,8 +255,7 @@ async function deleteProfile() { --deckDividerThickness: 5px; display: flex; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; box-sizing: border-box; flex: 1; @@ -424,8 +423,7 @@ async function deleteProfile() { top: 0; left: 0; z-index: 1001; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; width: 240px; box-sizing: border-box; contain: strict; diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index 140c23a35..7029f798f 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -220,8 +220,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null; $ui-font-size: 1em; // TODO: どこかに集約したい $widgets-hide-threshold: 1090px; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - min-height: calc(var(--vh, 1vh) * 100); + min-height: 100dvh; box-sizing: border-box; display: flex; @@ -273,8 +272,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null; top: 0; right: 0; z-index: 1001; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; padding: var(--margin); box-sizing: border-box; overflow: auto; @@ -362,8 +360,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null; top: 0; left: 0; z-index: 1001; - // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ - height: calc(var(--vh, 1vh) * 100); + height: 100dvh; width: 240px; box-sizing: border-box; contain: strict; diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue index c915f8242..84c96a1da 100644 --- a/packages/client/src/ui/zen.vue +++ b/packages/client/src/ui/zen.vue @@ -28,8 +28,7 @@ document.documentElement.style.overflowY = 'scroll';