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

View File

@ -1,5 +1,16 @@
$exam-correct--input-status-margin: 10px $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) [uw-exam-correct] input:invalid:not(.no-value)
border: 2px solid var(--color-error) border: 2px solid var(--color-error)

View File

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