Andal.LND/frontend-app-ora-grading
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tri-fix (#49)

Browse Source 
* fix: response display to show medium size on even the content isn't big enough

* fix: don't show download button when there isn't submission files

* feat: additional default support file for image renderer
This commit is contained in:
leangseu-edx
2022-01-24 14:30:07 -05:00
committed by GitHub
parent f7341efc71
commit 46ebc899ee
8 changed files with 213 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/containers/ResponseDisplay/ResponseDisplay.scss
View File

@@ -2,7 +2,7 @@
.response-display {
padding: map-get($spacers, 0);
max-width: map-get($container-max-widths, "md");
width: map-get($container-max-widths, "md");
overflow-y: hidden;
height: fit-content;
@@ -43,4 +43,10 @@
.preview-display {
padding: map-get($spacers, 3) 0;
}
}
@include media-breakpoint-down(sm) {
.response-display {
min-width: 100vw;
}
}

88
src/containers/ResponseDisplay/SubmissionFiles.jsx
View File

@@ -27,53 +27,57 @@ export class SubmissionFiles extends React.Component {
return (
<Card className="submission-files">
{files.length ? (
<Collapsible.Advanced defaultOpen>
<Collapsible.Trigger className="submission-files-title">
<h3>{this.title}</h3>
<Collapsible.Visible whenClosed>
<Icon src={ArrowDropDown} />
</Collapsible.Visible>
<Collapsible.Visible whenOpen>
<Icon src={ArrowDropUp} />
</Collapsible.Visible>
</Collapsible.Trigger>
<Collapsible.Body className="submission-files-body">
<div className="submission-files-table">
<DataTable
columns={[
{
Header: intl.formatMessage(messages.tableNameHeader),
accessor: 'name',
Cell: FileNameCell,
},
{
Header: intl.formatMessage(messages.tableExtensionHeader),
accessor: 'name',
id: 'extension',
Cell: FileExtensionCell,
},
{
Header: intl.formatMessage(messages.tablePopoverHeader),
accessor: '',
Cell: FilePopoverCell,
},
]}
data={files}
itemCount={files.length}
>
<DataTable.Table />
</DataTable>
</div>
</Collapsible.Body>
</Collapsible.Advanced>
<>
<Collapsible.Advanced defaultOpen>
<Collapsible.Trigger className="submission-files-title">
<h3>{this.title}</h3>
<Collapsible.Visible whenClosed>
<Icon src={ArrowDropDown} />
</Collapsible.Visible>
<Collapsible.Visible whenOpen>
<Icon src={ArrowDropUp} />
</Collapsible.Visible>
</Collapsible.Trigger>
<Collapsible.Body className="submission-files-body">
<div className="submission-files-table">
<DataTable
columns={[
{
Header: intl.formatMessage(messages.tableNameHeader),
accessor: 'name',
Cell: FileNameCell,
},
{
Header: intl.formatMessage(
messages.tableExtensionHeader,
),
accessor: 'name',
id: 'extension',
Cell: FileExtensionCell,
},
{
Header: intl.formatMessage(messages.tablePopoverHeader),
accessor: '',
Cell: FilePopoverCell,
},
]}
data={files}
itemCount={files.length}
>
<DataTable.Table />
</DataTable>
</div>
</Collapsible.Body>
</Collapsible.Advanced>
<Card.Footer className="text-right">
<FileDownload files={files} />
</Card.Footer>
</>
) : (
<div className="submission-files-title no-submissions">
<h3>{this.title}</h3>
</div>
)}
<Card.Footer className="text-right">
<FileDownload files={files} />
</Card.Footer>
</Card>
);
}

50
src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap
View File

@@ -70,5 +70,55 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
}
key="fake_file_5.txt"
/>
<FileRenderer
file={
Object {
"description": "file description 6",
"downloadUrl": "/url-path/fake_file_6.gif",
"name": "fake_file_6.gif",
}
}
key="fake_file_6.gif"
/>
<FileRenderer
file={
Object {
"description": "file description 7",
"downloadUrl": "/url-path/fake_file_7.jfif",
"name": "fake_file_7.jfif",
}
}
key="fake_file_7.jfif"
/>
<FileRenderer
file={
Object {
"description": "file description 8",
"downloadUrl": "/url-path/fake_file_8.pjpeg",
"name": "fake_file_8.pjpeg",
}
}
key="fake_file_8.pjpeg"
/>
<FileRenderer
file={
Object {
"description": "file description 9",
"downloadUrl": "/url-path/fake_file_9.pjp",
"name": "fake_file_9.pjp",
}
}
key="fake_file_9.pjp"
/>
<FileRenderer
file={
Object {
"description": "file description 10",
"downloadUrl": "/url-path/fake_file_10.svg",
"name": "fake_file_10.svg",
}
}
key="fake_file_10.svg"
/>
</div>
`;

7
src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap
View File

@@ -11,13 +11,6 @@ exports[`SubmissionFiles component snapshot files does not exist 1`] = `
Submission Files (0)
</h3>
</div>
<Card.Footer
className="text-right"
>
<Connect(FileDownload)
files={Array []}
/>
</Card.Footer>
</Card>
`;