feat: optimize height control for mobile

coaidev · Mar 6, 2024 · e5a43ab · e5a43ab
1 parent 1b5d9a1
commit e5a43ab
Show file tree

Hide file tree

Showing 12 changed files with 33 additions and 37 deletions.
diff --git a/app/src/assets/admin/all.less b/app/src/assets/admin/all.less
@@ -15,8 +15,7 @@
   display: flex;
   flex-direction: row;
   width: 100%;
-  min-height: calc(100vh - 56px);
-  height: max-content;
+  height: calc(100% - 56px);
 }
 
 .admin-card {

diff --git a/app/src/assets/admin/management.less b/app/src/assets/admin/management.less
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100vh - 56px);
+  height: calc(100% - 56px);
   padding: 2rem;
 
   & > * {

diff --git a/app/src/assets/admin/menu.less b/app/src/assets/admin/menu.less
@@ -8,7 +8,7 @@
   margin: 0;
   background: hsl(var(--background));
   transition: 0.225s ease-in-out;
-  min-height: calc(100vh - 56px);
+  min-height: calc(100% - 56px);
   transition-property: width, background, box-shadow, opacity;
   border-right: 0;
   opacity: 0;
@@ -77,7 +77,7 @@
 
 .admin-content {
   flex-grow: 1;
-  height: calc(100vh - 56px);
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   touch-action: pan-y;

diff --git a/app/src/assets/common/404.less b/app/src/assets/common/404.less
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: calc(100vh - 56px);
+  height: calc(100% - 56px);
   font-size: 30px;
   color: hsl(var(--tw-content));
   gap: 12px;

diff --git a/app/src/assets/main.less b/app/src/assets/main.less
@@ -13,11 +13,11 @@
 @-moz-osx-font-smoothing: grayscale;
 @-webkit-text-size-adjust: 100%;
 
-html, body {
+html, body, #root {
   margin: 0;
   padding: 0;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   touch-action: pan-y;
@@ -139,9 +139,9 @@ strong {
 
   @media (max-width: 660px) {
     width: 100vw !important;
-    height: 100vh !important;
+    height: 100% !important;
     max-width: 100vw !important;
-    max-height: 100vh !important;
+    max-height: 100% !important;
     border-radius: 0 !important;
   }
 }
@@ -157,7 +157,7 @@ strong {
   align-items: center;
   width: 100%;
   height: max-content;
-  min-height: calc(100vh - 56px);
+  min-height: calc(100% - 56px);
   overflow: hidden;
   background: hsla(var(--background-container));
   padding: 2.5rem 5rem;

diff --git a/app/src/assets/pages/article.less b/app/src/assets/pages/article.less
@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  min-height: calc(100vh - 56px);
+  min-height: calc(100% - 56px);
   height: max-content;
 }
 

diff --git a/app/src/assets/pages/auth.less b/app/src/assets/pages/auth.less
@@ -1,6 +1,6 @@
 .auth {
   width: 100%;
-  height: calc(100vh - 56px);
+  height: calc(100% - 56px);
   overflow: hidden;
   background: hsla(var(--background-container));
 }

diff --git a/app/src/assets/pages/chat.less b/app/src/assets/pages/chat.less
@@ -159,6 +159,7 @@
     border: 1px solid hsl(var(--border));
     width: 2.5rem;
     height: 2.5rem;
+    user-select: none;
   }
 
   &.user {

diff --git a/app/src/assets/pages/generation.less b/app/src/assets/pages/generation.less
@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: calc(100vh - 56px);
+  height: calc(100% - 56px);
 
   .login-action {
     display: flex;

diff --git a/app/src/assets/pages/home.less b/app/src/assets/pages/home.less
@@ -3,7 +3,7 @@
   display: flex;
   flex-direction: row;
   width: 100%;
-  height: calc(100vh - 56px);
+  height: calc(100% - 56px);
   overflow: hidden;
 }
 
@@ -13,7 +13,7 @@
   width: 100%;
   padding: 1rem 3.5rem;
   height: max-content;
-  max-height: calc(100vh - 56px);
+  max-height: calc(100% - 56px);
   overflow: auto;
   scrollbar-width: thin;
 

diff --git a/app/src/assets/pages/sharing.less b/app/src/assets/pages/sharing.less
@@ -2,22 +2,7 @@
   position: relative;
   display: flex;
   width: 100%;
-  height: calc(100vh - 56px);
-}
-
-.loading {
-  margin: auto;
-  transform: translateY(-28px);
-  user-select: none;
-
-  .loader {
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-
-    animation: spin 1.25s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  }
+  height: calc(100% - 56px);
 }
 
 .error-container {
@@ -272,6 +257,14 @@
     padding: 1rem;
     scrollbar-width: thin;
     gap: 8px;
+
+    .message {
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .action {

diff --git a/app/src/routes/Sharing.tsx b/app/src/routes/Sharing.tsx
@@ -27,6 +27,7 @@ import { appLogo } from "@/conf/env.ts";
 import { extractMessage } from "@/utils/processor.ts";
 import { cn } from "@/components/ui/lib/utils.ts";
 import { useMobile } from "@/utils/device.ts";
+import { ScrollArea } from "@/components/ui/scroll-area.tsx";
 
 type SharingFormProps = {
   refer?: string;
@@ -124,11 +125,11 @@ function SharingForm({ refer, data }: SharingFormProps) {
         <div className={`name`}>{data.name}</div>
         <div className={`time`}>{time}</div>
       </div>
-      <div className={`body`}>
+      <ScrollArea className={`body`}>
         {data.messages.map((message, i) => (
           <MessageSegment message={message} key={i} index={i} />
         ))}
-      </div>
+      </ScrollArea>
       <div className={`action`}>
         <Button
           variant={`outline`}
@@ -169,6 +170,8 @@ function Sharing() {
   const [setup, setSetup] = useState(false);
   const [data, setData] = useState<ViewForm | null>(null);
 
+  const loading = data === null;
+
   useEffectAsync(async () => {
     if (!hash || setup) return;
 
@@ -180,9 +183,9 @@ function Sharing() {
   }, []);
 
   return (
-    <div className={`sharing-page`}>
-      {data === null ? (
-        <div className={`loading`}>
+    <div className={cn(`sharing-page`, loading && "flex flex-row items-center justify-center")}>
+      {loading ? (
+        <div className={`animate-spin select-none`}>
           <Loader2 className={`loader w-12 h-12`} />
         </div>
       ) : data.status ? (