ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move total points to end of cell. 

References OUT-2249

Test Plan:
- Load up a rubric, verify the total points text is aligned to the end.

Change-Id: I0d1c77c349812622a2611b316e59b09963f2afe1
Reviewed-on: https://gerrit.instructure.com/152481
Tested-by: Jenkins
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
QA-Review: Dariusz Dzien <ddzien@instructure.com>
Product-Review: Sidharth Oberoi <soberoi@instructure.com>
This commit is contained in:
Frank Murphy 2018-06-04 17:44:39 -04:00
parent afeb709b84
commit 6f7dc1456c
3 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/jsx/rubrics/Rubric.js
View File

@ -19,6 +19,7 @@ import React from 'react'
import _ from 'lodash'
import PropTypes from 'prop-types'
import Table from '@instructure/ui-elements/lib/components/Table'
import Flex, { FlexItem } from '@instructure/ui-layout/lib/components/Flex'
import I18n from 'i18n!edit_rubric'
import Criterion from './Criterion'
@ -85,8 +86,12 @@ const Rubric = ({ onAssessmentChange, rubric, rubricAssessment, rubricAssociatio
<tbody className="criterions">
{criteria}
<tr>
<td colSpan="3" className="total-points">
{hideScore || noScore ? null : total}
<td colSpan="3">
<Flex justifyItems="end">
<FlexItem>
{hideScore || noScore ? null : total}
</FlexItem>
</Flex>
</td>
</tr>
</tbody>

30
app/jsx/rubrics/__tests__/__snapshots__/Rubric.test.js.snap
View File

@ -20,7 +20,11 @@ exports[`the Rubric component hides the score total when needed 1`] = `
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<tr>
<td colSpan=\\"3\\" className=\\"total-points\\" />
<td colSpan=\\"3\\">
<Flex justifyItems=\\"end\\" as=\\"span\\" direction=\\"row\\" alignItems=\\"center\\" inline={false} visualDebug={false} wrapItems={false}>
<FlexItem as=\\"span\\" grow={false} shrink={false} />
</Flex>
</td>
</tr>
</tbody>
</Table>
@ -47,8 +51,12 @@ exports[`the Rubric component renders as expected 1`] = `
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<tr>
<td colSpan=\\"3\\" className=\\"total-points\\">
Total Points: 6.0
<td colSpan=\\"3\\">
<Flex justifyItems=\\"end\\" as=\\"span\\" direction=\\"row\\" alignItems=\\"center\\" inline={false} visualDebug={false} wrapItems={false}>
<FlexItem as=\\"span\\" grow={false} shrink={false}>
Total Points: 6.0
</FlexItem>
</Flex>
</td>
</tr>
</tbody>
@ -76,8 +84,12 @@ exports[`the Rubric component renders properly with no assessment 1`] = `
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={{...}} savedComments={{...}} customRatings={{...}} />
<tr>
<td colSpan=\\"3\\" className=\\"total-points\\">
Total Points: 11.0
<td colSpan=\\"3\\">
<Flex justifyItems=\\"end\\" as=\\"span\\" direction=\\"row\\" alignItems=\\"center\\" inline={false} visualDebug={false} wrapItems={false}>
<FlexItem as=\\"span\\" grow={false} shrink={false}>
Total Points: 11.0
</FlexItem>
</Flex>
</td>
</tr>
</tbody>
@ -105,8 +117,12 @@ exports[`the Rubric component updates the total score when an individual criteri
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={[Function]} savedComments={{...}} customRatings={{...}} />
<Criterion assessment={{...}} criterion={{...}} freeForm={false} onAssessmentChange={[Function]} savedComments={{...}} customRatings={{...}} />
<tr>
<td colSpan=\\"3\\" className=\\"total-points\\">
Total Points: 5 out of 11.0
<td colSpan=\\"3\\">
<Flex justifyItems=\\"end\\" as=\\"span\\" direction=\\"row\\" alignItems=\\"center\\" inline={false} visualDebug={false} wrapItems={false}>
<FlexItem as=\\"span\\" grow={false} shrink={false}>
Total Points: 5 out of 11.0
</FlexItem>
</Flex>
</td>
</tr>
</tbody>

4
app/stylesheets/components/_rubric.scss
View File

@ -137,7 +137,3 @@
.react-rubric .graded-points {
white-space: nowrap;
}
.react-rubric .total-points {
text-align: end;
}