Improve UX of evaluation show page

app/assets/stylesheets/components/evaluations.css.scss

@@ -33,7 +33,6 @@
     display: flex;
     align-items: center;
     white-space: nowrap;
-    padding-bottom: 5px;
 
     .name {
       flex-shrink: 0;
@@ -182,23 +181,6 @@
   }
 }
 
-.user-feedback-row {
-  display: flex;
-  justify-content: space-around;
-
-  a .done {
-    color: var(--d-on-surface-muted);
-  }
-
-  .active a {
-    background-color: var(--d-info-container);
-
-    i {
-      color: var(--d-info);
-    }
-  }
-}
-
 .evaluation-form-title {
   line-height: normal;
 }

app/assets/stylesheets/components/table.css.scss

@@ -160,3 +160,10 @@ tr.gu-mirror {
   margin-top: -6px;
   margin-bottom: -6px;
 }
+
+#evaluation-table-wrapper {
+  .table-resource .btn {
+    margin-top: -6px;
+    margin-bottom: -6px;
+  }
+}

app/assets/stylesheets/models/activities.css.scss

@@ -31,6 +31,24 @@
   .count {
     width: 130px;
   }
+
+  td.name {
+    vertical-align: middle;
+    max-width: 95px;
+  }
+
+  td.buttons{
+    vertical-align: middle;
+    text-align: right;
+    width: fit-content;
+    max-width: fit-content;
+
+    .btn {
+      margin-top: -6px;
+      margin-bottom: -6px;
+      margin-right: -12px;
+    }
+  }
 }
 
 /* stylelint-disable-next-line selector-class-pattern */

app/helpers/evaluation_helper.rb

@@ -12,4 +12,18 @@ def format_score(score, lang = nil, numeric_only = false)
       number_with_precision(score, precision: 2, strip_insignificant_zeros: true, locale: lang)
     end
   end
+
+  def feedback_title(feedback)
+    submission_status_text = if feedback.submission.blank?
+                               t 'evaluations.feedback_status.no_submission'
+                             else
+                               Submission.human_enum_name(:status, feedback.submission.status)
+                             end
+
+    if feedback.completed?
+      t 'evaluations.feedback_status.feedback_finished', status: submission_status_text
+    else
+      t 'evaluations.feedback_status.feedback_unstarted', status: submission_status_text
+    end
+  end
 end

app/views/evaluations/_feedback_status.html.erb

@@ -1,19 +1,19 @@
 <%
-  if feedback.submission.blank?
-    submission_status = "not-started"
-  elsif feedback.submission.accepted
-    submission_status = "correct"
-  else
-    submission_status = "wrong"
-  end
+  classes = "btn btn-text with-icon"
+  classes += " text-muted" if feedback.completed?
 %>
 
-<span class='feedback <%= submission_status %> <%= "active" if local_assigns[:current] == feedback %>'>
-  <%= link_to evaluation_feedback_path(evaluation, feedback), class: "btn btn-icon" do %>
-    <% if feedback.completed? %>
-      <i class="mdi mdi-comment-check-outline done" title="<%= feedback.exercise.name %>: <%= t ".submission_" + submission_status %><%= t ".feedback_finished" %>"></i>
-    <% else %>
-      <i class="mdi mdi-comment-outline" title="<%= feedback.exercise.name %>: <%= t ".submission_" + submission_status %><%= t ".feedback_unstarted" %>"></i>
-    <% end %>
+<%= link_to evaluation_feedback_path(evaluation, feedback),
+            title: feedback_title(feedback),
+            class: classes do %>
+  <% if feedback&.submission.present? %>
+    <%= submission_status_icon feedback.submission %>
+  <% else %>
+    <i class="mdi mdi-18 mdi-cancel text-muted"></i>
   <% end %>
-</span>
+  <% if feedback.completed? %>
+    <%= t "evaluations.exercises_progress_table.evaluated" %>
+  <% else %>
+    <%= t "evaluations.exercises_progress_table.evaluate" %>
+  <% end %>
+<% end %>

app/views/evaluations/_grade_status.html.erb

@@ -1,20 +1,11 @@
-<%
-  if feedback.submission.blank?
-    submission_status = "not-started"
-  elsif feedback.submission.accepted
-    submission_status = "correct"
-  else
-    submission_status = "wrong"
-  end
-%>
 <span class='feedback score-text <%= "active" if local_assigns[:current] == feedback %>'>
   <%= link_to evaluation_feedback_path(evaluation, feedback) do %>
     <% if feedback.completed? %>
-      <span title="<%= feedback.exercise.name %>: <%= t "evaluations.feedback_status.submission_" + submission_status %><%= t "evaluations.feedback_status.feedback_finished" %>">
+      <span title="<%= feedback_title(feedback) %>">
         <%= format_score feedback.score %>
       </span>
     <% else %>
-      <span class="provisional" title="<%= feedback.exercise.name %>: <%= t "evaluations.feedback_status.submission_" + submission_status %><%= t "evaluations.feedback_status.feedback_unstarted" %>">
+      <span class="provisional" title="<%= feedback_title(feedback) %>">
         <%= format_score feedback.score %>
       </span>
     <% end %>

app/views/evaluations/show.html.erb

@@ -49,7 +49,6 @@
           </ul>
           <div class="tab-content">
             <div role="tabpanel" class="tab-pane active" id="evaluation-details">
-              <p class="help-block"><%= t ".evaluation_details_info_html" %></p>
               <div id="evaluation-table-wrapper">
                 <%= render 'evaluation_table', feedbacks: @feedbacks, evaluation: @evaluation, users: @users %>
               </div>

app/views/feedbacks/_user_feedback_row.html.erb

@@ -1,6 +1,40 @@
-<% current_feedback.evaluation.evaluation_exercises.map do |ex|
-  Feedback.find_by(evaluation_user: current_feedback.evaluation_user,
-                   evaluation_exercise: ex)
-end.each do |feedback| %>
-  <%= render partial: 'evaluations/feedback_status', locals: { evaluation: feedback.evaluation, feedback: feedback, current: current_feedback } %>
-<% end %>
+<table class="table activity-table">
+  <% current_feedback.evaluation.evaluation_exercises.map do |ex|
+    Feedback.find_by(evaluation_user: current_feedback.evaluation_user,
+                     evaluation_exercise: ex)
+  end.each do |feedback| %>
+    <tr>
+      <td class="status-icon align-middle">
+        <% if feedback.submission.present? %>
+          <span title="<%= Submission.human_enum_name(:status, feedback.submission.status) %>">
+            <%= submission_status_icon feedback.submission %>
+          </span>
+        <% else %>
+          <span title="<%= t "evaluations.feedback_status.no_submission" %>">
+            <i class="mdi mdi-18 mdi-cancel text-muted"></i>
+          </span>
+        <% end %>
+      </td>
+      <td class="ellipsis-overflow name" title="<%= feedback.exercise.name %>">
+        <%= feedback.exercise.name %>
+      </td>
+      <td class="buttons">
+        <% if current_feedback == feedback%>
+          <%= t "evaluations.exercises_progress_table.evaluating" %>
+        <% else %>
+          <% classes = "btn btn-text"
+             classes += " text-muted" if feedback.completed?
+          %>
+          <%= link_to evaluation_feedback_path(feedback.evaluation, feedback),
+                      class: classes do %>
+            <% if feedback.completed? %>
+              <%= t "evaluations.exercises_progress_table.evaluated" %>
+            <% else %>
+              <%= t "evaluations.exercises_progress_table.evaluate" %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </td>
+    </tr>
+  <% end %>
+</table>

config/locales/views/evaluations/en.yml

@@ -13,7 +13,6 @@ en:
       next_incomplete_feedback: Go to the next incomplete solution
       evaluation_progress: Evaluation progress
       evaluation_details: Evaluation details
-      evaluation_details_info_html: This table gives an overview of all submissions in this evaluation.<br> The colored bar shows the status of the submission (no submission, correct or wrong) and the tick in the speech bubble if the submission has already been completed.
       progress_html: "<b>%{feedback_count} of the %{feedback_total}</b> submissions have completed feedback."
       grading_details: Grade overview
       grading_details_info_html: This table shows the grade overview for the evaluation. The total per user is the sum of the scores for the exercises.<br>If not all scores have been entered for a submission, the score is shown in gray.
@@ -65,15 +64,14 @@ en:
       deadline-help_html: "<p>The deadline is used to select the default submission you give feedback on. The last submission before this deadline is used.</p><p><b>Warning:</b> You can't change the deadline later, but you can select a different solution for individual students.</p>"
     evaluation_table:
       user: User
+      evaluate_user: "Evaluate %{user}"
     evaluation_grade_table:
       total: Total
       average: Average
     feedback_status:
-      feedback_finished: evaluation completed
-      feedback_unstarted: evaluation not yet completed
-      submission_not-started: "No submission, "
-      submission_correct: "Correct submission, "
-      submission_wrong: "Wrong submission, "
+      no_submission: No submissions
+      feedback_finished: "%{status}, feedback given, look at the feedback"
+      feedback_unstarted: "%{status}, no feedback given, evaluate this submission"
     overview:
       title: Evaluation
       explanation: A teacher reviewed your work for the "%{series}" series. They automatically picked your last submission before %{deadline}, but they might have chosen a different one manually. Keep in mind, this evaluation doesn't always include feedback on all your submissions.
@@ -99,3 +97,4 @@ en:
     exercises_progress_table:
       evaluate: Evaluate
       evaluated: Evaluated
+      evaluating: Evaluating

config/locales/views/evaluations/nl.yml

@@ -15,7 +15,6 @@ nl:
       evaluation_progress: Evaluatie voortgang
       progress_html: "<b>%{feedback_count} van de %{feedback_total}</b> oplossingen hebben afgewerkte feedback."
       evaluation_details: Detailoverzicht
-      evaluation_details_info_html: Deze tabel geeft een detailoverzicht van alle oplossingen in de evaluatie.<br> Het gekleurde streepje geeft de status van de oplossing aan (niet ingediend, correct of fout), het vinkje in de tekstballon of deze oplossing al afgewerkt is.
       grading_details: Puntenoverzicht
       grading_details_info_html: Deze tabel toont het puntenoverzicht voor deze evaluatie. Het totaal per gebruiker is de som van de punten van de oefeningen.<br>Als nog niet alle punten zijn ingegeven voor een oplossing wordt het punt in grijs getoond.
     new:
@@ -66,15 +65,14 @@ nl:
       deadline-help_html: "<p>Voor elke student zal de laatst ingediende oplossing voor deze deadline opgenomen worden in de evaluatie.</p><p><b>Let op:</b> je kan deze deadline achteraf niet meer aanpassen, maar kan voor individuele studenten steeds een andere oplossing selecteren.</p>"
     evaluation_table:
       user: Gebruiker
+      evaluate_user: "%{user} evalueren"
     evaluation_grade_table:
       total: Totaal
       average: Gemiddelde
     feedback_status:
-      feedback_finished: evaluatie afgewerkt
-      feedback_unstarted: evaluatie nog niet afgewerkt
-      submission_not-started: "Geen oplossing, "
-      submission_correct: "Juiste oplossing, "
-      submission_wrong: "Foute oplossing, "
+      no_submission: Geen oplossingen
+      feedback_finished: "%{status}, feedback gegeven, bekijk de feedback"
+      feedback_unstarted: "%{status}, geen feedback gegeven, deze oplossing evalueren"
     overview:
       title: Evaluatie
       explanation: Een lesgever heeft je werk voor de reeks "%{series}" bekeken. Dodona heeft automatisch je laatste inzending voor %{deadline} geselecteerd, maar mogelijk heeft de lesgever handmatig een andere gekozen. Houd er rekening mee dat deze evaluatie niet altijd feedback op al je oplossingen omvat.
@@ -99,3 +97,4 @@ nl:
     exercises_progress_table:
       evaluate: Evalueren
       evaluated: Geëvalueerd
+      evaluating: Aan het evalueren