change the layout of the part submit and feedback area

On wide screens, the "save answer" button and score display are to the left of
the feedback messages, so the whole thing uses less vertical space.

On narrow screens, the "save answer" button and score display are in a
row above the feedback messages.

Author: christianp

themes/default/files/resources/exam.css

@@ -1141,29 +1141,43 @@ select.multiplechoice {
 
 .part .submit-and-feedback {
     margin: 1em 0;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    display: grid;
+    grid-template: "submit messages" auto "score messages" 1fr / 10em 1fr;
+    align-items: start;
+    gap: var(--spacing);
+    padding-top: 0.5em;
+    border-top: medium solid var(--main-colour);
+}
+
+.part .submitPart {
+    grid-area: submit;
 }
 
 .part .partFeedback {
-    margin-top: 1em;
-    text-align: right;
-    border-top: 2px solid var(--background-colour);
-    padding: 0.5em 0 0 2em;
+    grid-area: score;
+}
+
+.part .partFeedback .marks .score {
+	font-weight: bold;
+}
+
+.part .partFeedback .marks .feedback-icon {
+    margin-left: 0.5em;
 }
 
 .part.answered .partFeedback {
     border-top-color: var(--main-colour);
 }
 
 .part .feedbackMessages {
-    margin-top: 1em;
-	clear: both;
-	overflow-y: auto;
-	background: none;
-	border-color: #a2d1f0;
+    clear: both;
+    overflow-y: auto;
+    background: none;
+    border-left: medium solid;
+    border-color: #a2d1f0;
     border-color: var(--main-colour);
+    grid-area: messages;
+    padding-left: var(--spacing);
 }
 .part:not(.has-feedback-messages) .feedbackMessages {
     visibility: hidden;
@@ -1174,7 +1188,6 @@ select.multiplechoice {
 }
 
 .part .feedbackMessages > summary {
-    text-align: end;
     margin-bottom: var(--spacing);
     cursor: pointer;
 }
@@ -1202,8 +1215,9 @@ select.multiplechoice {
 
 .part .feedbackMessage {
     display: grid;
-    grid-template-columns: minmax(2em,90vw) auto;
-    justify-items: end;
+    grid-template-columns: auto 1fr;
+    justify-items: start;
+    gap: 0.5em;
 }
 
 .part .feedbackMessage .message {
@@ -1237,11 +1251,17 @@ select.multiplechoice {
 	width: 9em;
 }
 
-.part .marks {
-    text-align: right;
-}
-.part .marks .score {
-	font-weight: bold;
+@media (max-width: 80em) {
+    .part .submit-and-feedback {
+        grid-template: "submit score" auto "messages messages" 1fr / auto 1fr;
+        justify-items: start;
+    }
+  
+  .part .feedbackMessages {
+    width: 100%;
+    padding-left: 0;
+    border-left: none;
+  }
 }
 
 .next-parts {

themes/default/templates/xslt/part.xslt

@@ -67,6 +67,8 @@
                     <p class="sr-only" data-bind="visible: isNotOnlyPart, text: feedback_title"></p>
                     <ol data-bind="visible: shownFeedbackMessages().length, foreach: shownFeedbackMessages">
                         <li class="feedbackMessage" data-bind="attr: {{'data-credit-change': credit_change}}">
+                            <span data-bind="visible: $parent.showFeedbackIcon, css: 'feedback-icon '+icon" aria-hidden="true"></span> 
+
                             <span class="message">
                                 <xsl:comment>ko if: format=='html'</xsl:comment>
                                     <span data-bind="dom: message"></span>
@@ -81,8 +83,6 @@
                                     <span data-bind="dom: credit_message"></span>
                                 <xsl:comment>/ko</xsl:comment>
                             </span>
-
-                            <span data-bind="visible: $parent.showFeedbackIcon, css: 'feedback-icon '+icon" aria-hidden="true"></span> 
                         </li>
                     </ol>
                 </details>