From f2e2e8b08a8db770a840952de132134b9f0aac49 Mon Sep 17 00:00:00 2001 From: sravan Date: Fri, 17 Jul 2026 22:07:42 +0530 Subject: [PATCH] fix(mobile): parallax slide-back, swipe images left/right, glue thread while images load MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - #4: on back, reveal the chat list UNDERNEATH with a parallax slide-in while the conversation slides off to the right (slide the whole .content, list forced visible beneath) — matches the Teams push/pop. - #8: swipe left/right in the image viewer flips to the prev/next image (not just swipe-down to close). - #7: re-pin to the bottom as each image finishes loading (when near bottom), so late images don't reflow/'dance' the thread. Build marker -> 2026-07-17-batch94. Co-Authored-By: Claude Opus 4.8 --- server/public/home.html | 29 ++++++++++++++++++++--------- 1 file changed, 20 insertions(+), 9 deletions(-) diff --git a/server/public/home.html b/server/public/home.html index 5d1422f..a0fae64 100644 --- a/server/public/home.html +++ b/server/public/home.html @@ -1073,11 +1073,13 @@ /* Native-style push/pop: the conversation slides in from the right when opened and slides back out when you go back, so navigation has a clear direction (like Teams/WhatsApp). */ @keyframes bzConvoIn{from{transform:translateX(100%);}to{transform:translateX(0);}} + @keyframes bzListIn{from{transform:translateX(-24%);}to{transform:translateX(0);}} body.chat-open:not(.chat-closing) .content .panel{animation:bzConvoIn .22s cubic-bezier(.2,.7,.3,1);} - body.chat-closing .content{display:block!important;} - /* Close: the outgoing conversation is slid out via an inline transform in showWelcome() — more - reliable across WebKit than swapping @keyframes on the same element mid-flight. */ - body.chat-closing .content .panel{will-change:transform;} + /* Close (native push/pop, like Teams): reveal the chat LIST underneath with a parallax slide-in while + the conversation slides off to the right. The conversation (.content) is slid by an inline transform + in showWelcome(); the list (.chatcol) is force-shown beneath it for the duration of the animation. */ + body.chat-closing .content{display:block!important;z-index:2;box-shadow:-10px 0 26px rgba(15,23,42,.16);will-change:transform;} + body.chat-closing .chatcol{display:flex!important;position:absolute;inset:0;z-index:0;animation:bzListIn .2s cubic-bezier(.4,0,.7,.4);} /* Bigger touch targets */ .chat-row{padding:.7rem .85rem;} .convo-head{padding:.7rem .85rem;} @@ -1104,7 +1106,7 @@ -