cleaning index page, fixing editor-open button

TeaByte · Jan 16, 2024 · a7506ae · a7506ae
1 parent e4eb812
commit a7506ae
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 37 deletions.
diff --git a/components/Courses.tsx b/components/Courses.tsx
@@ -4,13 +4,15 @@ import Collapse from "./Collapse.tsx";
 import CourseCard from "./CourseCard.tsx";
 
 export default function Courses(
-  { courses, completed }: { courses: (Course | CourseGroup)[], completed: string[] },
+  { courses, completed }: {
+    courses: (Course | CourseGroup)[];
+    completed: string[];
+  },
 ) {
-
   return (
     <>
       <h1 class="text-5xl font-bold z-10 mb-2">الاساسيات</h1>
-      <section class="flex flex-col gap-2">
+      <section class="flex flex-col gap-2 mb-4">
         {courses.map((course, index) => {
           // Group of courses
           if ("courses" in course) {
@@ -27,21 +29,14 @@ export default function Courses(
             // Single course
             return (
               <div key={course.slug}>
-                <CourseCard course={course} isDone={completed ? completed.includes(course.slug) : false} />
+                <CourseCard
+                  course={course}
+                  isDone={completed ? completed.includes(course.slug) : false}
+                />
               </div>
             );
           }
         })}
-        <div>
-          <p class="mt-3 text-2xl">نعمل على الدروس القادما...</p>
-          <a
-            href="https://github.com/TeaByte/NakhlahJS"
-            class="text-gray-500 hover:underline"
-            target="_blank"
-          >
-            هل تود المساهمه في الموقع ؟
-          </a>
-        </div>
       </section>
     </>
   );

diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
@@ -1,10 +1,13 @@
 export default function ProgressBar(props: { progress: number }) {
   const widthStyle = { width: `${props.progress}%` };
   return (
-    <div className="bg-white rounded-xl shadow-sm overflow-hidden p-1">
+    <div className="bg-base-300 rounded-xl shadow-sm overflow-hidden p-1">
       <div className="relative h-6 flex items-center justify-center">
-        <div className="absolute top-0 bottom-0 right-0 rounded-lg bg-secondary" style={widthStyle}>
-          <div className="relative text-secondary-content font-medium text-sm text-center">
+        <div
+          className="absolute top-0 bottom-0 right-0 rounded-lg bg-info"
+          style={widthStyle}
+        >
+          <div className="relative text-black font-medium text-sm text-center">
             {props.progress}%
           </div>
         </div>

diff --git a/components/ProgressPageSplit.tsx b/components/ProgressPageSplit.tsx
@@ -1,21 +1,19 @@
 import Icon from "./Icon.tsx";
 import ProgressBar from "./ProgressBar.tsx";
 
-export default function ProgressPageSplit(props: { completed: number, total: number }) {
+export default function ProgressPageSplit(
+  props: { completed: number; total: number },
+) {
   return (
     <>
-      <div className="flex gap-2">
-        <h1 className="text-2xl font-bold">مرحباً بك في</h1>
-        <Icon />
-      </div>
-      <p className="text-lg">
-        وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة
-        تمتد من الأساسيات إلى المستويات المتقدمة
-      </p>
       <h2 className="text-xl font-bold">تقدمك في إنجاز الدروس:</h2>
       <div className="flex flex-col gap-2">
-        <h1 className="text-sm">لقد تعلمت {props.completed} من أصل {props.total} درس</h1>
-        <ProgressBar progress={Math.floor((props.completed / props.total) * 100)} />
+        <h1 className="text-sm">
+          لقد أنجزت {props.completed} من أصل {props.total} درس
+        </h1>
+        <ProgressBar
+          progress={Math.floor((props.completed / props.total) * 100)}
+        />
       </div>
     </>
   );

diff --git a/routes/[...slug].tsx b/routes/[...slug].tsx
@@ -69,7 +69,7 @@ export default function CoursePage(
       </Head>
       <main>
         <div
-          class="btn btn-info bg-[#68e4ff] hover:bg-[#68e4ff] hover:opacity-75 flex items-center gap-1 md:hidden mt-2 fixed z-[999] bottom-2 right-2"
+          class="btn btn-info bg-[#68e4ff] hover:bg-[#68e4ff] flex items-center gap-1 md:hidden mt-2 fixed z-[999] bottom-2 right-2"
           id="open-editor"
         >
           <IconAppWindow />

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -59,13 +59,9 @@ export default function BlogIndexPage(
           content="وجهتك الأمثل لاكتساب مهارات جافاسكربت بسهولة وفعالية. رحلة تعليمية شيقة تمتد من الأساسيات إلى المستويات المتقدمة"
         />
       </Head>
-      <main className="flex min-w-screen-md w-[75%] pt-12 mx-auto mb-6 max-sm:flex-col-reverse">
-        <div className="max-sm:w-full w-1/2 p-4">
-          <Courses completed={completed} courses={courses} />
-        </div>
-        <div className="max-sm:w-full w-1/2 p-4 flex flex-col gap-2">
-          <ProgressPageSplit completed={completed.length} total={total} />
-        </div>
+      <main className="max-w-screen-md px-4 pt-12 mx-auto mb-6">
+        <Courses completed={completed} courses={courses} />
+        <ProgressPageSplit completed={completed.length} total={total} />
       </main>
       <Footer />
     </>

diff --git a/static/resizer.js b/static/resizer.js
@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function () {
   let isRight = true;
   const openEditorButton = document.querySelector("#open-editor");
   const pElement = openEditorButton.querySelector("p");
-  openEditorButton.addEventListener("touchend", function () {
+  openEditorButton.addEventListener("click", function () {
     if (isRight) {
       splitInstance.setSizes([100, 0]);
       isRight = false;