Merge pull request #22407 from code-dot-org/assessments-styles

Assessments: style overview table
code-dot-org · May 15, 2018 · b88af2d · b88af2d
2 parents 42d9db1 + c48f1c2
commit b88af2d
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 25 deletions.
diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceAnswerCell.jsx
@@ -5,26 +5,18 @@ import FontAwesome from '@cdo/apps/templates/FontAwesome';
 const styles = {
   main: {
     border: 'none',
-    marginTop: 20,
-    marginRight: 80,
-    paddingTop: 20,
-    paddingLeft: 20,
-    paddingRight: 10,
-    paddingBottom: 10,
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   icon: {
     color: color.level_perfect,
-    float: 'left',
-    width: 20,
   },
   text: {
     color: color.charcoal,
     fontFamily: '"Gotham 5r", sans-serif',
-    fontSize: 16,
-    float: 'left',
-    paddingRight: 40,
-    width: 20,
-    textAlign: 'center',
+    marginRight: 10,
   },
 };
 
@@ -37,16 +29,16 @@ class MultipleChoiceAnswerCell extends Component {
   render() {
     const {percentValue, isCorrectAnswer} = this.props;
     return (
-      <div>
-        <div>
+      <div style={styles.main}>
+        <div style={styles.text}>
           {(percentValue >= 0) &&
             <span>{`${percentValue}%`}</span>
           }
           {(percentValue < 0 ) &&
             <span>{'-'}</span>
           }
         </div>
-        <div>
+        <div style={styles.icon}>
           {isCorrectAnswer &&
              <FontAwesome icon="check-circle" style={styles.icon}/>
           }

diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceOverviewTable.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceOverviewTable.jsx
@@ -5,11 +5,30 @@ import commonMsg from '@cdo/locale';
 import wrappedSortable from '../tables/wrapped_sortable';
 import orderBy from 'lodash/orderBy';
 import MultipleChoiceAnswerCell from './MultipleChoiceAnswerCell';
+import styleConstants from "@cdo/apps/styleConstants";
 
 export const COLUMNS = {
   QUESTION: 0,
 };
 
+const ANSWER_COLUMN_WIDTH = 70;
+const PADDING = 20;
+
+const styles = {
+  answerColumnHeader: {
+    width: ANSWER_COLUMN_WIDTH,
+    textAlign: 'center',
+  },
+  answerColumnCell: {
+    width: ANSWER_COLUMN_WIDTH,
+  },
+  questionCell: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  }
+};
+
 const NOT_ANSWERED = 'notAnswered';
 
 const calculateNotAnswered = (multipleChoiceDataArr) => {
@@ -87,7 +106,12 @@ class MultipleChoiceOverviewTable extends Component {
       property: NOT_ANSWERED,
       header: {
         label: commonMsg.notAnswered(),
-        props: {style: tableLayoutStyles.headerCell},
+        props: {
+          style: {
+            ...tableLayoutStyles.headerCell,
+            ...styles.answerColumnHeader,
+          }
+        },
       },
       cell: {
         format: answerColumnsFormatter,
@@ -101,16 +125,26 @@ class MultipleChoiceOverviewTable extends Component {
       property: 'percentAnswered',
       header: {
         label: columnLabel,
-        props: {style: tableLayoutStyles.headerCell},
+        props: {
+          style: {
+            ...tableLayoutStyles.headerCell,
+            ...styles.answerColumnHeader,
+          }
+        },
       },
       cell: {
         format: answerColumnsFormatter,
-        props: {style: tableLayoutStyles.cell},
+        props: {
+          style: {
+            ...tableLayoutStyles.cell,
+            ...styles.answerColumnCell,
+          }
+        },
       }
     }
   );
 
-  getQuestionColumn = (sortable) => (
+  getQuestionColumn = (sortable, numAnswers) => (
     {
       property: 'question',
       header: {
@@ -119,7 +153,13 @@ class MultipleChoiceOverviewTable extends Component {
         transforms: [sortable],
       },
       cell: {
-        props: {style: tableLayoutStyles.cell},
+        props: {
+          style: {
+            ...tableLayoutStyles.cell,
+            ...styles.questionCell,
+            maxWidth: styleConstants['content-width'] - (numAnswers * (ANSWER_COLUMN_WIDTH + PADDING)),
+          }
+        },
       }
     }
   );
@@ -129,12 +169,13 @@ class MultipleChoiceOverviewTable extends Component {
       question1.answers.length - question2.answers.length
     )).pop();
 
-    let columnLabelNames = maxOptionsQuestion.answers.map((answer) => {
+    const columnLabelNames = maxOptionsQuestion.answers.map((answer) => {
       return this.getAnswerColumn(answer.multipleChoiceOption);
     });
 
+    const numAnswerColumns = columnLabelNames.length + 1;
     return [
-      this.getQuestionColumn(sortable),
+      this.getQuestionColumn(sortable, numAnswerColumns),
       ...columnLabelNames,
       this.getNotAnsweredColumn(),
     ];

diff --git a/apps/src/templates/sectionAssessments/MultipleChoiceOverviewTable.story.jsx b/apps/src/templates/sectionAssessments/MultipleChoiceOverviewTable.story.jsx
@@ -52,13 +52,27 @@ export default storybook => {
     .storiesOf('SectionAssessments/MultipleChoiceOverviewTable', module)
     .addStoryTable([
       {
-        name: 'Table for assessments',
-        description: 'Ability to see assessment overview for the entire class',
+        name: 'Assessment multiple choice with 7 answers',
+        description: 'Ability to see assessment overview for a section',
         story: () => (
             <MultipleChoiceOverviewTable
               questionAnswerData={multipleChoiceData}
             />
         )
       },
+      {
+        name: 'Assessment multiple choice with 3 answers',
+        description: 'Ability to see assessment overview for a section',
+        story: () => (
+            <MultipleChoiceOverviewTable
+              questionAnswerData={multipleChoiceData.map(question => {
+                return {
+                  ...question,
+                  answers: question.answers.slice(0,2),
+                };
+              })}
+            />
+        )
+      },
     ]);
 };