Move submit modal dialog error message from progress bar to alert box

In the submit modal dialog in chapters, the error message was displayed inside a progress bar. That was not a good idea since it was hard to read and the latter half of the message disappeared since it did not fit into the progress bar. The error message is now moved to a separate alert box above the progress bar.
apluslms · Jun 7, 2023 · fe697fe · fe697fe
1 parent d33e581
commit fe697fe
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/assets/js/aplus.js b/assets/js/aplus.js
@@ -366,6 +366,7 @@ $(function() {
     var defaults = {
         loader_selector: ".modal-progress",
         loader_text_selector: ".progress-bar",
+        alert_text_selector: ".modal-submit-error",
         title_selector: ".modal-title",
         content_selector: ".modal-body",
         error_message_attribute: "data-msg-error",
@@ -382,6 +383,7 @@ $(function() {
         init: function() {
             this.loader = this.element.find(this.settings.loader_selector);
             this.loaderText = this.loader.find(this.settings.loader_text_selector);
+            this.alertText = this.loader.find(this.settings.alert_text_selector);
             this.title = this.element.find(this.settings.title_selector);
             this.content = this.element.find(this.settings.content_selector);
             this.messages = {
@@ -407,6 +409,7 @@ $(function() {
         open: function(data) {
             this.title.hide();
             this.content.hide();
+            this.alertText.hide();
             this.loaderText
                 .removeClass('progress-bar-danger').addClass('active')
                 .text(data || this.messages.loading);
@@ -418,9 +421,10 @@ $(function() {
         },
 
         showError: function(data) {
-            this.loaderText
-                .removeClass('active').addClass('progress-bar-danger')
-                .text(data || this.messages.error);
+            if (data) {
+                this.alertText.text(data).show();
+            }
+            this.loaderText.removeClass('active').addClass('progress-bar-danger').text(this.messages.error);
         },
 
         showContent: function(data) {

diff --git a/locale/en/LC_MESSAGES/django.po b/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-05-30 12:30+0300\n"
+"POT-Creation-Date: 2023-06-07 08:55+0300\n"
 "PO-Revision-Date: 2021-05-27 14:47+0300\n"
 "Last-Translator: Jimmy Ihalainen <jimmy.ihalainen@aalto.fi>\n"
 "Language-Team: English<>\n"
@@ -3825,7 +3825,7 @@ msgid "TOTAL_NUMBER_OF_SUBMITTERS"
 msgstr "Total number of submitters"
 
 #: exercise/templates/exercise/_exercise_wait.html
-#: exercise/templates/exercise/exercise.html
+#: exercise/templates/exercise/exercise.html templates/base.html
 msgid "EXERCISE_ERROR_COMMUNICATION"
 msgstr ""
 "There was a problem loading the assignment. Try loading the page again "

diff --git a/locale/fi/LC_MESSAGES/django.po b/locale/fi/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-05-30 12:30+0300\n"
+"POT-Creation-Date: 2023-06-07 08:55+0300\n"
 "PO-Revision-Date: 2019-08-14 12:16+0200\n"
 "Last-Translator: Jimmy Ihalainen <jimmy.ihalainen@aalto.fi>\n"
 "Language-Team: Finnish <>\n"
@@ -3833,7 +3833,7 @@ msgid "TOTAL_NUMBER_OF_SUBMITTERS"
 msgstr "Palauttaneita opiskelijoita yhteensä"
 
 #: exercise/templates/exercise/_exercise_wait.html
-#: exercise/templates/exercise/exercise.html
+#: exercise/templates/exercise/exercise.html templates/base.html
 msgid "EXERCISE_ERROR_COMMUNICATION"
 msgstr ""
 "Tehtävän lataaminen epäonnistui. Yritä uudelleen myöhemmin. "

diff --git a/templates/base.html b/templates/base.html
@@ -249,6 +249,9 @@ <h4>{% translate "SITE" %}</h4>
 		<div class="modal-dialog modal-lg">
 			<div class="modal-content">
 				<div class="modal-progress">
+					<div class="modal-submit-error alert alert-danger" style="display:none">
+						{% translate "EXERCISE_ERROR_COMMUNICATION" %}
+					</div>
 					<div class="progress">
 						<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%"
 							data-msg-error="{% translate 'LOADING_FAILED' %}">