after merge with development

ACCESS-NRI · Jul 14, 2023 · 4133332 · 4133332
2 parents 5cb5622 + f95f08c
commit 4133332
Show file tree

Hide file tree

Showing 6 changed files with 415 additions and 704 deletions.
diff --git a/docs/assets/run_access_cm/Cylc GUI.png b/docs/assets/run_access_cm/Cylc GUI.png
diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
@@ -633,6 +633,12 @@ pre>code {
 .note {
   font-weight: 500;
   color: var(--note);
+
+/* Gifs, videos and example images (For example the ones in 'how to run' a model */
+.example-img {
+  width: 100% !important;
+  height: auto !important;
+  border-radius: 8px;
 }
 
 /* Justified text */

diff --git a/docs/js/terminal_animation.js b/docs/js/terminal_animation.js
@@ -42,6 +42,13 @@
 */
 'use strict';
 
+function replaceTagSymbols(str) {
+    /**
+    * Replace HTML tag symbols '<' and '>' with HTML enities '&lt;' and '&gt;'
+    * for correct usage in directories, PS1, input/promp characters etc.
+    */ 
+    return str?.replace('<','&lt;').replace('>','&gt;')
+}
 
 const terminalTemplate = document.createElement('template');
 terminalTemplate.innerHTML = `
@@ -255,7 +262,7 @@ class TerminalAnimation extends HTMLElement {
         /**
         * Getter for the progressChar property
         */
-        return this.getAttribute('progressChar')?.toString() || '█';
+        return replaceTagSymbols(this.getAttribute('progressChar')?.toString()) || '█';
     }
 
     get progressPercent() {
@@ -269,7 +276,7 @@ class TerminalAnimation extends HTMLElement {
         /**
         * Getter for the cursor property
         */
-        return this.getAttribute('cursor')?.toString() || '▋';
+        return replaceTagSymbols(this.getAttribute('cursor')?.toString()) || '▋';
     }
 
     get inputChar() {
@@ -279,15 +286,15 @@ class TerminalAnimation extends HTMLElement {
         if (this.hasAttribute('PS1')) {
             return '';
         } else {
-            return this.getAttribute('inputChar')?.toString() || '$';
+            return replaceTagSymbols(this.getAttribute('inputChar')?.toString()) || '$';
         }
     }
 
     get promptChar() {
         /**
         * Getter for the promptChar property
         */
-        return this.getAttribute('promptChar')?.toString() || '>>>';
+        return replaceTagSymbols(this.getAttribute('promptChar')?.toString()) || '>>>';
     }
 
     get directory() {
@@ -297,7 +304,7 @@ class TerminalAnimation extends HTMLElement {
         if (this.hasAttribute('PS1')) {
             return '';
         } else {
-            return this.getAttribute('directory')?.toString() || '';
+            return replaceTagSymbols(this.getAttribute('directory')?.toString()) || '';
         }
     }
 
@@ -653,8 +660,8 @@ lineTemplate.innerHTML = `
         }
         
         div.terminal-line {
-            min-height: 2em;
-            line-height: 2;
+            /* min-height: 2em; */
+            line-height: 1.5em;
             display: inline;
             align-self: center;
         }
@@ -783,7 +790,7 @@ class TerminalLine extends HTMLElement {
         /**
         * Getter for the progressChar property
         */
-        return this.getAttribute('progressChar')?.toString() || this.container.progressChar;
+        return replaceTagSymbols(this.getAttribute('progressChar')?.toString()) || this.container.progressChar;
     }
 
     get progressPercent() {
@@ -797,7 +804,7 @@ class TerminalLine extends HTMLElement {
         /**
         * Getter for the cursor property
         */
-        return this.getAttribute('cursor')?.toString() || this.container.cursor;
+        return replaceTagSymbols(this.getAttribute('cursor')?.toString()) || this.container.cursor;
     }
 
     get inputChar() {
@@ -807,15 +814,15 @@ class TerminalLine extends HTMLElement {
         if (this.hasAttribute('PS1')) {
             return '';
         } else {
-            return this.getAttribute('inputChar')?.toString() || this.container.inputChar;
+            return replaceTagSymbols(this.getAttribute('inputChar')?.toString()) || this.container.inputChar;
         }
     }
 
     get promptChar() {
         /**
         * Getter for the promptChar property
         */
-        return this.getAttribute('promptChar')?.toString() || this.container.promptChar;
+        return replaceTagSymbols(this.getAttribute('promptChar')?.toString()) || this.container.promptChar;
     }
 
     get directory() {
@@ -825,7 +832,7 @@ class TerminalLine extends HTMLElement {
         if (this.hasAttribute('PS1')) {
             return '';
         } else {
-            return this.getAttribute('directory')?.toString() || this.container.directory;
+            return replaceTagSymbols(this.getAttribute('directory')?.toString()) || this.container.directory;
         }
     }