Unifying appearance of points and correctness (%) in solution tables.

ReCodEx · Dec 21, 2024 · 3c8595c · 3c8595c
1 parent 59a9d24
commit 3c8595c
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 52 deletions.
diff --git a/recodex-web.spec b/recodex-web.spec
@@ -1,8 +1,8 @@
 %define name recodex-web
 %define short_name web-app
 %define version 2.14.0
-%define unmangled_version ab3f5abaad4184e3fd1b7e35d687079d898b43ca
-%define release 1
+%define unmangled_version 59a9d246506c6d8f74f5b242e3c181a1e01b0529
+%define release 2
 
 Summary: ReCodEx web-app component
 Name: %{name}

diff --git a/src/components/Assignments/SolutionsTable/Points.js b/src/components/Assignments/SolutionsTable/Points.js
@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BonusPoints from './BonusPoints.js';
 
-const Points = ({ points, maxPoints, bonusPoints }) => (
-  <span>
+const Points = ({ points, maxPoints, bonusPoints, wideFormat = false }) => (
+  <span className="text-nowrap">
     {points}
     {bonusPoints !== 0 && <BonusPoints bonus={bonusPoints} />}
-    {'/'}
+    {wideFormat ? ' / ' : '/'}
     {maxPoints}
   </span>
 );
@@ -15,6 +15,7 @@ Points.propTypes = {
   points: PropTypes.number.isRequired,
   bonusPoints: PropTypes.number.isRequired,
   maxPoints: PropTypes.number.isRequired,
+  wideFormat: PropTypes.bool,
 };
 
 export default Points;
diff --git a/src/components/Assignments/SolutionsTable/SolutionsTableRow.js b/src/components/Assignments/SolutionsTable/SolutionsTableRow.js
@@ -94,21 +94,21 @@ const SolutionsTableRow = ({
 
         <td className="text-center text-nowrap align-middle">
           {lastSubmission.evaluation ? (
-            <strong className="text-success">
+            <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
               <FormattedNumber style="percent" value={lastSubmission.evaluation.score} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           )}
         </td>
 
         <td className="text-center text-nowrap align-middle">
           {lastSubmission.evaluation ? (
-            <strong className="text-success">
+            <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
               <Points points={actualPoints} bonusPoints={bonusPoints} maxPoints={maxPoints} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           )}
         </td>
 
@@ -194,6 +194,7 @@ const SolutionsTableRow = ({
 SolutionsTableRow.propTypes = {
   id: PropTypes.string.isRequired,
   solution: PropTypes.shape({
+    isBestSolution: PropTypes.bool,
     attemptIndex: PropTypes.number.isRequired,
     note: PropTypes.any.isRequired,
     maxPoints: PropTypes.number.isRequired,

diff --git a/src/components/Solutions/PendingReviewsList/PendingReviewsList.js b/src/components/Solutions/PendingReviewsList/PendingReviewsList.js
@@ -163,23 +163,23 @@ class PendingReviewsList extends Component {
 
                               <td className="text-center text-nowrap align-middle">
                                 {solution.lastSubmission.evaluation ? (
-                                  <strong className="text-success">
+                                  <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
                                     <FormattedNumber style="percent" value={solution.lastSubmission.evaluation.score} />
-                                  </strong>
+                                  </span>
                                 ) : (
                                   <span className="text-danger">-</span>
                                 )}
                               </td>
 
                               <td className="text-center text-nowrap align-middle">
                                 {solution.lastSubmission.evaluation ? (
-                                  <strong className="text-success">
+                                  <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
                                     <Points
                                       points={solution.actualPoints}
                                       bonusPoints={solution.bonusPoints}
                                       maxPoints={solution.maxPoints}
                                     />
-                                  </strong>
+                                  </span>
                                 ) : (
                                   <span className="text-danger">-</span>
                                 )}

diff --git a/src/components/Solutions/ReviewRequestsList/ReviewRequestsList.js b/src/components/Solutions/ReviewRequestsList/ReviewRequestsList.js
@@ -133,23 +133,23 @@ class ReviewRequestsList extends Component {
 
                               <td className="text-center text-nowrap align-middle">
                                 {solution.lastSubmission.evaluation ? (
-                                  <strong className="text-success">
+                                  <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
                                     <FormattedNumber style="percent" value={solution.lastSubmission.evaluation.score} />
-                                  </strong>
+                                  </span>
                                 ) : (
                                   <span className="text-danger">-</span>
                                 )}
                               </td>
 
                               <td className="text-center text-nowrap align-middle">
                                 {solution.lastSubmission.evaluation ? (
-                                  <strong className="text-success">
+                                  <span className={`${solution.isBestSolution ? 'fw-bold' : ''}`}>
                                     <Points
                                       points={solution.actualPoints}
                                       bonusPoints={solution.bonusPoints}
                                       maxPoints={solution.maxPoints}
                                     />
-                                  </strong>
+                                  </span>
                                 ) : (
                                   <span className="text-danger">-</span>
                                 )}

diff --git a/src/components/Solutions/SolutionStatus/SolutionStatus.js b/src/components/Solutions/SolutionStatus/SolutionStatus.js
@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Table, Modal, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { Link } from 'react-router-dom';
-import classnames from 'classnames';
 import { lruMemoize } from 'reselect';
 import moment from 'moment';
 
+import Points from '../../Assignments/SolutionsTable/Points.js';
 import EditSolutionNoteForm from '../../forms/EditSolutionNoteForm';
 import Box from '../../widgets/Box';
 import DateTime from '../../widgets/DateTime';
@@ -370,15 +370,8 @@ class SolutionStatus extends Component {
                         />
                       </Explanation>
                     </th>
-                    <td
-                      className={classnames({
-                        'text-danger': actualPoints + bonusPoints <= 0,
-                        'text-success': actualPoints + bonusPoints > 0,
-                      })}>
-                      <b>
-                        {actualPoints || 0}
-                        {bonusPoints !== 0 ? (bonusPoints >= 0 ? '+' : '') + bonusPoints : ''} / {maxPoints}
-                      </b>
+                    <td>
+                      <Points points={actualPoints} bonusPoints={bonusPoints} maxPoints={maxPoints} wideFormat />
 
                       {accepted && (
                         <AcceptedIcon
@@ -485,13 +478,15 @@ class SolutionStatus extends Component {
                       )}
 
                       {review && review.closedAt && (
-                        <Link to={SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id)}>
-                          <ReviewIcon
-                            review={review}
-                            gapLeft={2}
-                            className={review.issues > 0 ? 'text-warning' : 'text-success'}
-                          />
-                        </Link>
+                        <span className="small float-end mx-2">
+                          <Link to={SOLUTION_SOURCE_CODES_URI_FACTORY(assignmentId, id)}>
+                            <ReviewIcon
+                              review={review}
+                              gapLeft={2}
+                              className={review.issues > 0 ? 'text-warning' : 'text-success'}
+                            />
+                          </Link>
+                        </span>
                       )}
 
                       {important.lastReviewed && (

diff --git a/src/containers/App/recodex.css b/src/containers/App/recodex.css
@@ -216,6 +216,11 @@ a:focus {
   border-bottom: none;
 }
 
+.card-body table.card-table.table tbody > tr > td:last-of-type
+{
+  padding-right: 0.5rem;
+}
+
 /*
  * Bootstrap Enhancements
  */

diff --git a/src/pages/AssignmentSolutions/AssignmentSolutions.js b/src/pages/AssignmentSolutions/AssignmentSolutions.js
@@ -208,13 +208,13 @@ const prepareTableColumnDescriptors = lruMemoize((loggedUserId, assignmentId, gr
         headerClassName: 'text-nowrap',
         comparator: ({ validity: v1, date: d1 }, { validity: v2, date: d2 }) =>
           (v2 === null ? -1 : v2) - (v1 === null ? -1 : v1) || d2 - d1, // values are implicitly form the best to the worst
-        cellRenderer: validity =>
+        cellRenderer: (validity, _1, _2, rowData) =>
           validity !== null ? (
-            <strong className="text-success">
+            <span className={`${rowData?.icon?.isBestSolution ? 'fw-bold' : ''}`}>
               <FormattedNumber style="percent" value={validity} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           ),
       }
     ),
@@ -230,13 +230,13 @@ const prepareTableColumnDescriptors = lruMemoize((loggedUserId, assignmentId, gr
           const points2 = p2.actualPoints === null ? 0 : p2.bonusPoints + p2.actualPoints;
           return points2 - points1 || d2 - d1;
         },
-        cellRenderer: points =>
+        cellRenderer: (points, _1, _2, rowData) =>
           points.actualPoints !== null ? (
-            <strong className="text-success">
+            <span className={`${rowData?.icon?.isBestSolution ? 'fw-bold' : ''}`}>
               <Points points={points.actualPoints} bonusPoints={points.bonusPoints} maxPoints={points.maxPoints} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           ),
       }
     ),

diff --git a/src/pages/GroupUserSolutions/GroupUserSolutions.js b/src/pages/GroupUserSolutions/GroupUserSolutions.js
@@ -146,13 +146,13 @@ const prepareTableColumnDescriptors = lruMemoize((assignments, groupId, locale,
         headerClassName: 'text-nowrap',
         comparator: ({ validity: v1, date: d1 }, { validity: v2, date: d2 }) =>
           (v2 === null ? -1 : v2) - (v1 === null ? -1 : v1) || d2 - d1, // values are implicitly form the best to the worst
-        cellRenderer: validity =>
+        cellRenderer: (validity, _1, _2, rowData) =>
           validity !== null ? (
-            <strong className="text-success">
+            <span className={`${rowData?.icon?.isBestSolution ? 'fw-bold' : ''}`}>
               <FormattedNumber style="percent" value={validity} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           ),
       }
     ),
@@ -168,13 +168,13 @@ const prepareTableColumnDescriptors = lruMemoize((assignments, groupId, locale,
           const points2 = p2.actualPoints === null ? 0 : p2.bonusPoints + p2.actualPoints;
           return points2 - points1 || d2 - d1;
         },
-        cellRenderer: points =>
+        cellRenderer: (points, _1, _2, rowData) =>
           points.actualPoints !== null ? (
-            <strong className="text-success">
+            <span className={`${rowData?.icon?.isBestSolution ? 'fw-bold' : ''}`}>
               <Points points={points.actualPoints} bonusPoints={points.bonusPoints} maxPoints={points.maxPoints} />
-            </strong>
+            </span>
           ) : (
-            <span className="text-danger">-</span>
+            <span className="text-danger">&ndash;</span>
           ),
       }
     ),