Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

画面下部に必要なスペース関連の改善 (#9509)

Browse source 
* 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`
This commit is contained in:
あずき⪥™ 2023-01-10 13:50:34 +09:00 committed by GitHub
parent 1688083e9a
commit 1453a0f5cf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 11 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/frontend/src/components/MkLaunchPad.vue
View file

@ -75,7 +75,7 @@ function close() {
&.asDrawer { &.asDrawer {
width: 100%; 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-radius: 24px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;

2
packages/frontend/src/components/MkMenu.vue
View file

@ -201,7 +201,7 @@ onBeforeUnmount(() => {
} }
&.asDrawer { &.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%; width: 100%;
border-radius: 24px; border-radius: 24px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;

1
packages/frontend/src/pages/messaging/messaging-room.vue
View file

@ -351,7 +351,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
z-index: 2; z-index: 2;
bottom: 0; bottom: 0;
padding-top: 8px; padding-top: 8px;
bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
> .new-message { > .new-message {
width: 100%; width: 100%;

4
packages/frontend/src/style.scss
View file

@ -6,9 +6,11 @@
--marginHalf: 10px; --marginHalf: 10px;
--margin: var(--marginFull); --margin: var(--marginFull);
--minBottomSpacing: 0px;
@media (max-width: 500px) { @media (max-width: 500px) {
--margin: var(--marginHalf); --margin: var(--marginHalf);
--minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
} }
//--ad: rgb(255 169 0 / 10%); //--ad: rgb(255 169 0 / 10%);

11
packages/frontend/src/ui/_common_/common.vue
View file

@ -98,10 +98,10 @@ if ($i) {
} }
} }
@media (max-width: 700px) { @media (max-width: 500px) {
top: initial; top: initial;
bottom: 112px; bottom: calc(var(--minBottomSpacing) + var(--margin));
padding: 0 16px; padding: 0 var(--margin);
display: flex; display: flex;
flex-direction: column-reverse; 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> </style>

4
packages/frontend/src/ui/_common_/stream-indicator.vue
View file

@ -38,8 +38,8 @@ onUnmounted(() => {
.nsbbhtug { .nsbbhtug {
position: fixed; position: fixed;
z-index: 16385; z-index: 16385;
bottom: 8px; bottom: calc(var(--minBottomSpacing) + var(--margin));
right: 8px; right: var(--margin);
margin: 0; margin: 0;
padding: 6px 12px; padding: 6px 12px;
font-size: 0.9em; font-size: 0.9em;

8
packages/frontend/src/ui/universal.vue
View file

@ -392,12 +392,6 @@ $widgets-hide-threshold: 1090px;
} }
.spacer { .spacer {
$widgets-hide-threshold: 1090px; height: calc(var(--minBottomSpacing));
height: calc(env(safe-area-inset-bottom, 0px) + 96px);
@media (min-width: ($widgets-hide-threshold + 1px)) {
display: none;
}
} }
</style> </style>