diff --git a/visualizer.html b/visualizer.html index 985dd69..2af1b91 100644 --- a/visualizer.html +++ b/visualizer.html @@ -58,13 +58,14 @@ } #bottom { width:100vw; - flex-grow:1; display:flex; flex-flow: row; } #visualizer { - width:50vw; + width:100%; position:relative; + flex-flow: column; + overflow: hidden; } #show { width: 100%; @@ -72,14 +73,14 @@ position:absolute; } #editor { - flex-grow:1; - flex-basis:20vw; + width: 50%; display:flex; - flex-flow: column; } + + + #editor-text { width:100%; - flex-grow:1; } button, #fileLabel { @@ -141,9 +142,8 @@ } #codeWrapper { - flex-grow:1; - flex-basis:20vw; max-width:30em; + min-width: 25em; display:block; margin:0; position:relative; @@ -159,6 +159,8 @@ display:flex; flex-flow: column; } + + .lineNumber { color: #888; width: 2.5em; @@ -172,7 +174,13 @@ width: 100%; box-sizing: border-box; } - +.resizable { + resize: horizontal; + overflow: auto; + border: 1px solid; + display: inline-flex; + height: 96vh; +}
@@ -188,9 +196,7 @@
- - -
+
//import the knitout writer code and instantiate it as an object const knitout = require('knitout'); @@ -203,10 +209,10 @@ k.inhook(Carrier); for(var i=3;i>=0;i -= 2){ - k.tuck("-","f"+i,Carrier); + k.tuck("-","f"+i,Carrier); } for(var i=0;i<=3;i += 2){ - k.tuck("+","f"+i,Carrier); + k.tuck("+","f"+i,Carrier); } for(var i=3;i>=0;i--){ @@ -227,10 +233,10 @@ k.xfer("fs2", "b2"); for(var i=0;i<2;i++){ - k.knit("+","b0",Carrier); - k.knit("+","b2",Carrier); - k.knit("-","f3",Carrier); - k.knit("-","f1",Carrier); + k.knit("+","b0",Carrier); + k.knit("+","b2",Carrier); + k.knit("-","f3",Carrier); + k.knit("-","f1",Carrier); } k.outhook(Carrier);