💻 Remove line numbers from workbooks editor (#5927)

Removes the gutter from the editors in the workbooks. I also took the freedom to make them occupy a bit more of the space, because they were too small for most of the exercises. ![image](https://github.com/user-attachments/assets/dff9d8d9-f562-4ecf-86a8-a46c54d35532)
hedyorg · Nov 9, 2024 · a145112 · a145112
1 parent ad8e8a6
commit a145112
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 7 deletions.
diff --git a/static/css/generated.full.css b/static/css/generated.full.css
@@ -347100,6 +347100,10 @@ div[class^="ace_incorrect_hedy_code"] {
     width: 3rem;
   }
 
+  .lg\:w-2\/3 {
+    width: 66.666667%;
+  }
+
   .lg\:w-2\/4 {
     width: 50%;
   }

diff --git a/static/js/appbundle.js b/static/js/appbundle.js
@@ -78871,6 +78871,7 @@ def note_with_error(value, err):
     EditorType2[EditorType2["CHEATSHEET"] = 3] = "CHEATSHEET";
     EditorType2[EditorType2["PARSONS"] = 4] = "PARSONS";
     EditorType2[EditorType2["EXAMPLE"] = 5] = "EXAMPLE";
+    EditorType2[EditorType2["WORKBOOK"] = 6] = "WORKBOOK";
   })(EditorType || (EditorType = {}));
 
   // node_modules/@codemirror/state/dist/index.js
@@ -101636,6 +101637,8 @@ def note_with_error(value, err):
         editorType = EditorType.CHEATSHEET;
       } else if ($(preview).hasClass("parsons")) {
         editorType = EditorType.PARSONS;
+      } else if ($(preview).hasClass("workbook")) {
+        editorType = EditorType.WORKBOOK;
       } else {
         editorType = EditorType.EXAMPLE;
       }
@@ -101732,6 +101735,16 @@ def note_with_error(value, err):
             theme2[".cm-scroller"] = { "overflow": "auto", "min-height": "3.5rem" };
             extensions.push(EditorView.theme(theme2));
             break;
+          case EditorType.WORKBOOK:
+            theme2["&"] = {
+              background: "#272822",
+              fontSize: "15.2px",
+              color: "white",
+              borderRadius: "4px",
+              marginRight: "5px"
+            };
+            extensions.push([EditorView.theme(theme2)]);
+            break;
           case EditorType.COMMON_MISTAKES:
             theme2["&"] = {
               background: "#272822",

diff --git a/static/js/appbundle.js.map b/static/js/appbundle.js.map
diff --git a/static/js/cm-editor.ts b/static/js/cm-editor.ts
@@ -59,6 +59,8 @@ export class HedyCodeMirrorEditorCreator implements HedyEditorCreator {
             editorType = EditorType.CHEATSHEET;
         } else if ($(preview).hasClass('parsons')) {
             editorType = EditorType.PARSONS;
+        } else if ($(preview).hasClass('workbook')){
+            editorType = EditorType.WORKBOOK
         } else {
             editorType = EditorType.EXAMPLE;
         }
@@ -169,6 +171,16 @@ export class HedyCodeMirrorEditor implements HedyEditor {
                     theme[".cm-scroller"] = { "overflow": "auto", "min-height": "3.5rem" }
                     extensions.push(EditorView.theme(theme));
                     break;
+                case EditorType.WORKBOOK:
+                    theme["&"] = {
+                        background: '#272822',
+                        fontSize: '15.2px',
+                        color: 'white',
+                        borderRadius: '4px',
+                        marginRight: '5px'
+                    }
+                    extensions.push([EditorView.theme(theme)])
+                    break;
                 case EditorType.COMMON_MISTAKES: 
                     theme["&"] = {
                         background: '#272822',

diff --git a/static/js/editor.ts b/static/js/editor.ts
@@ -6,7 +6,8 @@ export enum EditorType {
   COMMON_MISTAKES,
   CHEATSHEET,
   PARSONS,
-  EXAMPLE
+  EXAMPLE,
+  WORKBOOK
 }
 
 type EditorEventEmitter = EventEmitter<EditorEvent>;

diff --git a/templates/workbooks.html b/templates/workbooks.html
@@ -16,10 +16,10 @@
                 {% for exercise in workbook.exercises %}
                     {% if exercise.contents %}
                         <p>{{ exercise.contents|commonmark }}</p>
-                        <!-- contents kan ook nog een code blok hebben --!>
+                        <!-- contents kan ook nog een code blok hebben -->
                         {% if exercise.code %}
                             <div class="w-full lg:w-1/2 turn-pre-into-ace my-5">
-                                <pre class="common-mistakes" level="{{ workbook.level }}" style="font-size: 0.95em;">{{ exercise.code }}</pre>
+                                <pre class="workbook" level="{{ workbook.level }}" style="font-size: 0.95em;">{{ exercise.code }}</pre>
                             </div>
                         {% endif %}
 
@@ -33,8 +33,8 @@ <h4 id="{{exercise.title|slugify}}">{{ exercise.icon}} {{ exercise.title }}</h4>
                                 <tr>
                                      <td width='5000px'>
                                         {% if exercise.code %}
-                                        <div class="w-full lg:w-1/2 turn-pre-into-ace my-5">
-                                            <pre class="common-mistakes" level="{{ workbook.level }}" style="font-size: 0.95em;">{{ exercise.code }}</pre>
+                                        <div class="w-full lg:w-2/3 turn-pre-into-ace my-5">
+                                            <pre class="workbook" level="{{ workbook.level }}" style="font-size: 0.95em;">{{ exercise.code }}</pre>
                                         </div>
                                         {% endif %}
                                     </td>