From 1453a0f5cfa3ec7d0b974b56a9b9470693df0c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=82=E3=81=9A=E3=81=8D=E2=AA=A5=E2=84=A2?=
<44765629+melt-adzuki@users.noreply.github.com>
Date: Tue, 10 Jan 2023 13:50:34 +0900
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E9=9D=A2=E4=B8=8B=E9=83=A8=E3=81=AB?=
=?UTF-8?q?=E5=BF=85=E8=A6=81=E3=81=AA=E3=82=B9=E3=83=9A=E3=83=BC=E3=82=B9?=
=?UTF-8?q?=E9=96=A2=E9=80=A3=E3=81=AE=E6=94=B9=E5=96=84=20(#9509)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* enhance: apply same safe area processing to the tab bar
* fix: remove unnecessary bottom space on messaging room
* enhance bottom spacing
* fix size of `minBottomSpacing`
---
packages/frontend/src/components/MkLaunchPad.vue | 2 +-
packages/frontend/src/components/MkMenu.vue | 2 +-
.../frontend/src/pages/messaging/messaging-room.vue | 1 -
packages/frontend/src/style.scss | 4 +++-
packages/frontend/src/ui/_common_/common.vue | 11 +++--------
.../frontend/src/ui/_common_/stream-indicator.vue | 4 ++--
packages/frontend/src/ui/universal.vue | 8 +-------
7 files changed, 11 insertions(+), 21 deletions(-)
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index aab7631e36..2f941a311d 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -75,7 +75,7 @@ function close() {
&.asDrawer {
width: 100%;
- padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+ padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px) 16px;
border-radius: 24px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index a1020ef151..94dabcac90 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -201,7 +201,7 @@ onBeforeUnmount(() => {
}
&.asDrawer {
- padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+ padding: 12px 0 max(env(safe-area-inset-bottom, 0px), 12px) 0;
width: 100%;
border-radius: 24px;
border-bottom-right-radius: 0;
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index 84dcfc3622..01b227a672 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -351,7 +351,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
z-index: 2;
bottom: 0;
padding-top: 8px;
- bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
> .new-message {
width: 100%;
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 3cd7602423..22c297dc31 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -6,9 +6,11 @@
--marginHalf: 10px;
--margin: var(--marginFull);
-
+ --minBottomSpacing: 0px;
+
@media (max-width: 500px) {
--margin: var(--marginHalf);
+ --minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
}
//--ad: rgb(255 169 0 / 10%);
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index 0333e20d0a..d1f37d398f 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -98,10 +98,10 @@ if ($i) {
}
}
- @media (max-width: 700px) {
+ @media (max-width: 500px) {
top: initial;
- bottom: 112px;
- padding: 0 16px;
+ bottom: calc(var(--minBottomSpacing) + var(--margin));
+ padding: 0 var(--margin);
display: flex;
flex-direction: column-reverse;
@@ -112,11 +112,6 @@ if ($i) {
}
}
}
-
- @media (max-width: 500px) {
- bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
- padding: 0 8px;
- }
}
</style>
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
index a855de8ab9..9a67c15cb5 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.vue
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -38,8 +38,8 @@ onUnmounted(() => {
.nsbbhtug {
position: fixed;
z-index: 16385;
- bottom: 8px;
- right: 8px;
+ bottom: calc(var(--minBottomSpacing) + var(--margin));
+ right: var(--margin);
margin: 0;
padding: 6px 12px;
font-size: 0.9em;
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 3d74fc9ee3..fcc0b468e3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -392,12 +392,6 @@ $widgets-hide-threshold: 1090px;
}
.spacer {
- $widgets-hide-threshold: 1090px;
-
- height: calc(env(safe-area-inset-bottom, 0px) + 96px);
-
- @media (min-width: ($widgets-hide-threshold + 1px)) {
- display: none;
- }
+ height: calc(var(--minBottomSpacing));
}
</style>