style: Adding mobile view (#240)

* style: adding mobile view * style: background when model not fooled
mlcommons · Jan 16, 2024 · fcb439f · fcb439f
1 parent 1ba67ab
commit fcb439f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/frontends/web/src/new_front/components/CreateSamples/CreateSamples/ResponseInfo.tsx b/frontends/web/src/new_front/components/CreateSamples/CreateSamples/ResponseInfo.tsx
@@ -14,7 +14,11 @@ const ResponseInfo: FC<ModelOutputType> = ({
   return (
     <>
       {!isGenerativeContext && (
-        <div className="rounded border m-3 bg-[#e9ffe8]">
+        <div
+          className={`rounded border m-3 ${
+            fooled ? "bg-[#eafce8]" : "bg-[#fce8e8]"
+          }`}
+        >
           <div className="grid grid-cols-12">
             <div className="col-span-9">
               <div id="foolModel" className="p-2 font-bold">

diff --git a/frontends/web/src/new_front/components/TaskPage/OverviewTask.tsx b/frontends/web/src/new_front/components/TaskPage/OverviewTask.tsx
@@ -11,12 +11,12 @@ const OverviewTask: FC<OverviewTaskProps> = ({ taskInstructions }) => {
   const [openTab, setOpenTab] = useState(1);
   return (
     <>
-      <div className="grid grid-cols-6 border pb-8">
+      <div className="pb-8 border md:grid md:grid-cols-6">
         <div>
-          <aside className="flex flex-col w-40 h-screen px-3 py-1 overflow-y-auto bg-white border-r rtl:border-r-0 rtl:border-l ">
-            <div className="flex flex-col justify-between flex-1 mt-6">
+          <aside className="flex px-3 py-1 mx-auto overflow-y-auto bg-white border-r md:h-screen md:w-36 rtl:border-r-0 rtl:border-l ">
+            <div className="flex flex-row justify-between flex-1 mt-6">
               <nav className="flex-1 -mx-3 space-y-3 ">
-                <ul className="flex flex-row flex-wrap" role="tablist">
+                <ul className="flex flex-col flex-wrap" role="tablist">
                   {taskInstructions &&
                     Object.keys(taskInstructions).map((key, index) => (
                       <TabOptionVertical
@@ -39,7 +39,7 @@ const OverviewTask: FC<OverviewTaskProps> = ({ taskInstructions }) => {
               key={index}
               className={`${
                 openTab === index + 1 ? "block" : "hidden"
-              } col-span-4 mt-[32px]`}
+              } col-span-5 mt-[32px] mx-10`}
             >
               <div data-color-mode="light" className="mt-4 ">
                 <MDEditor.Markdown source={taskInstructions[key]} />

diff --git a/frontends/web/src/new_front/components/TaskPage/PrincipalTaskStats.tsx b/frontends/web/src/new_front/components/TaskPage/PrincipalTaskStats.tsx
@@ -37,8 +37,8 @@ const PrincipalTaskStats: FC<PrincipalTaskStatsProps> = ({
   }, [selectedRound]);
 
   return (
-    <div className="grid grid-rows-2 pl-32">
-      <div className="grid items-center justify-end grid-cols-2 px-8 py-4">
+    <div className="pl-32 md:grid md:grid-rows-2">
+      <div className="grid items-center justify-end px-8 py-4 gap-y-8 md:grid-cols-2">
         {totalRounds !== 0 && (
           <div className="text-center ">
             <h6 className="text-3xl font-bold text-white">{selectedRound}</h6>
@@ -58,7 +58,7 @@ const PrincipalTaskStats: FC<PrincipalTaskStatsProps> = ({
           </div>
         )}
       </div>
-      <div className="grid items-center justify-end grid-cols-2 px-8 py-4">
+      <div className="grid items-center justify-end px-8 py-4 md:grid-cols-2">
         {maxScore !== 0 && (
           <div className="text-center ">
             <h6 className="text-3xl font-bold text-white">