画面下部に必要なスペース関連の改善 (#9509)
* 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:
parent
1688083e9a
commit
1453a0f5cf
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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%);
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue