r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix iOS Safari topbar width on resize

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-11-23 13:20:26 +02:00
parent cd6c6936b0
commit 2803b40092
2 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/lib/appManagers/appImManager.ts
View File

@ -188,36 +188,56 @@ export class AppImManager {
// * fix topbar overflow section // * fix topbar overflow section
const setUtilsWidth = () => { const observeOptions = {
const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
this.log('utils width:', width);
this.chatInfo.style.setProperty('--utils-width', width + 'px');
};
let mutationRAF: number;
const mutationObserver = new MutationObserver((mutationList) => {
if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
//mutationRAF = window.setTimeout(() => {
mutationRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
setUtilsWidth();
//});
});
//}, 64);
});
mutationObserver.observe(chatUtils, {
attributes: true, attributes: true,
childList: true, childList: true,
subtree: true subtree: true
};
// ! У МЕНЯ ПРОСТО СГОРЕЛО, САФАРИ КОНЧЕННЫЙ БРАУЗЕР - ЕСЛИ НЕ СКРЫВАТЬ БЛОК, ТО ПРИ ПЕРЕВОРОТЕ ЭКРАНА НА АЙФОНЕ БЛОК БУДЕТ НЕПРАВИЛЬНО ШИРИНЫ, ДАЖЕ БЕЗ ЭТОЙ ФУНКЦИИ!
const setUtilsWidth = () => {
//return;
if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
chatUtils.classList.add('hide');
mutationObserver.disconnect();
mutationRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
//setTimeout(() => {
chatUtils.classList.remove('hide');
/* this.chatInfo.style.removeProperty('--utils-width');
void this.chatInfo.offsetLeft; // reflow */
const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
this.log('utils width:', width);
this.chatInfo.style.setProperty('--utils-width', width + 'px');
//this.chatInfo.classList.toggle('have-utils-width', !!width);
//}, 0);
mutationRAF = 0;
mutationObserver.observe(chatUtils, observeOptions);
//});
});
};
/* window.addEventListener('resize', () => {
setTimeout(setUtilsWidth, 5000);
}); */
let mutationRAF: number;
const mutationObserver = new MutationObserver((mutationList) => {
setUtilsWidth();
}); });
mutationObserver.observe(chatUtils, observeOptions);
mediaSizes.addListener('changeScreen', (from, to) => { mediaSizes.addListener('changeScreen', (from, to) => {
setUtilsWidth();
this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile); this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile
/* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */); /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
setUtilsWidth();
}); });
// * fix topbar overflow section end // * fix topbar overflow section end

19
src/scss/partials/_chat.scss
View File

@ -100,14 +100,17 @@ $chat-helper-size: 39px;
.chat-info { .chat-info {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
//--utils-width: NaN;
max-width: calc(100% - var(--utils-width)); //&.have-utils-width {
max-width: calc(100% - var(--utils-width));
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
body.is-right-column-shown & { body.is-right-column-shown & {
max-width: calc(100% - var(--right-column-width) - var(--utils-width)); max-width: calc(100% - var(--right-column-width) - var(--utils-width));
}
} }
} //}
} }
.chat-utils { .chat-utils {
@ -115,6 +118,10 @@ $chat-helper-size: 39px;
align-items: center; align-items: center;
flex: 0 0 auto; flex: 0 0 auto;
/* position: absolute;
right: 0px;
padding-right: inherit; */
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
transition: transform var(--layer-transition); transition: transform var(--layer-transition);
@ -630,7 +637,7 @@ $chat-helper-size: 39px;
bottom: 0; bottom: 0;
right: 0; right: 0;
transform: translateZ(0); transform: translateZ(0);
transition: transform var(--layer-transition); transition: transform var(--layer-transition) !important;
body.is-left-column-shown & { body.is-left-column-shown & {
transform: translate3d(26.5rem, 0, 0); transform: translate3d(26.5rem, 0, 0);