WIP revamp course

ia-toki · Aug 26, 2023 · 8351e82 · 8351e82
1 parent e0efaf1
commit 8351e82
Show file tree

Hide file tree

Showing 48 changed files with 1,048 additions and 247 deletions.
diff --git a/judgels-client/src/components/ContentWithTopbar/ContentWithTopbar.jsx b/judgels-client/src/components/ContentWithTopbar/ContentWithTopbar.jsx
@@ -3,12 +3,10 @@ import { Redirect, Switch, withRouter } from 'react-router';
 
 import { Topbar } from '../Topbar/Topbar';
 
-function ContentAndTopbar({ className, contentHeader, topbarElement, contentElement }) {
+function ContentAndTopbar({ className, topbarElement, contentElement }) {
   return (
     <div className={classNames('content-with-topbar', className)}>
-      {contentHeader}
       {topbarElement}
-      <hr />
       {contentElement}
     </div>
   );
@@ -19,7 +17,7 @@ function resolveUrl(parentPath, childPath) {
   return (parentPath + '/' + actualChildPath).replace(/\/\/+/g, '/');
 }
 
-function ContentWithTopbar({ match, location, className, contentHeader, items }) {
+function ContentWithTopbar({ match, location, className, items }) {
   const renderTopbar = () => {
     const topbarItems = items
       .filter(item => !item.disabled)
@@ -46,12 +44,10 @@ function ContentWithTopbar({ match, location, className, contentHeader, items })
     const redirect = items[0].id !== '@' && <Redirect exact from={match.url} to={resolveUrl(match.url, items[0].id)} />;
 
     return (
-      <div>
-        <Switch>
-          {redirect}
-          {components}
-        </Switch>
-      </div>
+      <Switch>
+        {redirect}
+        {components}
+      </Switch>
     );
   };
 
@@ -69,14 +65,7 @@ function ContentWithTopbar({ match, location, className, contentHeader, items })
     return currentPath.substring(match.url.length + 1, nextSlashPos);
   };
 
-  return (
-    <ContentAndTopbar
-      className={className}
-      contentHeader={contentHeader}
-      topbarElement={renderTopbar()}
-      contentElement={renderContent()}
-    />
-  );
+  return <ContentAndTopbar className={className} topbarElement={renderTopbar()} contentElement={renderContent()} />;
 }
 
 export default withRouter(ContentWithTopbar);
diff --git a/judgels-client/src/components/FullWidthPageLayout/FullWidthPageLayout.scss b/judgels-client/src/components/FullWidthPageLayout/FullWidthPageLayout.scss
@@ -1,6 +1,5 @@
 @import '../../styles/base';
 
 .layout-full-width-page {
-  max-width: 1260px;
   min-height: 100vh;
 }
diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
@@ -15,6 +15,9 @@ export function ProblemWorksheetCard({
   };
 
   const renderSubmission = () => {
+    if (!onSubmit) {
+      return null;
+    }
     return (
       <ProblemSubmissionCard
         config={submissionConfig}

diff --git a/judgels-client/src/components/Topbar/Topbar.scss b/judgels-client/src/components/Topbar/Topbar.scss
@@ -2,10 +2,5 @@
 
 .topbar {
   font-family: $accent-font;
-}
-
-@media only screen and (max-width: 600px) {
-  .topbar__item {
-    display: none;
-  }
+  margin-bottom: 10px;
 }
diff --git a/judgels-client/src/modules/api/sandalphon/lesson.js b/judgels-client/src/modules/api/sandalphon/lesson.js
@@ -1,5 +1,5 @@
 export function getLessonName(lesson, language) {
-  return lesson.titlesByLanguage[language] || lesson.titlesByLanguage[lesson.defaultLanguage];
+  return (language && lesson.titlesByLanguage[language]) || lesson.titlesByLanguage[lesson.defaultLanguage];
 }
 
 export function constructLessonName(title, alias) {

diff --git a/judgels-client/src/modules/api/sandalphon/problem.js b/judgels-client/src/modules/api/sandalphon/problem.js
@@ -4,7 +4,7 @@ export const ProblemType = {
 };
 
 export function getProblemName(problem, language) {
-  return problem.titlesByLanguage[language] || problem.titlesByLanguage[problem.defaultLanguage];
+  return (language && problem.titlesByLanguage[language]) || problem.titlesByLanguage[problem.defaultLanguage];
 }
 
 export function constructProblemName(title, alias) {

diff --git a/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx b/...-client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.jsx
@@ -1,4 +1,3 @@
-import { ChevronDown } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -34,16 +33,11 @@ class CourseChaptersSidebar extends Component {
     const activeChapterJid = chapter && chapter.jid;
 
     return (
-      <div className="course-chapters-sidebar">
-        <Link
-          className={classNames('course-chapters-sidebar__item', 'course-chapters-sidebar__title', {
-            'course-chapters-sidebar__item--selected': !activeChapterJid,
-          })}
-          to={`/courses/${course.slug}`}
-        >
-          <ChevronDown />
-          <h4>{course.name}</h4>
-        </Link>
+      <div
+        className={classNames('course-chapters-sidebar', {
+          'course-chapters-sidebar--compact': this.isInProblemPath(),
+        })}
+      >
         {courseChapters.map(courseChapter => (
           <Link
             className={classNames('course-chapters-sidebar__item', {
@@ -52,16 +46,21 @@ class CourseChaptersSidebar extends Component {
             to={`/courses/${course.slug}/chapters/${courseChapter.alias}`}
           >
             <div className="course-chapters-sidebar__item-title">
-              {courseChapter.alias}. {chaptersMap[courseChapter.chapterJid].name}
+              {courseChapter.alias}{' '}
+              {this.isInProblemPath() ? <>&nbsp;</> : <>. {chaptersMap[courseChapter.chapterJid].name}</>}
               {this.renderProgress(chapterProgressesMap[courseChapter.chapterJid])}
             </div>
-            {this.renderProgressBar(chapterProgressesMap[courseChapter.chapterJid])}
+            {!this.isInProblemPath() && this.renderProgressBar(chapterProgressesMap[courseChapter.chapterJid])}
           </Link>
         ))}
       </div>
     );
   }
 
+  isInProblemPath = () => {
+    return this.props.location.pathname.includes('/problems/');
+  };
+
   renderProgress = progress => {
     if (!progress || progress.totalProblems === 0) {
       return null;

diff --git a/...client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss b/...client/src/routes/courses/courses/single/CourseChaptersSidebar/CourseChaptersSidebar.scss
@@ -1,26 +1,42 @@
 @import '../../../../../styles/base';
 
 .course-chapters-sidebar {
+  flex-grow: 1;
+  max-width: 300px;
+  margin-top: 56px;
+  margin-right: 10px;
   font-family: $accent-font;
   background-color: inherit !important;
   box-shadow: none !important;
-  border-right: 1px solid $border-color;
+
+  transition: all 0.2s ease-in-out;
+
+  hr {
+    margin: 0 !important;
+  }
+
+  &--compact {
+    flex-grow: unset;
+  }
 }
 
 a.course-chapters-sidebar__item {
   display: block;
   padding: 10px;
+  margin-bottom: 1px;
 
   color: inherit;
   text-decoration: none;
 
   &:hover {
     color: inherit;
     background-color: $tertiary-background-color;
+    border-radius: 3px;
   }
 
   &--selected {
     background-color: $tertiary-background-color;
+    border-radius: 3px;
   }
 }
 
@@ -49,13 +65,14 @@ a.course-chapters-sidebar__item {
     }
   }
 
-  a.course-chapters-sidebar__item:hover.course-chapters-sidebar__item--selected{
+  a.course-chapters-sidebar__item:hover.course-chapters-sidebar__item--selected {
     background-color: $dark-secondary-background-color;
   }
 }
 
-@media only screen and (max-width: 780px) {
+@media only screen and (max-width: 750px) {
   .course-chapters-sidebar {
-    border-right: none;
+    max-width: none;
+    margin-top: 0;
   }
 }
diff --git a/judgels-client/src/routes/courses/courses/single/CourseOverview/CourseOverview.scss b/judgels-client/src/routes/courses/courses/single/CourseOverview/CourseOverview.scss
@@ -1,5 +1,5 @@
 .course-overview {
-  h2 {
-    margin-top: -2px;
-  }
+  flex-grow: 1;
+  max-width: 865px;
+  margin-left: 20px;
 }
diff --git a/judgels-client/src/routes/courses/courses/single/SingleCourseContentRoutes.jsx b/judgels-client/src/routes/courses/courses/single/SingleCourseContentRoutes.jsx
@@ -5,12 +5,10 @@ import CourseOverview from './CourseOverview/CourseOverview';
 
 function SingleCourseContentRoutes() {
   return (
-    <div>
-      <Switch>
-        <Route path="/courses/:courseSlug/chapters/:chapterAlias" component={MainSingleCourseChapterRoutes} />
-        <Route path="/courses/:courseSlug" component={CourseOverview} />
-      </Switch>
-    </div>
+    <Switch>
+      <Route path="/courses/:courseSlug/chapters/:chapterAlias" component={MainSingleCourseChapterRoutes} />
+      <Route path="/courses/:courseSlug" component={CourseOverview} />
+    </Switch>
   );
 }
 

diff --git a/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.jsx b/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.jsx
@@ -21,13 +21,9 @@ function SingleCourseRoutes({ match, course }) {
     <FullWidthPageLayout>
       <ScrollToTopOnMount />
       <div className="single-course-routes">
-        <div className="single-course-routes__sidebar">
-          <CourseChaptersSidebar />
-        </div>
+        <CourseChaptersSidebar />
         <hr className="single-course-routes__divider" />
-        <div className="single-course-routes__content">
-          <SingleCourseContentRoutes />
-        </div>
+        <SingleCourseContentRoutes />
       </div>
     </FullWidthPageLayout>
   );

diff --git a/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.scss b/judgels-client/src/routes/courses/courses/single/SingleCourseRoutes.scss
@@ -3,29 +3,18 @@
   width: 100%;
 }
 
-.single-course-routes__sidebar {
-  width: 300px;
-  margin-right: 25px;
-  margin-bottom: 15px;
-}
-
-.single-course-routes__content {
-  flex-grow: 1;
-  margin-left: auto;
-  max-width: 865px;
-}
-
 .single-course-routes__divider {
   width: 100%;
   display: none;
 }
 
-@media only screen and (max-width: 780px) {
+@media only screen and (max-width: 750px) {
   .single-course-routes {
     flex-direction: column-reverse;
   }
 
   .single-course-routes__sidebar {
+    max-width: none;
     width: inherit;
     margin-right: 0;
   }

diff --git a/...lient/src/routes/courses/courses/single/chapters/single/MainSingleCourseChapterRoutes.jsx b/...lient/src/routes/courses/courses/single/chapters/single/MainSingleCourseChapterRoutes.jsx
@@ -5,10 +5,10 @@ import SingleCourseChapterDataRoute from './SingleCourseChapterDataRoute';
 
 function MainSingleCourseChapterRoutes() {
   return (
-    <div>
+    <>
       <Route path="/courses/:courseSlug/chapters/:chapterAlias" component={SingleCourseChapterDataRoute} />
       <Route path="/courses/:courseSlug/chapters/:chapterAlias" component={SingleCourseChapterRoutes} />
-    </div>
+    </>
   );
 }
 

diff --git a/...ls-client/src/routes/courses/courses/single/chapters/single/SingleCourseChapterRoutes.jsx b/...ls-client/src/routes/courses/courses/single/chapters/single/SingleCourseChapterRoutes.jsx
@@ -1,66 +1,28 @@
-import { Layers, Manual, ManuallyEnteredData, Presentation } from '@blueprintjs/icons';
 import { connect } from 'react-redux';
-import { Route, withRouter } from 'react-router';
+import { Route, Switch, withRouter } from 'react-router';
 
-import ContentWithTopbar from '../../../../../../components/ContentWithTopbar/ContentWithTopbar';
 import { LoadingState } from '../../../../../../components/LoadingState/LoadingState';
 import { selectCourseChapter } from '../modules/courseChapterSelectors';
+import ChapterResourcesPage from './resources/ChapterResourcesPage/ChapterResourcesPage';
 import ChapterLessonRoutes from './lessons/ChapterLessonRoutes';
 import ChapterProblemRoutes from './problems/ChapterProblemRoutes';
 import ChapterSubmissionRoutes from './submissions/ChapterSubmissionRoutes';
 import ChapterItemSubmissionRoutes from './results/ChapterItemSubmissionRoutes';
 
-import './SingleCourseChapterRoutes.scss';
-
 function SingleCourseChapterRoutes({ chapter, match }) {
   // Optimization:
   // We wait until we get the chapter from the backend only if the current chapter is different from the persisted one.
   if (!chapter || chapter.courseSlug !== match.params.courseSlug || chapter.alias !== match.params.chapterAlias) {
     return <LoadingState large />;
   }
 
-  const topbarItems = [
-    {
-      id: 'lessons',
-      titleIcon: <Presentation />,
-      title: 'Lessons',
-      routeComponent: Route,
-      component: ChapterLessonRoutes,
-    },
-    {
-      id: 'problems',
-      titleIcon: <Manual />,
-      title: 'Problems',
-      routeComponent: Route,
-      component: ChapterProblemRoutes,
-    },
-    {
-      id: 'results',
-      titleIcon: <ManuallyEnteredData />,
-      title: 'Quiz Results',
-      routeComponent: Route,
-      component: ChapterItemSubmissionRoutes,
-    },
-    {
-      id: 'submissions',
-      titleIcon: <Layers />,
-      title: 'Submissions',
-      routeComponent: Route,
-      component: ChapterSubmissionRoutes,
-    },
-  ];
-
-  const contentWithTopbarProps = {
-    className: 'single-course-chapter-routes',
-    contentHeader: (
-      <h2>
-        {chapter.alias}. {chapter.name}
-      </h2>
-    ),
-    items: topbarItems,
-  };
-
-  return <ContentWithTopbar {...contentWithTopbarProps} />;
+  return (
+    <Switch>
+      <Route exact path={match.url} component={ChapterResourcesPage} />
+      <Route path={`${match.url}/lessons`} component={ChapterLessonRoutes} />
+      <Route path={`${match.url}/problems`} component={ChapterProblemRoutes} />
+    </Switch>
+  );
 }
 
 const mapStateToProps = state => ({

diff --git a/...s-client/src/routes/courses/courses/single/chapters/single/SingleCourseChapterRoutes.scss b/...s-client/src/routes/courses/courses/single/chapters/single/SingleCourseChapterRoutes.scss