From d9264adb70a9dd87f138992acc02fafb7fa9f0bc Mon Sep 17 00:00:00 2001
From: Yam Mesicka <yammesicka@gmail.com>
Date: Sun, 24 Mar 2024 18:16:35 +0200
Subject: [PATCH] ux: Make the matrix view more user friendly (#375)

---
 .../translations/he/LC_MESSAGES/messages.po   | 29 ++++++++----
 lms/static/my.css                             | 46 +++++++++++++++++++
 lms/templates/submissions-table.html          | 12 ++---
 3 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/lms/lmsweb/translations/he/LC_MESSAGES/messages.po b/lms/lmsweb/translations/he/LC_MESSAGES/messages.po
index 0e85644b..8720def3 100644
--- a/lms/lmsweb/translations/he/LC_MESSAGES/messages.po
+++ b/lms/lmsweb/translations/he/LC_MESSAGES/messages.po
@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version:  1.0\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2024-03-23 18:51+0200\n"
+"POT-Creation-Date: 2024-03-24 16:57+0200\n"
 "PO-Revision-Date: 2024-03-23 18:59+0300\n"
 "Last-Translator: Yam Mesicka\n"
 "Language: he\n"
@@ -18,7 +18,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.14.0\n"
 
-#: lms/lmsdb/models.py:998
+#: lms/lmsdb/models.py:1004
 msgid "Fatal error"
 msgstr "כישלון חמור"
 
@@ -312,8 +312,7 @@ msgstr "חמ\"ל תרגילים"
 msgid "Name"
 msgstr "שם"
 
-#: lms/templates/status.html:13 lms/templates/submissions-table.html:38
-#: lms/templates/user.html:47
+#: lms/templates/status.html:13 lms/templates/user.html:47
 msgid "Checked"
 msgstr "נבדקו"
 
@@ -336,29 +335,39 @@ msgstr "ארכיון"
 #: lms/templates/submissions-table.html:6
 #, fuzzy
 msgid "Submissions table"
-msgstr "מצב הגשה"
+msgstr "טבלת הגשות"
 
-#: lms/templates/submissions-table.html:10 lms/templates/user.html:33
+#: lms/templates/submissions-table.html:11 lms/templates/user.html:33
 msgid "Exercise name"
 msgstr "שם תרגיל"
 
-#: lms/templates/submissions-table.html:31
+#: lms/templates/submissions-table.html:32
 msgid "By"
 msgstr "על־ידי"
 
-#: lms/templates/submissions-table.html:34 lms/templates/user.html:47
+#: lms/templates/submissions-table.html:35 lms/templates/user.html:47
 msgid "Submitted"
 msgstr "הוגש"
 
-#: lms/templates/submissions-table.html:36
+#: lms/templates/submissions-table.html:37
 #, fuzzy
 msgid "Checking..."
 msgstr "בבדיקה..."
 
-#: lms/templates/submissions-table.html:40
+#: lms/templates/submissions-table.html:39
+#, fuzzy
+msgctxt "past_tense"
+msgid "Checked"
+msgstr "נבדק"
+
+#: lms/templates/submissions-table.html:41
 msgid "Error? This is an old solution"
 msgstr "שגיאה? זהו פתרון ישן"
 
+#: lms/templates/submissions-table.html:62
+msgid "Go to detailed status view"
+msgstr "לעמוד המצב המפורט"
+
 #: lms/templates/upload.html:7
 msgid "Upload Notebooks"
 msgstr "העלאת מחברות"
diff --git a/lms/static/my.css b/lms/static/my.css
index 3e447636..c01495cf 100644
--- a/lms/static/my.css
+++ b/lms/static/my.css
@@ -650,6 +650,52 @@ code {
   display: flex;
 }
 
+#page-status table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+#page-status table th,
+#page-status table td {
+  padding: 0.75rem;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid #dee2e6;
+
+}
+
+#page-status .table thead th {
+  background-color: #e9ecef;
+  font-weight: bold;
+}
+
+#page-status table a {
+  text-decoration: none;
+  color: #333;
+}
+
+#page-status table a:hover {
+  background-color: #f8f9fa;
+}
+
+#page-status .already-checked { color: #28a745; }
+#page-status .in-the-checking { color: #ffc107; }
+#page-status .waiting-for-check { color: #6c757d; }
+#page-status .oh-no-error { color: #dc3545; }
+
+#page-status .solution-assessment {
+  font-size: 0.9em;
+  margin-block-start: 0.5rem;
+}
+
+#page-status .fa {
+  margin-inline-end: 0.2rem;
+}
+
+#page-status .waiting-for-check-cell {
+  background-color: #fde2d2;
+}
+
 .btn-outline {
   color: var(--color);
   border-color: var(--color);
diff --git a/lms/templates/submissions-table.html b/lms/templates/submissions-table.html
index 00849186..ea283e95 100644
--- a/lms/templates/submissions-table.html
+++ b/lms/templates/submissions-table.html
@@ -5,7 +5,7 @@
     <div id="status-head">
       <h1>{{ _('Submissions table') }}</h1>
       <div class="center">
-        <table class="table">
+        <table class="table text-center">
           <thead>
             <tr>
               <th scope="col">{{ _('Exercise name') }}</th>
@@ -24,7 +24,7 @@ <h1>{{ _('Submissions table') }}</h1>
               <th scope="row">{{ exercise.name | e }}</th>
               {%- for user in users %}
               {% set solution = solutions[(exercise.id, user.id)] %}
-              <td>
+              <td class="{% if solution.state == 'CREATED' %}waiting-for-check-cell{% endif %}">
                 {%- if solution.solution_id and solution.state is not none %}
                 <div class="link-to-solution">
                   <a
@@ -32,13 +32,13 @@ <h1>{{ _('Submissions table') }}</h1>
                     title="{{ solution.submission_timestamp.strftime("%Y-%m-%d") }} {{ _("By") }} {{ solution.checker }}"
                   >
                     {% if solution.state == 'CREATED' %}
-                    <i class="fa fa-check-square"></i> {{ _('Submitted') }}
+                    <i class="fa fa-envelope waiting-for-check"></i> {{ _('Submitted') }}
                     {% elif solution.state == 'IN_CHECKING' %}
-                    <i class="fa fa-spinner fa-pulse"></i> {{ _('Checking...') }}
+                    <i class="fa fa-spinner fa-pulse in-the-checking"></i> {{ _('Checking...') }}
                     {% elif solution.state == 'DONE' %}
-                    <i class="fa fa-thumbs-up"></i> {{ _('Checked') }}
+                    <i class="fa fa-check-square already-checked"></i> {{ pgettext('past_tense', 'Checked') }}
                     {% elif solution.state == 'OLD_SOLUTION' %}
-                      {{ _('Error? This is an old solution') }}
+                    <i class="fa fa-exclamation-triangle oh-no-error"></i> {{ _('Error? This is an old solution') }}
                     {% elif solution.state is none %}
                     {% endif %}
                   </a>