ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Composer: Remove safe area padding on iPad (#3308)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-06-15 20:39:46 +02:00
parent c876b11943
commit c9db7c08a8
7 changed files with 61 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/middle/MessageList.scss
View File

@ -29,11 +29,12 @@
body.keyboard-visible & { body.keyboard-visible & {
position: relative; position: relative;
bottom: calc(0px - env(safe-area-inset-bottom)); bottom: 0;
// Target: Old Firefox (Waterfox Classic) @media (max-width: 600px) {
@supports not (bottom: calc(0px - env(safe-area-inset-bottom))) { @supports (bottom: calc(0px - env(safe-area-inset-bottom))) {
bottom: 0; bottom: calc(0px - env(safe-area-inset-bottom));
}
} }
body.keyboard-visible.no-page-transitions & { body.keyboard-visible.no-page-transitions & {
@ -99,8 +100,10 @@
.last-in-list { .last-in-list {
margin-bottom: 4.25rem; margin-bottom: 4.25rem;
body:not(.keyboard-visible) & { @supports (margin-bottom: calc(4.25rem + env(safe-area-inset-bottom))) {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom)); body:not(.keyboard-visible) & {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}
} }
} }
} }

9
src/components/middle/MessageSelectToolbar.scss
View File

@ -1,6 +1,6 @@
.MessageSelectToolbar { .MessageSelectToolbar {
position: absolute; position: absolute;
bottom: calc(0.5rem + env(safe-area-inset-bottom)); bottom: 0.5rem;
left: 0.5rem; left: 0.5rem;
right: 0.5rem; right: 0.5rem;
width: auto; width: auto;
@ -8,9 +8,10 @@
justify-content: center; justify-content: center;
margin: 0; margin: 0;
// Target: Old Firefox (Waterfox Classic) @media (max-width: 600px) {
@supports not (bottom: calc(0.5rem + env(safe-area-inset-bottom))) { @supports (bottom: calc(0.5rem + env(safe-area-inset-bottom))) {
bottom: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom));
}
} }
.mask-image-disabled &::before { .mask-image-disabled &::before {

16
src/components/middle/MiddleColumn.scss
View File

@ -188,16 +188,17 @@
} }
&:not(.no-composer) { &:not(.no-composer) {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: 0;
top: 0; top: 0;
body.keyboard-visible & { @media (max-width: 600px) {
top: env(safe-area-inset-bottom); @supports (padding-bottom: env(safe-area-inset-bottom)) {
} padding-bottom: env(safe-area-inset-bottom);
// Target: Old Firefox (Waterfox Classic) body.keyboard-visible & {
@supports not (padding-bottom: env(safe-area-inset-bottom)) { top: env(safe-area-inset-bottom);
padding-bottom: 0; }
}
} }
} }
@ -329,7 +330,6 @@
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
margin-left: -0.5rem; margin-left: -0.5rem;
// Target: Old Firefox (Waterfox Classic)
@supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) { @supports (padding-bottom: calc(0.75rem + env(safe-area-inset-bottom))) {
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
} }

13
src/components/middle/MobileSearch.scss
View File

@ -37,8 +37,17 @@
padding-right: max(0.5rem, env(safe-area-inset-right)); padding-right: max(0.5rem, env(safe-area-inset-right));
body:not(.keyboard-visible) & { body:not(.keyboard-visible) & {
padding-bottom: env(safe-area-inset-bottom); padding-bottom: 0;
height: calc(3.5rem + env(safe-area-inset-bottom)); height: 3.5rem;
}
@media (max-width: 600px) {
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body:not(.keyboard-visible) & {
padding-bottom: env(safe-area-inset-bottom);
height: calc(3.5rem + env(safe-area-inset-bottom));
}
}
} }
// Target: Old Firefox (Waterfox Classic) // Target: Old Firefox (Waterfox Classic)

17
src/components/middle/composer/AttachmentModal.module.scss
View File

@ -26,10 +26,10 @@
overflow-x: auto; overflow-x: auto;
padding-bottom: env(safe-area-inset-bottom); @media (max-width: 600px) {
@supports (padding-bottom: env(safe-area-inset-bottom)) {
@supports not (padding-bottom: env(safe-area-inset-bottom)) { padding-bottom: env(safe-area-inset-bottom);
padding-bottom: 0; }
} }
} }
@ -78,11 +78,12 @@
&.mobile.symbolMenuOpen :global(.modal-dialog) { &.mobile.symbolMenuOpen :global(.modal-dialog) {
transition: var(--layer-transition); transition: var(--layer-transition);
transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0);
transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0); @media (max-width: 600px) {
@supports (bottom: env(safe-area-inset-bottom)) {
@supports not (bottom: env(safe-area-inset-bottom)) { transform: translate3d(0, calc((var(--symbol-menu-height) - env(safe-area-inset-bottom)) * -1), 0);
transform: translate3d(0, calc((var(--symbol-menu-height)) * -1), 0); }
} }
} }

11
src/components/middle/composer/Composer.scss
View File

@ -4,15 +4,14 @@
.select-mode-active + .middle-column-footer & { .select-mode-active + .middle-column-footer & {
position: absolute; position: absolute;
padding-right: 2rem; padding-right: 2rem;
bottom: env(safe-area-inset-bottom); bottom: 0;
// Target: Old Firefox (Waterfox Classic)
@supports not (bottom: env(safe-area-inset-bottom)) {
bottom: 0;
}
@media (max-width: 600px) { @media (max-width: 600px) {
padding-right: 1rem; padding-right: 1rem;
@supports (bottom: env(safe-area-inset-bottom)) {
bottom: env(safe-area-inset-bottom);
}
} }
&::before { &::before {

21
src/components/middle/composer/SymbolMenu.scss
View File

@ -16,9 +16,9 @@
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: 0;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
transform: translate3d(0, calc(var(--symbol-menu-height) + env(safe-area-inset-bottom)), 0); transform: translate3d(0, calc(var(--symbol-menu-height)), 0);
&.open:not(.in-attachment-modal) { &.open:not(.in-attachment-modal) {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@ -36,11 +36,17 @@
// Target: Old Firefox (Waterfox Classic) // Target: Old Firefox (Waterfox Classic)
@supports not (padding-right: env(safe-area-inset-right)) { @supports not (padding-right: env(safe-area-inset-right)) {
padding-right: 0; padding-right: 0;
padding-bottom: 0;
padding-left: 0; padding-left: 0;
transform: translate3d(0, calc(var(--symbol-menu-height)), 0); transform: translate3d(0, calc(var(--symbol-menu-height)), 0);
} }
@media (max-width: 600px) {
@supports not (padding-right: env(safe-area-inset-right)) {
padding-bottom: env(safe-area-inset-bottom);
transform: translate3d(0, calc(var(--symbol-menu-height) + env(safe-area-inset-bottom)), 0);
}
}
body.no-page-transitions & { body.no-page-transitions & {
transition: none; transition: none;
} }
@ -52,11 +58,12 @@
&-main { &-main {
height: calc(var(--symbol-menu-height) - var(--symbol-menu-footer-height)); height: calc(var(--symbol-menu-height) - var(--symbol-menu-footer-height));
max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom)); max-height: calc(100vh - var(--symbol-menu-footer-height));
// Target: Old Firefox (Waterfox Classic) @media (max-width: 600px) {
@supports not (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) { @supports (max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom))) {
max-height: calc(100vh - var(--symbol-menu-footer-height)); max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
}
} }
} }