Resize editor when showing warning or error; add X to close warning o…

…r error.
oscarkarnalim · Feb 11, 2021 · c85ad11 · c85ad11
1 parent e384a75
commit c85ad11
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/static/css/generated.css b/static/css/generated.css
diff --git a/static/js/app.js b/static/js/app.js
@@ -6,7 +6,8 @@
 
   // *** EDITOR SETUP ***
 
-  var editor = ace.edit("editor");
+  // We expose the editor globally so it's available to other functions for resizing
+  var editor = window.editor = ace.edit("editor");
   editor.setTheme("ace/theme/monokai");
   // editor.session.setMode("ace/mode/javascript");
 
@@ -287,18 +288,21 @@ var error = {
   hide() {
     $('#errorbox').hide();
     $('#warningbox').hide();
+    editor.resize ();
   },
 
   showWarning(caption, message) {
     $('#warningbox .caption').text(caption);
     $('#warningbox .details').text(message);
     $('#warningbox').show();
+    editor.resize ();
   },
 
   show(caption, message) {
     $('#errorbox .caption').text(caption);
     $('#errorbox .details').text(message);
     $('#errorbox').show();
+    editor.resize ();
   }
 };
 

diff --git a/tailwind/styles.css b/tailwind/styles.css
@@ -187,3 +187,17 @@ table.users td {
 .bg-gray-400 {
   background-color: #cbd5e0;
 }
+
+/* EDITOR WARNINGS & ERRORS */
+
+div#errorbox, div#warningbox {
+   position: relative;
+}
+
+p.close-dialog {
+   font-weight: bold;
+   position: absolute;
+   top: 5px;
+   right: 5px;
+   cursor: pointer;
+}
diff --git a/templates/code-page.html b/templates/code-page.html
@@ -36,6 +36,7 @@ <h2 class="mt-4">{{assignment_header}}</h2>
         <!-- errorbox -->
         <div id="errorbox" class="flex-0 mt-0 bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md"
           role="alert" style="display: none;">
+          <p class="close-dialog" onclick="$ ('#errorbox').hide ()">X</p>
           <div class="flex">
             <div class="py-1">
               <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -51,6 +52,7 @@ <h2 class="mt-4">{{assignment_header}}</h2>
         <!-- warningbox -->
         <div id="warningbox" class="flex-0 mt-0 bg-yellow-100 border-t-4 border-yellow-500 rounded-b text-yellow-900 px-4 py-3 shadow-md"
           role="alert" style="display: none;">
+          <p class="close-dialog" onclick="$ ('#warningbox').hide ()">X</p>
           <div class="flex">
             <div class="py-1">
               <svg class="fill-current h-6 w-6 text-yellow-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">