Merge pull request #194 from ChubachiPT2024/feature/#192_modify_style…

…_classification_page Feature/#192 modify style classification page
ChubachiPT2024 · Jul 20, 2024 · f317ede · f317ede
2 parents dc09a19 + 45af469
commit f317ede
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/src/presentation/classification/components/GradeColumn.tsx b/src/presentation/classification/components/GradeColumn.tsx
@@ -12,12 +12,17 @@ export function GradeColumn({
   submissionNum,
 }: GradeColumnProps) {
   return (
-    <div className="min-w-[270px] mr-2 bg-white rounded-md p-2">
+    <div className="flex flex-col bg-white rounded-md mr-2 mb-2 p-2">
       <div className="flex justify-between border-b border-b-gray-200 mb-2">
         <h2 className="text-3xl">{title}</h2>
         <p className="text-xs self-end mb-1">合計:{submissionNum}</p>
       </div>
-      <div className="min-w-[260px] h-auto overflow-y-scroll">{children}</div>
+      <div
+        className="grow overflow-y-scroll"
+        style={{ scrollbarWidth: 'none' }}
+      >
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/src/presentation/classification/components/RankRow.tsx b/src/presentation/classification/components/RankRow.tsx
@@ -13,7 +13,7 @@ export function RankRow({ id, title, children }: RankRowProps) {
   return (
     <div
       ref={setNodeRef}
-      className="flex bg-gray-100 mb-2 min-h-[72px] w-[240px] o rounded-md"
+      className="flex bg-gray-100 mb-2 min-h-[72px] w-[240px] rounded-md"
     >
       <div className="flex items-center justify-center text-sm min-w-8 px-1.5">
         {title}

diff --git a/src/presentation/classification/components/SideMenu.tsx b/src/presentation/classification/components/SideMenu.tsx
@@ -18,12 +18,13 @@ export function SideMenu({ children, enabled, reportId }: SideMenuProps) {
         <PiFlowerDuotone color="pink" size={35} />
         <h1 className="text-3xl font-semibold ml-1">Manakan</h1>
       </header>
+      <h2 className="text-xl mb-1">未分類</h2>
       <div
         id="has-not-grade"
-        className="overflow-y-auto ml-3 pt-3 flex-grow"
+        className="overflow-y-auto pt-3 flex-grow"
+        style={{ scrollbarWidth: 'none' }}
         ref={setNodeRef}
       >
-        <h2 className="text-xl mb-4">未分類</h2>
         {children}
       </div>
       <div className="p-3">

diff --git a/src/presentation/classification/components/SubmissionCard.tsx b/src/presentation/classification/components/SubmissionCard.tsx
@@ -24,7 +24,7 @@ export function SubmissionCard({ id, item, onChange }: SubmissionCardProps) {
   return (
     <div
       ref={setNodeRef}
-      className="h-14 w-[200px] rounded-lg my-2 bg-white shadow-2xl mouse-pointer"
+      className="h-14 w-[200px] rounded-lg my-2 bg-white shadow-2xl mouse-pointer relative"
       style={style}
       {...attributes}
       {...listeners}
@@ -38,11 +38,9 @@ export function SubmissionCard({ id, item, onChange }: SubmissionCardProps) {
         </div>
       </div>
       {!isSubmitted && (
-        <div className="flex justify-end -mt-2">
-          <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
-            未提出
-          </span>
-        </div>
+        <span className="absolute right-1 bottom-1 rounded-md bg-red-50 px-1.5 py-0.5 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
+          未提出
+        </span>
       )}
     </div>
   )

diff --git a/src/presentation/pages/Classification.tsx b/src/presentation/pages/Classification.tsx
@@ -21,8 +21,6 @@ import {
   AssessmentRankOfFrontend,
 } from '../types/assessment'
 import { AssessmentClassifyCommand } from 'src/application/assessments/assessmentClassifyCommand'
-
-import { AssessmentGrade } from 'src/domain/models/assessments/assessmentGrade'
 import { BackButton } from '../common/button/BackButton'
 import Spinner from '../common/isLoading/Spinner'
 import Error from '../common/error/Error'
@@ -254,7 +252,7 @@ const Classification = () => {
             />
           </DragOverlay>
         )}
-        <div className="flex h-screen">
+        <div className="flex w-full h-full">
           <SideMenu 
             enabled={notHasAssessmentItem.length === 0}
             reportId={id}
@@ -270,8 +268,8 @@ const Classification = () => {
               )
             })}
           </SideMenu>
-          <div className="flex-1 overflow-hidden">
-            <div className="pt-3 pl-3 h-full flex flex-col">
+          <div className="flex overflow-hidden">
+            <div className="flex flex-col max-w-full max-h-full pt-3 pl-3">
               <div className="flex justify-between">
                 <div className="flex justify-between">
                   <BackButton href={`/`} />
@@ -303,7 +301,7 @@ const Classification = () => {
                   />
                 </div>
               </div>
-              <div className="flex-1 overflow-x-auto">
+              <div className="grow overflow-x-scroll">
                 <div className="flex h-full">
                   {assessmentGrades.map((grade) => (
                     <GradeColumn