refactor: 自动高度改用dvh

并修正popup容器问题
GaiZhenbiao · May 6, 2024 · 3f11a48 · 3f11a48
1 parent 8a9c9c1
commit 3f11a48
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/web_assets/javascript/ChuanhuChat.js b/web_assets/javascript/ChuanhuChat.js
@@ -327,10 +327,10 @@ function setPopupBoxPosition() {
     // chuanhuPopup.style.top = `${(screenHeight - popupBoxHeight) / 2}px`;
 }
 
-function updateVH() {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-}
+// function updateVH() {
+//     const vh = window.innerHeight * 0.01;
+//     document.documentElement.style.setProperty('--vh', `${vh}px`);
+// }
 
 function setChatbotHeight() {
     return;
@@ -442,21 +442,21 @@ var gradioObserver = new MutationObserver(function (mutations) {
 // 监视页面变化
 window.addEventListener("DOMContentLoaded", function () {
     // const ga = document.getElementsByTagName("gradio-app");
-    updateVH();
+    // updateVH();
     windowWidth = window.innerWidth;
     gradioApp().addEventListener("render", initialize);
     isInIframe = (window.self !== window.top);
     historyLoaded = false;
 });
 window.addEventListener('resize', ()=>{
     // setChatbotHeight();
-    updateVH();
+    // updateVH();
     windowWidth = window.innerWidth;
     setPopupBoxPosition();
     adjustSide();
 });
 window.addEventListener('orientationchange', (event) => {
-    updateVH();
+    // updateVH();
     windowWidth = window.innerWidth;
     setPopupBoxPosition();
     adjustSide();

diff --git a/web_assets/stylesheet/ChuanhuChat.css b/web_assets/stylesheet/ChuanhuChat.css
@@ -232,6 +232,8 @@ body.popup-open {
 
 
 #popup-wrapper {
+    width: 100dvw;
+    height: 100dvh;
     display: none;
     position: fixed;
     overflow: auto;
@@ -300,10 +302,10 @@ body.popup-open {
     display: inline-flex;
     justify-content: space-between;
     /* margin-top: 54px; */
-    /* height: calc(100*var(--vh) - 72px); */
+    /* height: calc(100dvh - 72px); */
     position: absolute;
     top: 65px;
-    height: calc(100*var(--vh) - 65px);
+    height: calc(100dvh - 65px);
 }
 
 #chuanhu-area {
@@ -644,7 +646,7 @@ input:checked + .chatbot-input-more-span {
 #menu-area.showSide {
     width: var(--menu-width);
     max-width: var(--menu-width);
-    height: calc(100*var(--vh) - 65px);
+    height: calc(100dvh - 65px);
     visibility: visible;
     /* margin-right: 16px; */
     border-right: 0.5px solid var(--border-color-primary);
@@ -656,7 +658,7 @@ input:checked + .chatbot-input-more-span {
 }
 #toolbox-area.showSide {
     width: var(--toolbox-width);
-    height: calc(100*var(--vh) - 65px);
+    height: calc(100dvh - 65px);
     visibility: visible;
     /* margin-left: 16px; */
 }
@@ -685,17 +687,17 @@ input:checked + .chatbot-input-more-span {
         /* right: calc(0px - var(--toolbox-width)); */
         z-index: 10008;
         overflow: unset;
-        top: calc(100*var(--vh));
+        top: 100dvh;
         margin: 0;
     }
     #toolbox-area > div {
         width: 100vw;
-        height: calc( 90*var(--vh) - 48px );
+        height: calc( 90dvh - 48px );
     }
     #toolbox-area.showSide {
         width: 100vw;
         right: 0;
-        top: calc( 10*var(--vh) + 48px );
+        top: calc( 10dvh + 48px );
         margin: 0;
         border-radius: 6px;
         box-shadow: 0 2px 64px 4px rgba(0, 0, 0, 0.2);
@@ -789,7 +791,7 @@ input:checked + .chatbot-input-more-span {
     }
     #chuanhu-popup {
         width: 100vw;
-        height: calc( 90*var(--vh) - 48px );
+        height: calc( 90dvh - 48px );
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
@@ -806,7 +808,7 @@ input:checked + .chatbot-input-more-span {
     }
     #toolbox-area > .gradio-group > div.styler > .gradio-tabs > div.tabitem,
     #chuanhu-popup .gradio-group > div.styler > .gradio-tabs > div.tabitem {
-        height: calc( 90*var(--vh) - 48px - 46px - 45px );
+        height: calc( 90dvh - 48px - 46px - 45px );
         overflow-x: auto;
         border: none;
     }
@@ -990,8 +992,8 @@ input:checked + .chatbot-input-more-span {
 } */
 
 #chuanhu-history {
-    max-height: calc(100*var(--vh) - 65px - 61px);
-    max-height: calc(100*var(--vh) - 65px - calc(36px + 12px + max(12px, env(safe-area-inset-bottom)) + 1px ));
+    max-height: calc(100dvh - 65px - 61px);
+    max-height: calc(100dvh - 65px - calc(36px + 12px + max(12px, env(safe-area-inset-bottom)) + 1px ));
     /* overflow-y: auto; */
 }
 #chuanhu-history > div {
@@ -1250,14 +1252,14 @@ button:active .icon-need-hover, button:active.icon-need-hover {
     overflow: hidden;
     display: inline-flex;
     /* margin-top: 54px; */
-    /* height: calc(100*var(--vh) - 72px); */
+    /* height: calc(100dvh - 72px); */
     /* position: absolute;
     top: 48px;
 } */
 /* 
 .hide-body {
     display: none;
-    top: calc(-100*var(--vh));
+    top: calc(-100dvh);
     
 }
 #train-body {
@@ -1266,7 +1268,7 @@ button:active .icon-need-hover, button:active.icon-need-hover {
 
 #chuanhu-body.hide-body {
     display: none;
-    top: calc(100*var(--vh) + 48px);
+    top: calc(100dvh + 48px);
 }
 #chuanhu-body {
     transition: top 0.3s ease-in-out, display 0.3s ease;

diff --git a/web_assets/stylesheet/chatbot.css b/web_assets/stylesheet/chatbot.css
@@ -151,19 +151,19 @@ hr.append-display {
 /* update on 2023.4.8: 高度的细致调整已写入JavaScript */
 @media screen and (min-width: 500px) {
     /* #chuanhu-chatbot {
-        height: calc(100*var(--vh) - 200px);
+        height: calc(100dvh - 200px);
     }
     #chuanhu-chatbot>.wrapper>.wrap {
-        max-height: calc(100*var(--vh) - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+        max-height: calc(100dvh - 200px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     } */
 }
 /* 屏幕宽度小于500px的设备 */
 @media screen and (max-width: 499px) {
     /* #chuanhu-chatbot {
-        height: calc(100*var(--vh) - 140px);
+        height: calc(100dvh - 140px);
     }
     #chuanhu-chatbot>.wrapper>.wrap {
-        max-height: calc(100*var(--vh) - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
+        max-height: calc(100dvh - 140px - var(--line-sm)*1rem - 2*var(--block-label-margin) );
     } */
     .message.bot {
         max-width: calc(100% - 84px) !important;
@@ -183,7 +183,7 @@ hr.append-display {
 }
 
 #chuanhu-chatbot {
-    height: calc(100*var(--vh) - 65px) !important;
+    height: calc(100dvh - 65px) !important;
     border-radius: 0;
 }
 #chuanhu-chatbot > .wrapper > .bubble-wrap {