fix 🐛: sheet list style bug

NJUPT-SAST · Oct 30, 2024 · af6be0d · af6be0d
1 parent de2aa07
commit af6be0d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 18 deletions.
diff --git a/packages/competition/src/components/problems/headerContent/index.tsx b/packages/competition/src/components/problems/headerContent/index.tsx
@@ -24,8 +24,8 @@ export const HeaderContent = () => {
   }));
   const selfTest = useSelfTest();
   const submit = useSubmited();
-  const handlesubmit = debounce(submit, 300);
-  const handleself = debounce(selfTest, 300);
+  const handleSubmit = debounce(submit, 300);
+  const handleSelf = debounce(selfTest, 300);
 
   useEffect(() => {
     if (submitState == "Submitting") {
@@ -63,7 +63,7 @@ export const HeaderContent = () => {
           onClick={() => {
             startSelf();
             setSelfLoading(true);
-            handleself();
+            handleSelf();
           }}
           disabled={selfLoading}
           shadow="none"
@@ -78,7 +78,7 @@ export const HeaderContent = () => {
           onClick={() => {
             startSubmit();
             setLoading(true);
-            handlesubmit();
+            handleSubmit();
           }}
           disabled={loading}
           shadow="none"

diff --git a/packages/competition/src/components/problems/problemsSheet/problemsList/index.module.scss b/packages/competition/src/components/problems/problemsSheet/problemsList/index.module.scss
@@ -10,8 +10,7 @@
     justify-content: space-between;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    padding: 1rem 2rem 0.8rem 1.5rem;
+    padding: 0.5rem 1rem 0.4rem 0.8rem;
     box-sizing: border-box;
     position: relative;
     cursor: pointer;

diff --git a/packages/competition/src/components/problems/problemsSheet/problemsList/index.tsx b/packages/competition/src/components/problems/problemsSheet/problemsList/index.tsx
@@ -19,19 +19,41 @@ export const ProblemsList: React.FC<ProblemsListProps> = ({ handleSelect }) => {
     <div className={styles["list-container"]}>
       {problems?.map((item: Problem) => {
         return (
-          <>
-            <div
-              key={`${item.id}${item.title}`}
-              className={styles["list-item"]}
-              onClick={() => handleSelect(item.id)}
-            >
-              <div style={{ border: "1px solid #000", borderRadius: "50%", width: "1.8rem", height: "1.8rem", display: "flex", alignItems: "center", justifyContent: "center"}}>{item.index}</div>
-              <span style={{ flexGrow: "1", paddingLeft: "20px" }}>
-                {item.title}
-              </span>
-              <span style={{ whiteSpace: "nowrap" }}>Score: {item.score}</span>
+          <div
+            key={`${item.id}${item.title}`}
+            className={styles["list-item"]}
+            onClick={() => handleSelect(item.id)}
+          >
+            <div>
+              <div
+                style={{
+                  border: "1px solid #000",
+                  borderRadius: "50%",
+                  width: "1.4rem",
+                  height: "1.4rem",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "0.8rem",
+                  flexBasis: "1.4rem",
+                }}
+              >
+                {item.index}
+              </div>
             </div>
-          </>
+            <span
+              style={{
+                flexGrow: "1",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                padding: "0 1rem",
+              }}
+            >
+              {item.title}
+            </span>
+            <span style={{ whiteSpace: "nowrap" }}>本题权重: {item.score}</span>
+          </div>
         );
       })}
     </div>