From decb1ca2a38fde92188edcbc380b0fe371e593e2 Mon Sep 17 00:00:00 2001
From: Sarah Vaupel <vaupel.sarah@campus.lmu.de>
Date: Sat, 1 Feb 2020 16:20:35 +0100
Subject: [PATCH] style(exam-correct): minor style fixes and restructuring

---
 frontend/src/utils/exam-correct/exam-correct.js   | 10 ++++++----
 frontend/src/utils/exam-correct/exam-correct.sass | 11 +++++++++++
 templates/exam-correct.hamlet                     | 13 ++++++-------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/utils/exam-correct/exam-correct.js b/frontend/src/utils/exam-correct/exam-correct.js
index e3c531f4a..d802fd60a 100644
--- a/frontend/src/utils/exam-correct/exam-correct.js
+++ b/frontend/src/utils/exam-correct/exam-correct.js
@@ -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);
diff --git a/frontend/src/utils/exam-correct/exam-correct.sass b/frontend/src/utils/exam-correct/exam-correct.sass
index e971a33ae..d807ee0fc 100644
--- a/frontend/src/utils/exam-correct/exam-correct.sass
+++ b/frontend/src/utils/exam-correct/exam-correct.sass
@@ -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)
 
diff --git a/templates/exam-correct.hamlet b/templates/exam-correct.hamlet
index 22a6f0457..ede47363c 100644
--- a/templates/exam-correct.hamlet
+++ b/templates/exam-correct.hamlet
@@ -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>