feat(client): more responsive layout in mobile

ia-toki · Sep 16, 2023 · d59f823 · d59f823
1 parent 1cbad6f
commit d59f823
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 20 deletions.
diff --git a/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx b/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx
@@ -1,3 +1,5 @@
+import { Popover, Position } from '@blueprintjs/core';
+import { ChevronDown, ChevronRight, Menu } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -15,26 +17,51 @@ import './CourseChaptersSidebar.scss';
 class CourseChaptersSidebar extends Component {
   state = {
     response: undefined,
+    isResponsivePopoverOpen: false,
   };
 
   async componentDidMount() {
     const response = await this.props.onGetChapters(this.props.course.jid);
     this.setState({ response });
   }
 
+  componentDidUpdate() {}
+
   render() {
     return (
-      <div
-        className={classNames('course-chapters-sidebar', {
-          'course-chapters-sidebar--compact': this.isInProblemPath(),
-        })}
-      >
-        {this.renderChapters()}
-      </div>
+      <>
+        <div
+          className={classNames('course-chapters-sidebar', 'course-chapters-sidebar__full', {
+            'course-chapters-sidebar--compact': this.isInProblemPath(),
+            'course-chapters-sidebar--wide': !this.isInChaptersPath(),
+          })}
+        >
+          {this.renderChapters({ showName: !this.isInProblemPath() })}
+        </div>
+
+        <div
+          className={classNames('course-chapters-sidebar', 'course-chapters-sidebar__responsive', {
+            'course-chapters-sidebar--wide': !this.isInChaptersPath(),
+          })}
+        >
+          <Popover
+            content={this.renderChapters({ showName: true })}
+            position={Position.BOTTOM_LEFT}
+            isOpen={this.state.isResponsivePopoverOpen}
+            onInteraction={this.onResponsivePopoverInteraction}
+            usePortal={false}
+          >
+            <p>
+              <Menu />
+              &nbsp;<small>Chapters Menu</small>
+            </p>
+          </Popover>
+        </div>
+      </>
     );
   }
 
-  renderChapters = () => {
+  renderChapters = ({ showName }) => {
     const { course, match, onPutCourseChapter } = this.props;
     const { response } = this.state;
     if (!course || !response) {
@@ -49,25 +76,34 @@ class CourseChaptersSidebar extends Component {
           'course-chapters-sidebar__item--selected': this.isInChapterPath(courseChapter.alias),
         })}
         to={`${match.url}/chapters/${courseChapter.alias}`}
-        onClick={() =>
+        onClick={() => {
           onPutCourseChapter({
             jid: courseChapter.chapterJid,
             name: chaptersMap[courseChapter.chapterJid].name,
             alias: courseChapter.alias,
             courseSlug: course.slug,
-          })
-        }
+          });
+
+          if (this.state.isResponsivePopoverOpen) {
+            this.onResponsiveItemClick();
+          }
+        }}
       >
         <div className="course-chapters-sidebar__item-title">
-          {courseChapter.alias} {!this.isInProblemPath() && <>. {chaptersMap[courseChapter.chapterJid].name}</>}
-          &nbsp;
+          {courseChapter.alias}{' '}
+          {showName && <>. Ini Adalah Bab yang Bernama adalah {chaptersMap[courseChapter.chapterJid].name}</>}
+          &nbsp;&nbsp;
           {this.renderProgress(chapterProgressesMap[courseChapter.chapterJid])}
         </div>
         {!this.isInProblemPath() && this.renderProgressBar(chapterProgressesMap[courseChapter.chapterJid])}
       </Link>
     ));
   };
 
+  isInChaptersPath = () => {
+    return this.props.location.pathname.includes('/chapters/');
+  };
+
   isInChapterPath = chapterAlias => {
     return (this.props.location.pathname + '/')
       .replace('//', '/')
@@ -97,6 +133,16 @@ class CourseChaptersSidebar extends Component {
     }
     return <ProgressBar num={progress.solvedProblems} denom={progress.totalProblems} />;
   };
+
+  onResponsivePopoverInteraction = state => {
+    this.setState({ isResponsivePopoverOpen: state });
+  };
+
+  onResponsiveItemClick = () => {
+    setTimeout(() => {
+      this.setState({ isResponsivePopoverOpen: false });
+    }, 200);
+  };
 }
 
 const mapStateToProps = state => ({

diff --git a/...client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss b/...client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss
@@ -8,8 +8,7 @@
   font-family: $accent-font;
   background-color: inherit !important;
   box-shadow: none !important;
-
-  transition: all 0.2s ease-in-out;
+  transition: flex-grow 0.2s ease-in-out;
 
   hr {
     margin: 0 !important;
@@ -19,6 +18,10 @@
     flex-grow: unset;
     margin-right: 10px;
   }
+
+  &__responsive {
+    display: none;
+  }
 }
 
 a.course-chapters-sidebar__item {
@@ -73,7 +76,32 @@ a.course-chapters-sidebar__item {
 
 @media only screen and (max-width: 750px) {
   .course-chapters-sidebar {
-    flex-grow: unset;
-    margin-right: 10px;
+    &__full {
+      display: none;
+    }
+
+    &__responsive {
+      display: block;
+      flex: none;
+      width: 100%;
+      max-width: unset;
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .course-chapters-sidebar--wide.course-chapters-sidebar__full {
+    display: block;
+    flex: none;
+    order: 2;
+    width: 100%;
+    max-width: unset;
+    margin-top: 20px;
+  }
+
+  .course-chapters-sidebar--wide.course-chapters-sidebar__responsive {
+    display: none;
   }
 }
diff --git a/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.scss b/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.scss
@@ -1,4 +1,5 @@
 .single-course-routes {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
 }
diff --git a/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx b/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
@@ -100,6 +100,9 @@ export class ChapterProblemPage extends Component {
     }
 
     const { progress } = response;
+    if (!progress) {
+      return null;
+    }
 
     return <ChapterProblemProgressTag verdict={progress.verdict} />;
   };

diff --git a/...ourses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.jsx b/...ourses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.jsx
@@ -32,7 +32,7 @@ export function ChapterProblemCard({ course, chapter, problem, progress, problem
       <div className="chapter-problem-card__heading">
         {problem.type === ProblemType.Programming ? <Code /> : <PanelTable />}
         <h4 data-key="name">
-          {problem.alias}. {problemName}
+          {problem.alias}. Ini Adalah Soal yang Bernama {problemName}
         </h4>
         {renderProgress()}
       </div>

diff --git a/...urses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss b/...urses/courses/single/chapters/single/resources/ChapterProblemCard/ChapterProblemCard.scss
@@ -9,15 +9,19 @@
 
   .chapter-problem-card__heading {
     display: flex;
+    gap: 10px;
   }
 
   h4 {
-    flex-grow: 1;
-    margin-left: 10px;
+    flex: 1 1;
     margin-bottom: 0;
   }
 
   .bp4-icon {
     padding-top: 1px;
   }
+
+  .bp4-tag {
+    height: 21px;
+  }
 }