From fdc9bbeea93cf712cfa7a059160248dc8355c1b9 Mon Sep 17 00:00:00 2001
From: Robert L <robert@slowsilver.net>
Date: Thu, 11 Jan 2018 22:52:29 -0500
Subject: [PATCH] Vertically resizable client window

---
 index.htm         |  8 ++++++--
 js/GUI.Utils.js   | 14 +++++++++++++-
 styles/styles.css |  5 +++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/index.htm b/index.htm
index 442bf73..cda0376 100644
--- a/index.htm
+++ b/index.htm
@@ -13,7 +13,8 @@
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <link href="styles/styles.css" rel="stylesheet">
       <link href="styles/ansi.css" rel="stylesheet">
-      <script src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
+      <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
       <script src="js/GUI.Utils.js"></script>
       <script>
 		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -133,7 +134,10 @@
 			      <a href="#" id="client-bar-control"><i id="client-ico-up" class="fa fa-chevron-up" aria-hidden="true"></i><i id="client-ico-down" class="fa fa-chevron-down hidden" aria-hidden="true"></i><b id="client-tab-desc">Client</b></a>
 		      </span>
 	      </div>
-        <div id="client-term-container" class="hidden">
+        <div id="client-term-container" class="hidden vertical-resize">
+          <div id="client-term-resize" class="handle ui-resizable-handle ui-resizable-n" >
+            <i class="fa fa-angle-double-up" aria-hidden="true"></i>
+          </div>
           <form id="client-term">
             <div id="client-term-output" class="ansi-37 ansi-40"></div>
             <div id="client-term-prompt" class="ansi-37 ansi-40"></div>
diff --git a/js/GUI.Utils.js b/js/GUI.Utils.js
index cae0ed5..de11750 100644
--- a/js/GUI.Utils.js
+++ b/js/GUI.Utils.js
@@ -68,7 +68,19 @@ $(document).ready(function() {
 			$('#client-ico-up').toggleClass("hidden");
 		});
 		$('#client-login').click(function() { reconnect();})
-
+		$(".vertical-resize").resizable({
+        handles: {
+            'n': '#client-term-resize'
+        },
+				alsoResize: "#client-term-output",
+				minWidth: "100%",
+				maxWidth: "100%",
+				stop: function(event, ui) {
+        $(this).css("width", '');
+				$('#client-term-output').css("width",'');
+				}
+		});
+		$(".client-term-container").resize(function() { width = $(this).width(); $("#client").css({'width' : '100%'});   $("#client-term-output").css({'margin-right' : '0px !important', 'padding-right' : '0 !important'})  })
 		startup();
 
 });
diff --git a/styles/styles.css b/styles/styles.css
index bd89f7c..b06941d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -157,9 +157,14 @@ input[type=radio]:checked + label:before {
   text-align: left;
   background-color: #111
 }
+#client-term-button { position: fixed; bottom: 1vh; }
 #client { display: block; }
 .hidden { display: none; }
 #client-term-entry { width: 100%; height: 5vh; border: 0; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #222; margin: 0; padding:0; resize: none; color: silver; vertical-align: middle;}
+#client-term-resize {color: lightgrey; text-align: center;  width: 100%; background-color: #333; }
+#client-term-resize i { margin: 0 auto; width: 2vw;}
+
+
 
 @media only screen and (max-width: 1290px) { #client-tab-desc { display: none; } }
 @media only screen and (max-width: 900px) { .wvg-navbar { height: 6vh; font-size: 1.25em;}  .wvg-controls { width: 65%;}  .wvg-navbar li { padding-left: 1vw; padding-right: 2vw; padding-top: 2.0vh;} .wvg-tools span, .select-route-map {width: 95%;}