feat(client): add chapter navigation at the bottom of problem

ia-toki · Nov 5, 2023 · b69d2cf · b69d2cf
1 parent 7f24a07
commit b69d2cf
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 42 deletions.
diff --git a/...t/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx b/...t/src/components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard.jsx
diff --git a/...components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx b/...components/ProblemWorksheetCard/Programming/ProblemStatementCard/ProblemStatementCard.jsx
@@ -5,12 +5,7 @@ import { KatexText } from '../../../KatexText/KatexText';
 
 import './ProblemStatementCard.scss';
 
-export function ProblemStatementCard({
-  alias,
-  statement: { title, text },
-  limits: { timeLimit, memoryLimit },
-  showTitle = true,
-}) {
+export function ProblemStatementCard({ alias, statement: { title, text }, limits: { timeLimit, memoryLimit } }) {
   const renderTimeLimit = timeLimit => {
     if (!timeLimit) {
       return '-';
@@ -34,8 +29,8 @@ export function ProblemStatementCard({
   return (
     <ContentCard>
       <h2 className="programming-problem-statement__name">
-        {showTitle && alias ? `${alias}. ` : ''}
-        {showTitle && title}
+        {alias ? `${alias}. ` : ''}
+        {title}
       </h2>
       <HTMLTable condensed className="programming-problem-statement__limits">
         <tbody>

diff --git a/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx b/judgels-client/src/components/ProblemWorksheetCard/Programming/ProblemWorksheetCard.jsx
@@ -6,13 +6,12 @@ import './ProblemWorksheetCard.scss';
 export function ProblemWorksheetCard({
   alias,
   worksheet: { statement, limits, submissionConfig, reasonNotAllowedToSubmit },
-  showTitle,
   submissionWarning,
   gradingLanguage,
   onSubmit,
 }) {
   const renderStatement = () => {
-    return <ProblemStatementCard alias={alias} statement={statement} limits={limits} showTitle={showTitle} />;
+    return <ProblemStatementCard alias={alias} statement={statement} limits={limits} />;
   };
 
   const renderSubmission = () => {

diff --git a/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx b/.../courses/single/chapters/single/problems/single/ChapterProblemPage/ChapterProblemPage.jsx
@@ -98,7 +98,7 @@ export class ChapterProblemPage extends Component {
         </h3>
 
         {this.renderProgress()}
-        {this.renderPrevAndNextResourcePaths()}
+        {this.renderNavigation()}
       </div>
     );
   };
@@ -117,7 +117,7 @@ export class ChapterProblemPage extends Component {
     return <ChapterProblemProgressTag verdict={progress.verdict} />;
   };
 
-  renderPrevAndNextResourcePaths = () => {
+  renderNavigation = () => {
     const { course, chapter, chapters } = this.props;
     const { response } = this.state;
     if (!response) {
@@ -144,7 +144,7 @@ export class ChapterProblemPage extends Component {
 
     const { problem } = response;
     if (problem.type === ProblemType.Programming) {
-      return <ChapterProblemProgrammingPage worksheet={response} />;
+      return <ChapterProblemProgrammingPage worksheet={response} renderNavigation={this.renderNavigation} />;
     } else {
       return <ChapterProblemBundlePage worksheet={response} />;
     }

diff --git a/...courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemPage.jsx b/...courses/courses/single/chapters/single/problems/single/Programming/ChapterProblemPage.jsx
@@ -3,10 +3,10 @@ import ChapterProblemStatementRoutes from './ChapterProblemStatementRoutes';
 
 import './ChapterProblemPage.scss';
 
-export default function ChapterProblemPage({ worksheet }) {
+export default function ChapterProblemPage({ worksheet, renderNavigation }) {
   return (
     <div className="chapter-programming-problem-page">
-      <ChapterProblemStatementPage worksheet={worksheet} />
+      <ChapterProblemStatementPage worksheet={worksheet} renderNavigation={renderNavigation} />
       <ChapterProblemStatementRoutes worksheet={worksheet} />
     </div>
   );

diff --git a/...e/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx b/...e/problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.jsx
@@ -6,11 +6,11 @@ import StatementLanguageWidget from '../../../../../../../../../../components/La
 import { selectCourse } from '../../../../../../../modules/courseSelectors';
 import { selectCourseChapter } from '../../../../../modules/courseChapterSelectors';
 import { ProblemWorksheetCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemWorksheetCard';
-import { ProblemReviewCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemReviewCard/ProblemReviewCard';
+import { ProblemEditorialCard } from '../../../../../../../../../../components/ProblemWorksheetCard/Programming/ProblemEditorialCard/ProblemEditorialCard';
 
 import './ChapterProblemStatementPage.scss';
 
-function ChapterProblemStatementPage({ worksheet }) {
+function ChapterProblemStatementPage({ worksheet, renderNavigation }) {
   const renderStatementLanguageWidget = () => {
     const { defaultLanguage, languages } = worksheet;
     if (!defaultLanguage || !languages) {
@@ -32,7 +32,9 @@ function ChapterProblemStatementPage({ worksheet }) {
     if (!editorial) {
       return null;
     }
-    return <ProblemReviewCard alias={problem.alias} statement={worksheet.worksheet.statement} editorial={editorial} />;
+    return (
+      <ProblemEditorialCard alias={problem.alias} statement={worksheet.worksheet.statement} editorial={editorial} />
+    );
   };
 
   const renderStatement = () => {
@@ -42,9 +44,9 @@ function ChapterProblemStatementPage({ worksheet }) {
       return (
         <details>
           <summary>
-            <small>Problem statement</small>
+            <small>Problem</small>
           </summary>
-          <ProblemWorksheetCard alias={problem.alias} worksheet={worksheet.worksheet} showTitle={false} />
+          <ProblemWorksheetCard alias={problem.alias} worksheet={worksheet.worksheet} />
         </details>
       );
     }
@@ -55,8 +57,11 @@ function ChapterProblemStatementPage({ worksheet }) {
   return (
     <ContentCard className="chapter-programming-problem-statement-page">
       {renderStatementLanguageWidget()}
-      {renderReview()}
       {renderStatement()}
+      <div className="chapter-programming-problem-statement-page__footer">
+        {renderReview()}
+        <div className="chapter-programming-problem-statement-page__navigation">{renderNavigation()}</div>
+      </div>
     </ContentCard>
   );
 }

diff --git a/.../problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss b/.../problems/single/Programming/ChapterProblemStatementPage/ChapterProblemStatementPage.scss
@@ -10,4 +10,13 @@
   details summary > * { 
     display: inline;
   }
+
+  .chapter-programming-problem-statement-page__footer{
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .chapter-programming-problem-statement-page__navigation {
+    text-align: right;
+  }
 }