public: support split view

Author: changkun

TODO.md

@@ -10,4 +10,5 @@
 - [x] share with /gossa?id=uuid -> access /gossa/uuid/main.go or /gossa/uuid/main_test.go, access /gossa/uuid/ssa.html
 - [x] ~~Better Editor: Monaco Editor~~ maybe not?
 - [x] Containerized deployment
-- [x] Support Go Modules
+- [x] Support Go Modules
+- [x] Flexible split view

public/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>The Go SSA Playground</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script src="https://unpkg.com/split.js/dist/split.min.js"></script>
     <script src="/gossa/linedtext.js"></script>
     <link rel="icon" href="/gossa/favicon.png">
     <link rel="stylesheet" href="/gossa/style.css">

public/linedtext.js

@@ -25,8 +25,8 @@
 
 			/* Wrap the text area in the elements we need */
 			textarea.wrap("<div class='linedtextarea' style='height:100%; overflow:hidden'></div>");
-			textarea.width("95%");
-			textarea.parent().prepend("<div class='lines' style='width:5%'></div>");
+			textarea.width("calc(100% - 30px)");
+			textarea.parent().prepend("<div class='lines' style='width:30px'></div>");
 			var linesDiv = textarea.parent().find(".lines");
 
 			var scroll = function(tn) {

public/main.js

@@ -142,6 +142,10 @@ function loadCode() {
 }
 loadCode() // load content if access with id
 
+Split(['#snippet', '#output'], {
+    sizes: [30, 70],
+})
+
 // TODO: dragable scroll
 // let wholePage = document.querySelector('body');
 // let el = document.querySelector("#ssa").contentDocument.querySelector('body');

public/style.css

@@ -86,12 +86,11 @@ input[type=button]:focus {
 #main {
     padding-top: 50px;
 	display: flex;
-	height: calc(100vh - 50px);
 	flex-direction: row;
+	height: calc(100vh - 50px);
 	overflow: auto;
 }
 #snippet {
-    flex: 30%;
     padding: 10px;
 	background: rgba(255, 252, 221, 0.81);
 }
@@ -103,7 +102,6 @@ input[type=button]:focus {
 	margin: 0 5px;
 }
 #output {
-    flex: 70%;
     background-color: #f1f1f1;
 }
 #outputMsg {
@@ -133,6 +131,20 @@ input[type=button]:focus {
 	color: lightgray;
 }
 
+/* Split view */
+
+.gutter {
+	background-color: #eee;
+	width: 5px;
+	background-repeat: no-repeat;
+	background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+    background-image: url('/gossa/vertical.png');
+    cursor: col-resize;
+}
+
 /* Dark Mode Toggle */
 
 /* The switch - the box around the slider */