Browse Source

Fix iOS Safari topbar width on resize

master
Eduard Kuzmenko 4 years ago
parent
commit
2803b40092
  1. 46
      src/lib/appManagers/appImManager.ts
  2. 9
      src/scss/partials/_chat.scss

46
src/lib/appManagers/appImManager.ts

@ -188,36 +188,56 @@ export class AppImManager {
// * fix topbar overflow section // * fix topbar overflow section
const observeOptions = {
attributes: true,
childList: true,
subtree: true
};
// ! У МЕНЯ ПРОСТО СГОРЕЛО, САФАРИ КОНЧЕННЫЙ БРАУЗЕР - ЕСЛИ НЕ СКРЫВАТЬ БЛОК, ТО ПРИ ПЕРЕВОРОТЕ ЭКРАНА НА АЙФОНЕ БЛОК БУДЕТ НЕПРАВИЛЬНО ШИРИНЫ, ДАЖЕ БЕЗ ЭТОЙ ФУНКЦИИ!
const setUtilsWidth = () => { 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; const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
this.log('utils width:', width); this.log('utils width:', width);
this.chatInfo.style.setProperty('--utils-width', width + 'px'); 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; let mutationRAF: number;
const mutationObserver = new MutationObserver((mutationList) => { const mutationObserver = new MutationObserver((mutationList) => {
if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
//mutationRAF = window.setTimeout(() => {
mutationRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
setUtilsWidth(); setUtilsWidth();
//});
});
//}, 64);
}); });
mutationObserver.observe(chatUtils, { mutationObserver.observe(chatUtils, observeOptions);
attributes: true,
childList: true,
subtree: true
});
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

9
src/scss/partials/_chat.scss

@ -100,7 +100,9 @@ $chat-helper-size: 39px;
.chat-info { .chat-info {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;
//--utils-width: NaN;
//&.have-utils-width {
max-width: calc(100% - var(--utils-width)); max-width: calc(100% - var(--utils-width));
@include respond-to(medium-screens) { @include respond-to(medium-screens) {
@ -108,6 +110,7 @@ $chat-helper-size: 39px;
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);

Loading…
Cancel
Save