Sfoglia il codice sorgente

refactor: have 1 source of truth for height

Hamir Mahal 1 anno fa
parent
commit
890ec3aaa2
2 ha cambiato i file con 14 aggiunte e 3 eliminazioni
  1. 9 2
      numbat-wasm/www/index.js
  2. 5 1
      numbat-wasm/www/main.css

+ 9 - 2
numbat-wasm/www/index.js

@@ -78,12 +78,19 @@ function interpret(input) {
   return output;
 }
 
+const parsedTerminalHeightInPixels = parseInt(
+  getComputedStyle(document.documentElement).getPropertyValue(
+    "--terminal-height"
+  ),
+  10
+);
+
 function setup() {
   $(document).ready(function() {
     var term = $('#terminal').terminal(interpret, {
         greetings: false,
         name: "terminal",
-        height: 550,
+        height: parsedTerminalHeightInPixels,
         prompt: "[[;;;prompt]>>> ]",
         checkArity: false,
         historySize: 200,
@@ -95,7 +102,7 @@ function setup() {
         }
       });
 
-    // Swap out the skeleton loader with the terminal, preventing a layout shift.
+    // Swap out the skeleton loader with the terminal to prevent layout shifting.
     document.getElementById("skeleton-loader").classList.add("hidden");
     document.getElementById("terminal").classList.remove("hidden");
 

+ 5 - 1
numbat-wasm/www/main.css

@@ -1,3 +1,7 @@
+:root {
+  --terminal-height: 550px;
+}
+
 html {
     font-family: 'Exo 2', sans-serif;
     background-color: #f7f7f7;
@@ -45,7 +49,7 @@ p.links a {
   animation: skeleton-loading 1.5s infinite;
   background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
   background-size: 200% 100%;
-  height: 550px;
+  height: var(--terminal-height);
   width: 100%;
 }
 @keyframes skeleton-loading {