feat(ui): add dark theme for editor and adjust some ui details (laike9m#24)

100gle · web-flow · commit 28cbe8e7d0e4 · 2023-11-06T21:52:14.000-08:00
* Update styles and error message format
* Add dark theme support to code mirror
* Add theme initialization to code editor.
* Rename the variable for shared CodeMirror options
diff --git a/templates/base.html b/templates/base.html
@@ -1,10 +1,16 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="light">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+    <style type="text/css">
+    /* override some style in picocss */
+    h1, h2, h3, h4, h5, h6,
+    p {
+        margin-bottom: 0;
+    }
+    </style>
     {% block head %}{% endblock %}
 </head>
 
diff --git a/templates/challenge.html b/templates/challenge.html
@@ -4,6 +4,7 @@
   {{ super() }}
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/material-darker.min.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/python/python.min.js"></script>
   <title>Python Type Challenge - {{ name }}</title>
@@ -59,6 +60,11 @@
       margin-right: 20px;
     }
 
+    .challenge-header__exerpt {
+        margin-bottom: 1.5rem;
+        line-height: 1.5;
+    }
+
     .challenge-main {
       display: flex;
       justify-content: space-between;
@@ -168,7 +174,7 @@
           <span>Challenge - {{ name }}</span>
           {%include 'components/badge.html' with context %}
         </div>
-        <p class="challenge-header__exerpt" style="margin-top: 0; line-height: 1.5">
+        <p class="challenge-header__exerpt">
         Complete code following the instructions below, so that there are no type errors
         throughout the test code except for those lines followed by a <code># expect-type-error</code> comment.
         You don't need to implement the function, just add type annotations.
@@ -194,24 +200,32 @@
   </div>
 
   <script type="text/javascript">
-    let codeMirrorShared = {
+    let initTheme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
+    let sharedCodeMirrorOptions = {
       mode: "python",
       lineWrapping: true,
       lineNumbers: true,
       indentUnit: 4,
+      theme: initTheme,
     }
     let code_under_test = {{ code_under_test | tojson }};
     let myCodeMirror = CodeMirror(document.getElementById("editor"), {
       value: code_under_test,
-      ...codeMirrorShared,
+      ...sharedCodeMirrorOptions,
     });
     let test_code = {{ test_code | tojson }};
-    CodeMirror(document.getElementById("tests"), {
+    let testCodeMirror = CodeMirror(document.getElementById("tests"), {
       value: test_code,
       readOnly: "nocursor",
-      ...codeMirrorShared,
+      ...sharedCodeMirrorOptions,
     });
 
+    window.addEventListener('themeSwitch', function (event) {
+      let theme = localStorage.getItem('theme') === 'dark' ? "material-darker" : "default"
+      myCodeMirror.setOption("theme", theme);
+      testCodeMirror.setOption("theme", theme);
+    })
+
     let runButton = document.getElementById('run-button')
     runButton.onclick = function () {
       // set button spinner
diff --git a/templates/components/darkmode.html b/templates/components/darkmode.html
@@ -54,6 +54,8 @@
                 themeSwitch.checked = true;
             }
         }
+
+        let themeSwitchEvt = new Event('themeSwitch');
         themeSwitch.addEventListener('change', function (event) {
             if (event.target.checked) {
                 document.documentElement.setAttribute('data-theme', 'dark');
@@ -62,6 +64,8 @@
                 document.documentElement.setAttribute('data-theme', 'light');
                 localStorage.setItem('theme', 'light');
             }
+            // dispatch the event used to update the code mirror theme
+            window.dispatchEvent(themeSwitchEvt);
         });
     </script>
 </div>
diff --git a/templates/index.html b/templates/index.html
@@ -13,12 +13,17 @@
       align-items: center;
       margin: 10px auto;
     }
+
+    .title {
+      text-align: center;
+      margin-bottom: 1.5rem;
+    }
   </style>
 {% endblock %}
 
 {% block content %}
   <div class="container">
-    <h1 style="text-align: center;">Welcome to Python Type Challenges!</h1>
+    <h1 class="title">Welcome to Python Type Challenges!</h1>
     {% include 'components/challenge_list.html' %}
   </div>
 {% endblock%}
diff --git a/views/views.py b/views/views.py
@@ -1,7 +1,6 @@
-import gc
 import platform
 
-from flask import Blueprint, make_response, redirect, render_template, request
+from flask import Blueprint, redirect, render_template, request
 
 from .utils import challenge_manager
 
@@ -39,6 +38,6 @@ def run_challenge(name):
     if result.passed:
         return "<h2>✅ Congratulations! You completed the challenge 🎉</h2>"
 
-    error_message = "<h2>❌ Challenge failed 😢\n\n</h2>"
-    error_message += f"\nError:\n{result.stdout}{result.stderr}\n\n"
+    error_message = "<h2>❌ Challenge failed 😢</h2>"
+    error_message += f"<p>Error:\n{result.stdout}{result.stderr}</p>"
     return error_message

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,8 @@`
`54`	`54`	`themeSwitch.checked = true;`
`55`	`55`	`}`
`56`	`56`	`}`
	`57`	`+`
	`58`	`+ let themeSwitchEvt = new Event('themeSwitch');`
`57`	`59`	`themeSwitch.addEventListener('change', function (event) {`
`58`	`60`	`if (event.target.checked) {`
`59`	`61`	`document.documentElement.setAttribute('data-theme', 'dark');`
`@@ -62,6 +64,8 @@`
`62`	`64`	`document.documentElement.setAttribute('data-theme', 'light');`
`63`	`65`	`localStorage.setItem('theme', 'light');`
`64`	`66`	`}`
	`67`	`+ // dispatch the event used to update the code mirror theme`
	`68`	`+ window.dispatchEvent(themeSwitchEvt);`
`65`	`69`	`});`
`66`	`70`	`</script>`
`67`	`71`	`</div>`