heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(client): use dvh

Browse source
This commit is contained in:
syuilo 2022-11-13 11:43:23 +09:00
parent 1751bfea5f
commit 831be69cec
6 changed files with 9 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/client/src/init.ts
View file

@ -82,16 +82,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
else location.reload(); 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 mobile, insert the viewport meta tag
if (['smartphone', 'tablet'].includes(deviceKind)) { if (['smartphone', 'tablet'].includes(deviceKind)) {
const viewport = document.getElementsByName('viewport').item(0); const viewport = document.getElementsByName('viewport').item(0);

3
packages/client/src/ui/_common_/navbar.vue
View file

@ -168,8 +168,7 @@ function more(ev: MouseEvent) {
left: 0; left: 0;
z-index: 1001; z-index: 1001;
width: $nav-icon-only-width; width: $nav-icon-only-width;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
overflow-x: clip; overflow-x: clip;

6
packages/client/src/ui/classic.vue
View file

@ -198,8 +198,7 @@ onMounted(() => {
$ui-font-size: 1em; $ui-font-size: 1em;
$widgets-hide-threshold: 1200px; $widgets-hide-threshold: 1200px;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ min-height: 100dvh;
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
&.wallpaper { &.wallpaper {
@ -301,8 +300,7 @@ onMounted(() => {
top: 0; top: 0;
right: 0; right: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
padding: var(--margin); padding: var(--margin);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;

6
packages/client/src/ui/deck.vue
View file

@ -255,8 +255,7 @@ async function deleteProfile() {
--deckDividerThickness: 5px; --deckDividerThickness: 5px;
display: flex; display: flex;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
@ -424,8 +423,7 @@ async function deleteProfile() {
top: 0; top: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
width: 240px; width: 240px;
box-sizing: border-box; box-sizing: border-box;
contain: strict; contain: strict;

9
packages/client/src/ui/universal.vue
View file

@ -220,8 +220,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
$ui-font-size: 1em; // TODO: どこかに集約したい $ui-font-size: 1em; // TODO: どこかに集約したい
$widgets-hide-threshold: 1090px; $widgets-hide-threshold: 1090px;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ min-height: 100dvh;
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -273,8 +272,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
top: 0; top: 0;
right: 0; right: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
padding: var(--margin); padding: var(--margin);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@ -362,8 +360,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
top: 0; top: 0;
left: 0; left: 0;
z-index: 1001; z-index: 1001;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ height: 100dvh;
height: calc(var(--vh, 1vh) * 100);
width: 240px; width: 240px;
box-sizing: border-box; box-sizing: border-box;
contain: strict; contain: strict;

3
packages/client/src/ui/zen.vue
View file

@ -28,8 +28,7 @@ document.documentElement.style.overflowY = 'scroll';
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-app { .mk-app {
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ min-height: 100dvh;
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
} }
</style> </style>