fix some overflow for de

zizdlp · Sep 13, 2024 · 53114e8 · 53114e8
1 parent 8ff7f27
commit 53114e8
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 20 deletions.
diff --git a/zbook_frontend/src/app/[locale]/page.tsx b/zbook_frontend/src/app/[locale]/page.tsx
@@ -150,7 +150,7 @@ export default async function Home() {
           <div className="relative pt-10 bg-gradient-to-t from-[#96c4a5]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent background-animate text-center">
             <div className="relative z-10">
               <div className="px-6 py-16">
-                <div className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 ">
+                <div className="mx-auto max-w-[22rem] md:max-w-[40rem] font-inter text-[2rem] font-bold leading-tight md:text-6xl md:leading-[1.08] space-y-2 overflow-scroll ">
                   <h1>{t("MultiUserSection")}</h1>
                   <h1>{t("HomeSloganB")}</h1>
                 </div>
@@ -171,7 +171,7 @@ export default async function Home() {
         </MotionBounce>
       </section>
 
-      <section className=" py-20 sm:py-32 bg-gradient-to-t from-[#e3d5b1]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent">
+      <section className="py-20 sm:py-32 bg-gradient-to-t from-[#e3d5b1]  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent">
         <MotionBounce direction="y">
           <div className="my-12 px-6 md:px-0 mx-auto max-w-5xl text-center">
             <div className="w-full text-center">

diff --git a/..._frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx b/..._frontend/src/app/[locale]/workspace/[username]/(dashboards)/dashboard/@visitors/page.tsx
@@ -89,7 +89,7 @@ export default async function AdminOverviewPage({
                   <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
                     {visitors?.length ?? 0}
                   </h5>
-                  <p className="text-base font-normal text-gray-500 dark:text-gray-400">
+                  <p className="text-base font-normal text-gray-500 dark:text-gray-400 overflow-scroll">
                     {t("VisitorRegion")}
                   </p>
                 </div>

diff --git a/zbook_frontend/src/components/TimeElement.tsx b/zbook_frontend/src/components/TimeElement.tsx
@@ -44,5 +44,5 @@ export default function TimeElement({ timeInfo }: { timeInfo: string }) {
       }
     }
   }
-  return <>{convertTime(timeInfo)}</>;
+  return <span className="whitespace-nowrap">{convertTime(timeInfo)}</span>;
 }
diff --git a/zbook_frontend/src/components/charts/AreaUserChart.tsx b/zbook_frontend/src/components/charts/AreaUserChart.tsx
@@ -82,7 +82,7 @@ export default function AreaUserChart({
         <h5 className="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">
           {t("DailyUsers")}
         </h5>
-        <div className="flex space-x-2">
+        <div className="flex space-x-2 overflow-scroll">
           <EnableElement
             config_name="allow_login"
             label={t("allow_login")}

diff --git a/zbook_frontend/src/components/charts/EnableElement.tsx b/zbook_frontend/src/components/charts/EnableElement.tsx
@@ -31,7 +31,7 @@ export default function EnableElement({
                   : t("TipInviation")
             }
           >
-            <div>{label}</div>
+            <span className="whitespace-nowrap">{label}</span>
           </ToolTip>
         </Switch.Label>
         <Switch

diff --git a/zbook_frontend/src/components/elements/details/ListUserElement.tsx b/zbook_frontend/src/components/elements/details/ListUserElement.tsx
@@ -99,7 +99,11 @@ export default function ListUserElement({
             {listType == ListDataType.LIST_ADMIN_USER && (
               <ValueElement
                 tip={t("AccountVerification")}
-                content={verified ? t("Verified") : t("UnVerified")}
+                content={
+                  <span className="whitespace-nowrap">
+                    {verified ? t("Verified") : t("UnVerified")}
+                  </span>
+                }
               />
             )}
           </div>

diff --git a/zbook_frontend/src/components/home/FooterForHome.tsx b/zbook_frontend/src/components/home/FooterForHome.tsx
@@ -4,6 +4,7 @@ import { Link } from "@/navigation";
 import { getTranslations } from "next-intl/server";
 import { beian, doc_reponame, doc_username } from "@/utils/env_variable";
 import { IconType } from "react-icons/lib";
+import IconItem from "../IconComponent";
 
 const SocialLink = ({
   href,
@@ -97,29 +98,29 @@ export default async function FooterForHome() {
     {
       href: "https://discord.com/channels/1250069935594536960/1250069935594536963",
       ariaLabel: "ZBook on Discord",
-      icon: FaDiscord,
+      icon: "discord",
     },
     {
       href: "https://github.com/zizdlp/zbook",
       ariaLabel: "ZBook on GitHub",
-      icon: FaGithub,
+      icon: "github",
     },
     {
       href: "https://space.bilibili.com/1448262500",
       ariaLabel: "ZBook on Bilibili",
-      icon: FaBilibili,
+      icon: "bilibili",
     },
     {
       href: "https://www.youtube.com/channel/UC9D6VAJRoG7bD38dz8F9CSg",
       ariaLabel: "ZBook on Youtube",
-      icon: FaYoutube,
+      icon: "youtube",
     },
   ];
 
   return (
     <footer className="bg-gradient-to-b from-[#e3d5b1] pt-16  to-[#ffffff] dark:from-transparent dark:via-transparent dark:to-transparent text-slate-700 dark:text-slate-500">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-8 gap-4 gap-x-8 px-2 py-8">
+        <div className="grid grid-cols-8 gap-4 gap-x-8 px-2 py-8 overflow-scroll">
           {sections.map((section, index) => (
             <FooterSection
               key={index}
@@ -132,12 +133,18 @@ export default async function FooterForHome() {
         <div className="flex flex-col items-center border-t-[0.01rem] border-slate-400 dark:border-slate-700 py-10 sm:flex-row-reverse sm:justify-between">
           <div className="flex gap-x-6">
             {socialLinks.map(({ href, ariaLabel, icon }) => (
-              <SocialLink
-                key={href}
-                href={href}
-                ariaLabel={ariaLabel}
-                Icon={icon}
-              />
+              // <SocialLink
+              //   key={href}
+              //   href={href}
+              //   ariaLabel={ariaLabel}
+              //   Icon={icon}
+              // />
+              <Link className="group" aria-label={ariaLabel} href={href}>
+                <IconItem
+                  iconName={icon}
+                  className="h-5 w-5 fill-slate-500 group-hover:fill-slate-700"
+                />
+              </Link>
             ))}
           </div>
           {beian && (

diff --git a/zbook_frontend/src/components/wrappers/FormInputWrapper.tsx b/zbook_frontend/src/components/wrappers/FormInputWrapper.tsx
@@ -17,7 +17,7 @@ export default function FormInputWrapper({
       placeholder={placeholder}
       autoComplete="on"
       className={`p-3 rounded-md border border-slate-300 dark:border-slate-500  dark:text-slate-400 grow  dark:bg-slate-800 w-full text-sm
-      placeholder:text-slate-400/75 dark:placeholder:text-slate-500/75 placeholder:text-sm  placeholder:font-base 
+      placeholder:text-slate-400/75 dark:placeholder:text-slate-500/75 placeholder:text-sm  placeholder:font-base
          ${
            error
              ? "focus:outline-pink-400 dark:focus:outline-pink-600 outline-1"

diff --git a/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx b/zbook_frontend/src/providers/dialogs/UpdateUserDialog.tsx
@@ -163,7 +163,7 @@ export default function UpdateUserDialog() {
                 <label className="block w-full">
                   <div className="w-full cursor-pointer flex">
                     <div
-                      className=" w-32 flex items-center  justify-center text-sm font-semibold py-2 px-4 bg-sky-400 dark:bg-slate-700 text-white dark:text-slate-200 
+                      className=" flex items-center overflow-scroll justify-center text-sm font-semibold py-2 px-4 bg-sky-400 dark:bg-slate-700 text-white dark:text-slate-200 
                   rounded-full border-0 mr-4 hover:bg-sky-500 dark:hover:bg-sky-600 
                   focus:none focus:outline-sky-200 focus:rounded-full dark:focus:outline-1 dark:focus:outline-slate-700	focus:outline-dashed 
                   "