fixing some styles

TeaByte · Feb 19, 2024 · 39cc745 · 39cc745
1 parent 26011b8
commit 39cc745
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
@@ -30,8 +30,9 @@ export default function Drawer(
           class="drawer-overlay"
         >
         </label>
-        <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content gap-2">
+        <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content gap-1">
           {courses.map((course, index) => {
+            // Group of courses
             if ("courses" in course) {
               return (
                 <Collapse
@@ -40,12 +41,13 @@ export default function Drawer(
                 />
               );
             } else {
+              // Single course
               return (
                 <li key={course.slug}>
                   <a
                     title={course.title}
                     href={`/${course.slug}`}
-                    class="gray-200 hover:opacity-75 list-none bg-base-100 rounded-btn py-4"
+                    class="gray-200 hover:opacity-75 list-none bg-base-300 rounded-btn py-4"
                     style={{ order: course.order }}
                   >
                     <h3 class="text-gray-500 font-bold flex gap-1 items-center">

diff --git a/components/EditorSplit.tsx b/components/EditorSplit.tsx
@@ -6,11 +6,11 @@ export default function EditorSplit(props: { slug: string }) {
   const precode = getPreCode(props.slug);
   const testingcode = getTestingCode(props.slug);
   return (
-    <>
-      <div class="mt-2 overflow-hidden">
-        <div class="mx-2 border-[6px] border-base-300 bg-base-300 rounded-btn pb-2">
+    <div class="flex flex-col h-full">
+      <div class="mt-2 overflow-hidden h-[100%]">
+        <div class="mx-2 border-[6px] h-[100%] border-base-300 bg-base-300 rounded-btn pb-2">
           <div
-            class="h-[400px] rounded-box"
+            class="h-[100%] rounded-box"
             dir="ltr"
             id="editor"
           >
@@ -31,6 +31,6 @@ export default function EditorSplit(props: { slug: string }) {
         testingCode={testingcode}
         slug={props.slug}
       />
-    </>
+    </div>
   );
 }
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
@@ -146,8 +146,8 @@ export default function Editor(props: EditorProps) {
   }
 
   return (
-    <>
-      <div class="flex flex-col gap-2 grow overflow-hidden mt-2 mx-2">
+    <div class="mt-2 mx-2 h-[42%] mb-2">
+      <div class="flex h-full flex-col gap-2 overflow-hidden">
         <div dir="rtl" class="flex gap-2">
           <button
             class={"btn btn-info hover:bg-[#5bbcd1] grow border-0 " +
@@ -180,13 +180,16 @@ export default function Editor(props: EditorProps) {
             اختبار
           </button>
         </div>
-        <pre
-          className={" bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 grow font-bold " +
-            (isError ? "text-error" : isTestPassed ? "text-success" : "")}
-        >
-          {output}
-        </pre>
+        <div class="h-full min-h-[357px]">
+          <pre
+            style="text-wrap: wrap;"
+            className={"h-full pb-[60px] transform transition-all duration-300 ease-in-out bg-base-300 overflow-y-scroll rounded-box p-4 mb-2 font-bold " +
+              (isError ? "text-error" : isTestPassed ? "text-success" : "")}
+          >
+            {output}
+          </pre>
+        </div>
       </div>
-    </>
+    </div>
   );
 }