style(exam-correct): minor style fixes and restructuring

This commit is contained in:
Sarah Vaupel 2020-02-01 16:20:35 +01:00 committed by Gregor Kleen
parent 2667aac1a3
commit decb1ca2a3
3 changed files with 23 additions and 11 deletions

View File

@ -458,6 +458,7 @@ export class ExamCorrect {
} else {
const partCell = document.createElement('TD');
partCell.innerHTML = partResult;
partCell.classList.add('uw-exam-correct--part-cell');
cells.set(cellIndex, partCell);
}
}
@ -474,8 +475,9 @@ export class ExamCorrect {
newRow.appendChild(cell);
}
const tableBody = this._element.querySelector(`tbody:not(#${EXAM_CORRECT_INPUT_BODY_ID})`);
insertAsFirstChild(newRow, tableBody);
const tableBody = this._element.querySelector('tbody');
const inputRow = document.getElementById(EXAM_CORRECT_INPUT_BODY_ID);
tableBody && tableBody.insertBefore(newRow, inputRow ? inputRow.nextSibling : null);
}
_clearUserInput() {
@ -492,9 +494,9 @@ export class ExamCorrect {
function clearInput(inputElement) {
inputElement.value = null;
}
function insertAsFirstChild(elementToInsert, parentElement) {
/* function insertAsFirstChild(elementToInsert, parentElement) {
parentElement.insertBefore(elementToInsert, parentElement.firstChild);
}
} */
function removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);

View File

@ -1,5 +1,16 @@
$exam-correct--input-status-margin: 10px
table[uw-exam-correct]
table-layout: fixed
th.uw-exam-correct--user-cell, td.uw-exam-correct--user-cell
min-width: 200px
th.uw-exam-correct--part-cell, td.uw-exam-correct--part-cell
width: 85px
input
width: 70px
padding: 4px 8px
[uw-exam-correct] input:invalid:not(.no-value)
border: 2px solid var(--color-error)

View File

@ -7,11 +7,11 @@ $newline never
<tr .table__row .table__row--head>
<th .table__th .sortable .sorted-desc uw-exam-correct-header="date" uw-hide-column-header="date">
_{MsgExamCorrectHeadDate}
<th .table__th .sortable uw-exam-correct-header="user" uw-hide-column-header="user">
<th .table__th .sortable .uw-exam-correct--user-cell uw-exam-correct-header="user" uw-hide-column-header="user">
_{MsgExamCorrectHeadParticipant}
^{iconTooltip participantHeadTooltip Nothing True}
$forall ExamPart{examPartNumber,examPartName} <- examParts
<th .table__th .sortable uw-exam-correct-header=#{examPartNumber} uw-hide-column-header=#{examPartNumber}>
<th .table__th .sortable .uw-exam-correct--part-cell uw-exam-correct-header=#{examPartNumber} uw-hide-column-header=#{examPartNumber}>
$maybe name <- examPartName
<span .tooltip>
<span>
@ -22,17 +22,16 @@ $newline never
_{MsgExamCorrectHeadPart examPartNumber}
<th .table__th .sortable uw-exam-correct-header="status" uw-hide-column-header="status">
_{MsgExamCorrectHeadStatus}
<tbody #exam-correct__new>
<tr .table__row>
<tbody>
<tr .table__row #exam-correct__new>
<td .table__td>
<td .table__td .exam-correct--input-status>
<input #exam-correct__user type="text" autofocus minLength=1>
<input #exam-correct__user .uw-exam-correct--user-cell type="text" autofocus minLength=1>
<i #exam-correct__user-status .fas .fa-fw>
<ul #exam-correct__user-candidates>
$forall ExamPart{examPartNumber} <- examParts
<td .table__td>
<td .table__td .uw-exam-correct--part-cell>
^{ptsInput examPartNumber}
<td #exam-correct__status .table__td>
<button #exam-correct__send-btn .btn .btn-primary>
_{MsgExamCorrectButtonSend}
<tbody>