diff --git a/app/Widgets/Chat/chat.js b/app/Widgets/Chat/chat.js index 971ab995e..810f9bdcf 100644 --- a/app/Widgets/Chat/chat.js +++ b/app/Widgets/Chat/chat.js @@ -169,7 +169,7 @@ var Chat = { if (textarea) { Chat_ajaxGetHistory( textarea.dataset.jid, - firstMessage.dataset.published, + firstMessage ? firstMessage.dataset.published : null, Boolean(textarea.dataset.muc), true, tryMam); @@ -1589,6 +1589,8 @@ var Chat = { if (!chat) return; chat.addEventListener('touchstart', function (event) { + chat.classList.remove('moving'); + Chat.startX = event.targetTouches[0].pageX; Chat.startY = event.targetTouches[0].pageY; }, true); @@ -1608,12 +1610,14 @@ var Chat = { } if (Chat.slideAuthorized) { - chat.style.transform = 'translateX(' + Chat.translateX + 'px)'; + chat.style.transform = 'translateX(' + (Chat.translateX - delay) + 'px)'; } } }, true); chat.addEventListener('touchend', function (event) { + chat.classList.add('moving'); + if (Chat.translateX > (clientWidth / 4) && Chat.slideAuthorized) { MovimTpl.hidePanel(); Chat.get(null, true); diff --git a/public/scripts/movim_tpl.js b/public/scripts/movim_tpl.js index 5eb2d43bd..f4393e128 100644 --- a/public/scripts/movim_tpl.js +++ b/public/scripts/movim_tpl.js @@ -150,6 +150,7 @@ var MovimTpl = { }; MovimEvents.registerBody('touchstart', 'movimtpl', (event) => { + document.querySelector('body > nav').classList.remove('moving'); MovimTpl.startX = event.targetTouches[0].pageX; MovimTpl.startY = event.targetTouches[0].pageY; }); @@ -157,7 +158,8 @@ MovimEvents.registerBody('touchstart', 'movimtpl', (event) => { MovimEvents.registerBody('touchend', 'movimtpl', (event) => { nav = document.querySelector('body > nav'); nav.style.transform = ''; - percent = MovimTpl.translateX / clientWidth;'moving' + nav.classList.add('moving'); + percent = MovimTpl.translateX / clientWidth; if (MovimTpl.menuDragged) { if (nav.classList.contains('active') && percent < -0.2) { diff --git a/public/theme/css/style.css b/public/theme/css/style.css index 0f8bbcd2f..18cb0eb3d 100644 --- a/public/theme/css/style.css +++ b/public/theme/css/style.css @@ -93,6 +93,9 @@ body>nav li { @media screen and (max-width: 1024px) { body>nav.active { box-shadow: var(--elevation-3); + } + + body>nav.active.moving { transition: transform .25s var(--accelerate-easing); transform: translateX(0%); } @@ -100,6 +103,9 @@ body>nav li { body>nav:not(.active) { width: 45rem; transform: translateX(-100%); + } + + body>nav.moving { transition: transform .25s var(--decelerate-easing); } } @@ -258,12 +264,14 @@ main>div:first-child:nth-last-child(2)+div { z-index: 1; box-shadow: var(--elevation-4); transform: translateX(100%); + } + + main.slide>div:first-child:nth-last-child(2).moving { transition: transform .25s var(--decelerate-easing); } main.slide.enabled>div:first-child:nth-last-child(2) { transform: translateX(0); - transition: transform .25s var(--accelerate-easing); } main.slide.enabled>div:first-child:nth-last-child(2)+div { @@ -271,6 +279,10 @@ main>div:first-child:nth-last-child(2)+div { transform: translateX(-2rem); } + main.slide.enabled>div:first-child:nth-last-child(2)+div.moving { + transition: transform .25s var(--accelerate-easing); + } + main>aside+div { padding-right: 0; } @@ -401,6 +413,7 @@ img.avatar:not([src=""])+.placeholder { } @media screen and (max-width: 1024px) { + .on_mobile, .on_mobile_after:after { display: inherit !important; @@ -522,6 +535,7 @@ div.bubble .audio_player p { } @keyframes blink { + 0%, 100% { opacity: 0; @@ -534,6 +548,7 @@ div.bubble .audio_player p { } @keyframes fadetext { + 0%, 100% { color: transparent; @@ -616,6 +631,7 @@ div.bubble .audio_player p { } @keyframes backgroundblink { + 0%, 50%, 100% { @@ -632,4 +648,4 @@ body { --standard-easing: cubic-bezier(0.4, 0.0, 0.2, 1); --accelerate-easing: cubic-bezier(0.167, 0.167, 0, 1); --decelerate-easing: cubic-bezier(1, 0, 0.833, 0.833); -} +} \ No newline at end of file