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

Revert "Safe area for iPhone (#1403)"

Browse Source 
This reverts commit 364f2d9930bbbe87e27d939947f8896474934401.
This commit is contained in:
Alexander Zinchuk 2021-09-16 20:10:50 +03:00
parent a2f11c0468
commit 0a7c49f015
15 changed files with 4 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/main/Main.scss
View File

@ -95,12 +95,6 @@
width: 100vw; width: 100vw;
transform: translate3d(-20vw, 0, 0); transform: translate3d(-20vw, 0, 0);
} }
@supports (left: env(safe-area-inset-left)) {
left: env(safe-area-inset-left) !important;
max-width: calc(26.5rem - env(safe-area-inset-left)) !important;
}
} }
#RightColumn { #RightColumn {

26
src/components/mediaViewer/MediaViewer.scss
View File

@ -77,18 +77,10 @@
@media (max-width: 600px) { @media (max-width: 600px) {
padding: 0 0.5rem; padding: 0 0.5rem;
@supports (padding: 0 env(safe-area-inset-left)) {
padding: 0 #{"max(0.5rem, env(safe-area-inset-left))"};
}
.media-viewer-close { .media-viewer-close {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
} }
@supports (padding: 0 env(safe-area-inset-left)) {
padding: 0 #{"max(1.25rem, env(safe-area-inset-left))"};
}
} }
& > .Transition, & > .Transition,
@ -193,19 +185,10 @@
background-image: url("../../assets/media_navigation_previous.svg"); background-image: url("../../assets/media_navigation_previous.svg");
background-position: 1.25rem calc(50% - 2rem); background-position: 1.25rem calc(50% - 2rem);
@supports (left: env(safe-area-inset-left)) {
left: env(safe-area-inset-left);
}
&[dir=rtl] { &[dir=rtl] {
left: auto; left: auto;
right: 0; right: 0;
transform: scaleX(-1); transform: scaleX(-1);
@supports (left: env(safe-area-inset-left)) {
left: auto;
right: env(safe-area-inset-right);
}
} }
} }
@ -214,19 +197,10 @@
background-image: url("../../assets/media_navigation_next.svg"); background-image: url("../../assets/media_navigation_next.svg");
background-position: calc(100% - 1.25rem) calc(50% - 2rem); background-position: calc(100% - 1.25rem) calc(50% - 2rem);
@supports (left: env(safe-area-inset-left)) {
right: env(safe-area-inset-right);
}
&[dir=rtl]{ &[dir=rtl]{
left: 0; left: 0;
right: auto; right: auto;
transform: scaleX(-1); transform: scaleX(-1);
@supports (left: env(safe-area-inset-left)) {
right: auto;
left: env(safe-area-inset-left);
}
} }
} }

2
src/components/mediaViewer/SenderInfo.scss
View File

@ -23,7 +23,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
max-width: calc(100% - 3.75rem); max-width: 100%;
} }
.title { .title {

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

@ -11,12 +11,6 @@
overflow-y: auto; overflow-y: auto;
@include overflow-y-overlay(); @include overflow-y-overlay();
transition: transform var(--layer-transition);
body.animation-level-0 & {
transition: none !important;
}
.mask-image-enabled & { .mask-image-enabled & {
mask-image: linear-gradient(to top, transparent 0, #000 0.5rem); mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);
} }
@ -31,12 +25,6 @@
} }
} }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body.keyboard-visible & {
transform: translateY(env(safe-area-inset-bottom));
}
}
&.no-avatars .Message > .Avatar { &.no-avatars .Message > .Avatar {
display: none; display: none;
} }
@ -79,12 +67,6 @@
@media (max-width: 600px) { @media (max-width: 600px) {
margin-bottom: 4.25rem; margin-bottom: 4.25rem;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body:not(.keyboard-visible) & {
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
}
}
} }
&.ActionMessage { &.ActionMessage {

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

@ -8,10 +8,6 @@
justify-content: center; justify-content: center;
margin: 0; margin: 0;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
bottom: calc(.5rem + env(safe-area-inset-bottom));
}
.mask-image-disabled &::before { .mask-image-disabled &::before {
left: auto !important; left: auto !important;
right: auto !important; right: auto !important;

2
src/components/middle/MessageSelectToolbar.tsx
View File

@ -70,7 +70,7 @@ const MessageSelectToolbar: FC<OwnProps & StateProps & DispatchProps> = ({
const lang = useLang(); const lang = useLang();
const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount, 'i'); const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount);
const className = buildClassName( const className = buildClassName(
'MessageSelectToolbar', 'MessageSelectToolbar',

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

@ -227,7 +227,7 @@
z-index: var(--z-middle-footer); z-index: var(--z-middle-footer);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
transition: top 200ms, transform var(--layer-transition); transition: transform var(--layer-transition);
body.animation-level-0 & { body.animation-level-0 & {
transition: none !important; transition: none !important;
@ -249,17 +249,6 @@
} }
} }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
&:not(.no-composer) {
padding-bottom: env(safe-area-inset-bottom);
top: 0;
body.keyboard-visible & {
top: env(safe-area-inset-bottom);
}
}
}
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -358,10 +347,6 @@
@media (max-width: 600px) { @media (max-width: 600px) {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}
} }
.mask-image-disabled &::before { .mask-image-disabled &::before {

22
src/components/middle/MiddleColumn.tsx
View File

@ -184,28 +184,6 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
} }
}, [animationLevel]); }, [animationLevel]);
// Fix for mobile virtual keyboard
useEffect(() => {
const { visualViewport } = window as any;
if (!visualViewport) {
return undefined;
}
const handleResize = () => {
if (window.visualViewport.height !== document.documentElement.clientHeight) {
document.body.classList.add('keyboard-visible');
} else {
document.body.classList.remove('keyboard-visible');
}
};
visualViewport.addEventListener('resize', handleResize);
return () => {
visualViewport.removeEventListener('resize', handleResize);
};
}, []);
const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => { const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
if (e.propertyName === 'transform' && e.target === e.currentTarget) { if (e.propertyName === 'transform' && e.target === e.currentTarget) {
setIsReady(Boolean(chatId)); setIsReady(Boolean(chatId));

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

@ -32,11 +32,6 @@
max-width: unset; max-width: unset;
margin-top: -0.1875rem; margin-top: -0.1875rem;
} }
@supports (padding-left: env(safe-area-inset-left)) {
padding-left: #{"max(0.75rem, env(safe-area-inset-left))"};
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
}
} }
.AudioPlayer { .AudioPlayer {
@ -85,22 +80,12 @@
position: relative; position: relative;
z-index: var(--z-middle-header); z-index: var(--z-middle-header);
@supports (padding-left: env(safe-area-inset-left)) {
padding-left: #{"max(1.5rem, env(safe-area-inset-left))"};
padding-right: #{"max(.8125rem, env(safe-area-inset-right))"};
}
@media (max-width: 600px) { @media (max-width: 600px) {
padding: 0.5rem; padding: 0.5rem;
position: relative; position: relative;
// Force rendering in the composite layer to fix the z-index rendering issue // Force rendering in the composite layer to fix the z-index rendering issue
transform: translate3d(0, 0, 10px); transform: translate3d(0, 0, 10px);
transform-style: preserve-3d; transform-style: preserve-3d;
@supports (padding-left: env(safe-area-inset-left)) {
padding-left: #{"max(.5rem, env(safe-area-inset-left))"};
padding-right: #{"max(.5rem, env(safe-area-inset-right))"};
}
} }
.Transition { .Transition {

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

@ -10,11 +10,6 @@
align-items: center; align-items: center;
padding: 0 0.5rem 0 0.25rem; padding: 0 0.5rem 0 0.25rem;
@supports (padding-left: env(safe-area-inset-left)) {
padding-left: #{"max(0.25rem, env(safe-area-inset-left))"};
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
}
> .SearchInput { > .SearchInput {
margin-left: 0.25rem; margin-left: 0.25rem;
flex: 1; flex: 1;
@ -34,16 +29,6 @@
padding-left: 1rem; padding-left: 1rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-left: #{"max(1rem, env(safe-area-inset-left))"};
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
body:not(.keyboard-visible) & {
padding-bottom: env(safe-area-inset-bottom);
height: calc(3.5rem + env(safe-area-inset-bottom));
}
}
> .counter { > .counter {
flex: 1; flex: 1;
color: var(--color-text-secondary); color: var(--color-text-secondary);

14
src/components/middle/ScrollDownButton.scss
View File

@ -10,10 +10,6 @@
z-index: var(--z-scroll-down-button); z-index: var(--z-scroll-down-button);
pointer-events: none; pointer-events: none;
@supports (right: env(safe-area-inset-right)) {
right: #{"max(1rem, env(safe-area-inset-right))"};
}
body.animation-level-0 & { body.animation-level-0 & {
transform: none !important; transform: none !important;
@ -23,12 +19,6 @@
@media (max-width: 600px) { @media (max-width: 600px) {
right: 0.5rem; right: 0.5rem;
bottom: 4.5rem; bottom: 4.5rem;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
body:not(.keyboard-visible) & {
bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
}
} }
&-inner { &-inner {
@ -74,10 +64,6 @@
&.no-composer:not(.with-extra-shift) { &.no-composer:not(.with-extra-shift) {
transform: translateY(4rem); transform: translateY(4rem);
@supports (padding-bottom: env(safe-area-inset-bottom)) {
transform: translateY(calc(4rem - env(safe-area-inset-bottom)));
}
} }
} }

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

@ -8,10 +8,6 @@
padding-right: 2rem; padding-right: 2rem;
bottom: 0; bottom: 0;
@supports (padding-bottom: env(safe-area-inset-bottom)) {
bottom: env(safe-area-inset-bottom);
}
@media (max-width: 600px) { @media (max-width: 600px) {
padding-right: 1rem; padding-right: 1rem;
} }

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

@ -11,12 +11,6 @@
z-index: 1; z-index: 1;
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
@supports (padding-bottom: env(safe-area-inset-bottom)) {
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0);
}
&.open { &.open {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
@ -39,9 +33,6 @@
width: var(--symbol-menu-width); width: var(--symbol-menu-width);
height: var(--symbol-menu-height); height: var(--symbol-menu-height);
max-height: calc(100vh - var(--symbol-menu-footer-height)); max-height: calc(100vh - var(--symbol-menu-footer-height));
@supports (padding-bottom: env(safe-area-inset-bottom)) {
max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
}
} }
&-footer { &-footer {
@ -125,11 +116,6 @@
position: absolute; position: absolute;
right: .25rem; right: .25rem;
top: .25rem; top: .25rem;
@supports (right: env(safe-area-inset-right)) {
right: #{"max(.25rem, env(safe-area-inset-right))"};
top: #{"max(.25rem, env(safe-area-inset-top))"};
}
} }
@media (orientation: landscape) { @media (orientation: landscape) {

4
src/components/right/RightColumn.scss
View File

@ -32,10 +32,6 @@
transform: translate3d(110vw, 0, 0); transform: translate3d(110vw, 0, 0);
} }
@supports (padding-right: env(safe-area-inset-right)) {
padding-right: env(safe-area-inset-right);
}
> .Transition { > .Transition {
height: calc(100% - var(--header-height)); height: calc(100% - var(--header-height));
overflow: hidden; overflow: hidden;

2
src/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Telegram WebZ"> <meta name="apple-mobile-web-app-title" content="Telegram WebZ">
<meta name="application-name" content="Telegram WebZ"> <meta name="application-name" content="Telegram WebZ">