Perf for mobile

oj-lab · Oct 2, 2023 · da54e87 · da54e87
1 parent 49ed9ae
commit da54e87
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 44 deletions.
diff --git a/src/components/ProblemTable.tsx b/src/components/ProblemTable.tsx
@@ -25,6 +25,7 @@ export interface ProblemTableProps {
   data: ProblemServiceModel.ProblemInfo[];
   showActions?: boolean;
   enableNavigation?: boolean;
+  className?: string;
 }
 
 const ProblemTable: React.FC<ProblemTableProps> = (props) => {
@@ -50,7 +51,7 @@ const ProblemTable: React.FC<ProblemTableProps> = (props) => {
   );
 
   return (
-    <Table aria-label="Problem Table">
+    <Table className={props.className} aria-label="Problem Table">
       <TableHeader
         columns={columns.filter((col) => {
           if (!props.showActions) {

diff --git a/src/layouts/LanguageMenu.tsx b/src/layouts/LanguageMenu.tsx
@@ -6,13 +6,17 @@ import { LanguageIcon } from "@heroicons/react/24/outline";
 import { changeLanguage } from "i18next";
 import { LANGUAGE_SELECTIONS } from "../i18n/i18n";
 
-const LanguageMenu: React.FC = () => {
+interface LanguageMenuProps {
+  className?: string;
+}
+
+const LanguageMenu: React.FC<LanguageMenuProps> = (props) => {
   const { t } = useTranslation();
 
   return (
     <>
       {/* Profile dropdown */}
-      <Menu as="div" className="relative">
+      <Menu as="div" className={joinClasses("relative", props.className)}>
         <Menu.Button className="flex items-center p-1.5">
           <span className="sr-only">Open user menu</span>
           <LanguageIcon className="h-5 w-5" />

diff --git a/src/layouts/userLayout/Header.tsx b/src/layouts/userLayout/Header.tsx
@@ -2,7 +2,6 @@ import { Fragment } from "react";
 import { Disclosure } from "@headlessui/react";
 import {
   Bars3Icon,
-  BellIcon,
   XMarkIcon,
   TrophyIcon,
   ListBulletIcon,
@@ -12,6 +11,7 @@ import { joinClasses } from "../../utils/common";
 import LanguageMenu from "../LanguageMenu";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { Divider } from "@nextui-org/react";
 
 const iconPath = `${import.meta.env.BASE_URL}images/oj-lab-icon.svg`;
 
@@ -108,24 +108,6 @@ export default function Header() {
           </div>
 
           <Disclosure.Panel className="sm:hidden">
-            <div className="space-y-1 pb-3 pt-2">
-              {navigation.map((item) => (
-                <Disclosure.Button
-                  key={item.name}
-                  className={joinClasses(
-                    item.current
-                      ? "border-indigo-500 bg-indigo-50 text-indigo-700"
-                      : "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800",
-                    "block cursor-pointer border-l-4 py-2 pl-3 pr-4 text-base font-medium",
-                  )}
-                  onClick={() => {
-                    navigate(item.href);
-                  }}
-                >
-                  {t(item.name)}
-                </Disclosure.Button>
-              ))}
-            </div>
             <div className="border-t border-gray-200 pb-3 pt-4">
               <div className="flex items-center px-4">
                 <div className="flex-shrink-0">
@@ -143,27 +125,41 @@ export default function Header() {
                     {user.email}
                   </div>
                 </div>
-                <button
-                  type="button"
-                  className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  <span className="sr-only">View notifications</span>
-                  <BellIcon className="h-6 w-6" aria-hidden="true" />
-                </button>
+                <LanguageMenu className="ml-auto" />
               </div>
               <div className="mt-3 space-y-1">
                 {userNavigation.map((item) => (
                   <Disclosure.Button
                     key={item.name}
-                    as="a"
-                    href={item.href}
-                    className="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    className="block cursor-pointer px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+                    onClick={() => {
+                      navigate(item.href);
+                    }}
                   >
                     {item.name}
                   </Disclosure.Button>
                 ))}
               </div>
             </div>
+            <Divider />
+            <div className="space-y-1 pb-3 pt-2">
+              {navigation.map((item) => (
+                <Disclosure.Button
+                  key={item.name}
+                  className={joinClasses(
+                    item.current
+                      ? "border-indigo-500 bg-indigo-50 text-indigo-700"
+                      : "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800",
+                    "block w-full cursor-pointer border-l-4 py-2 pl-3 pr-4 text-base font-medium",
+                  )}
+                  onClick={() => {
+                    navigate(item.href);
+                  }}
+                >
+                  {t(item.name)}
+                </Disclosure.Button>
+              ))}
+            </div>
           </Disclosure.Panel>
         </>
       )}

diff --git a/src/pages/Problem.tsx b/src/pages/Problem.tsx
@@ -29,14 +29,14 @@ const Problem: React.FC = () => {
 
   return (
     <UserLayout title={getProblem()?.title}>
-      <div className="flex">
-        <div className="w-1/2 flex-1 ">
+      <div className="flex flex-col sm:flex-row">
+        <div className="w-full flex-1 sm:w-1/2">
           <MarkdownRender
             content={getProblem()?.description || ""}
             rehypePlugin="rehypeKatex"
           />
         </div>
-        <div className="flex w-1/2 flex-col gap-4">
+        <div className="flex w-full flex-col gap-4 sm:w-1/2">
           <CodeEditor
             className="h-96 w-full overflow-hidden"
             value={defaultCode}

diff --git a/src/pages/ProblemList.tsx b/src/pages/ProblemList.tsx
@@ -8,15 +8,14 @@ const ProblemList: React.FC = () => {
 
   return (
     <UserLayout>
-      <div className="flex gap-8">
-        <div className="w-2/3">
-          <ProblemTable
-            data={getProblemInfoList()}
-            showActions={false}
-            enableNavigation
-          />
-        </div>
-        <div className="w-1/3">
+      <div className="flex w-full flex-auto flex-col gap-8 px-4 sm:flex-row">
+        <ProblemTable
+          data={getProblemInfoList()}
+          showActions={false}
+          enableNavigation
+          className="w-full sm:w-2/3"
+        />
+        <div className="w-full sm:w-1/3">
           <NewsCard />
         </div>
       </div>