Design improvements with CHANGELOG

CHANGELOG.md

@@ -0,0 +1,19 @@
+#Change Log
+
+**V0.6.1** *(1-16-2018)*
+  * Moved CHANGELOG over to read CHANGELOG.md from project and parse the markdown in Javascript. Is it overkill? Sure. Do I care? No
+  * Some design tweaks to improve space usage throughout sidebar, and other things
+
+**V0.6** *(1-9-2018)*
+* Simple websocket client.     (Thanks to grapenut@M\*U\*S\*H )
+    * Best on tablet or desktop I would guess. Mobile might be iffy
+
+**V0.5** *(6/14/2017)*
+* Addition of changelog
+* Improve responsiveness of design. Could be better.
+
+**V0.2-0.4**
+ * Additional features that I cannot recall
+
+**V0.1**
+* Initial Release

index.htm

@@ -11,10 +11,12 @@
       <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,700i" rel="stylesheet">
       <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
       <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.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="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js" 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(){
@@ -68,8 +70,9 @@
                 <select id="pointb" name="Point_B">
                   <!-- Options will generated in code -->
                 </select>
-                <label for="speed">Travel Speed</label>
+                <br />    <br />
-                <input type="text" id="speed" value="14">
+                <label for="speed">Travel Speed</label>    <br />
+                <input type="text" id="speed" value="14">    <br />
                 <select id="speedunit" name="Speed Unit">
                    <option value='WF'>Warp Factor</option>
                    <option value='PC/s'>PC/s</option>
@@ -113,16 +116,15 @@
 
           </div>
     			<div class="wvg-tools" id="Info">
-    				<span> This tool was designed by Frey @ ATSMUSH. It is based on MapView for ATS with data used from the Navcomp MUSHClient plugin with permission. </span>
+            <span id="changelog_container">
-            <span> Change Log :<br/>
+              <!-- Silly stuff gets put here on JS execution -->
-              <p>
-                <b>1-9-2018</b>: <i> Add simple websocket based client to desktop & tablet version (for now until I can figure mobile out). Thanks to grapenut@M*U*S*H for the client code and all others on the PennMUSH dev team involved in adding websockets to the codebase. </i>
-              </p>
-              <p>
-                <b>6-14-2017</b>: <i> Improve resposiveness in design. It wasn't scaling down well, should be better now. Not glorious, but better. Also, this changelog was added.</i>
-              </p>
             </span>
-            <span><a href="https://goo.gl/7uDYCW">Issue Tracker</a></span>
+
+            <div id="info_footer">
+              <span class="toolsep"></span>
+              <span> This tool was designed by Frey @ ATSMUSH. It is based on MapView for ATS with data used from the Navcomp MUSHClient plugin with permission. </span>
+              <span><a href="https://goo.gl/7uDYCW">Issue Tracker</a>  <i class="fa fa-ellipsis-h" aria-hidden="true"></i>  <a href="https://github.com/roblevesque/webglmapview">Project Page</a></span>
+            </div>
     			</div>
     		</div>
     		<div class="reset-container"><span class="reset-button">  Reset </span></div>

js/GUI.Utils.js

@@ -81,6 +81,19 @@ $(document).ready(function() {
 				}
 		});
 		$(".client-term-container").resize(function() { width = $(this).width(); $("#client").css({'width' : '100%'});   $("#client-term-output").css({'margin-right' : '0px !important', 'padding-right' : '0 !important'})  })
+		$.ajax({
+			url: 'CHANGELOG.md',
+			type: 'get',
+			async: 'true',
+			success: function(text) {
+				var converter = new showdown.Converter(),
+				html = converter.makeHtml(text);
+
+				$("#changelog_container").html(html);
+			}
+		});
+
+		// Websocket client startup
 		startup();
 
 });

styles/styles.css

@@ -1,4 +1,7 @@
 body { margin: 0; overflow:hidden;}
+a { color: #3641a0;}
+a:visited { color: #87899b; }
+a:hover { color: #0019ff;}
 canvas { width: 75%; height: 100% ;}
 .reset-button {margin: 0; padding: 0; padding: 0.25em 0.25em; color: #AAA; font-size: 1.0em;}
 .menu-button { position: fixed; right: 0.1vw; top: 0; z-index: 5; color:white; background-color:#003133; padding: 0px; font-weight: bold; font-size:2.5vh;  }
@@ -19,7 +22,7 @@ canvas { width: 75%; height: 100% ;}
 .wvg-navbar li { width:auto; height: 100%; float: left; padding-top: 0.25vh; padding-bottom: 0.25vh; padding-left: 0.5vw; padding-right: 0.5vw; margin: 0; border: 0; text-decoration: none;}
 .wvg-tablink { height: 100%; border: 0; margin: 0; padding: 0; font-weight: bold; text-align: center; font-family: 'Raleway', sans-serif; color:#67989A; font-size: 1.0em; }
 .wvg-tab-active { background-color: #0D4A4D; color: #003133; }
-.wvg-tools { width: 100%; height: 98%; background: #333; display: none; color: #AAA; padding-top: 2vh; padding-left:1vw; padding-right: 2.5vw;}
+.wvg-tools { width: 100%; height: 98%; background: #333; display: none; color: #AAA; padding-top: 2vh; padding-left:0.1vw; padding-right: 0.25vw;}
 .wvg-tools select, .wvg-tools input {
   width: 12vw;
   padding: 5px;
@@ -35,7 +38,7 @@ canvas { width: 75%; height: 100% ;}
 
   }
 .wvg-tools input { background: #333; width: 11.4vw; }
-.wvg-tools span { text-align: center; color: #FFF; font-family: 'Raleway', sans-serif; display: block; padding-right: 3vw; font-size: 1.0em; }
+.wvg-tools span { text-align:center; color: #FFF; font-family: 'Raleway', sans-serif; display: block; font-size: 1.0em; }
 .wvg-tools span label { font-weight: bold;}
 .wvg-first {  display: block; }
 #wrapper { height: inherit; width: 100%; }
@@ -92,8 +95,8 @@ input[type=radio]:checked + label:before {
   text-decoration: none;
 }
 .tool-header { font-weight: bold; padding-top: 0.75em; display: block; }
-#route_output {font-size: 1.25vh; height: 30%; padding-top: 1vh; width: 90%;}
+#route_output {margin: 0 auto; font-size: 1.25vh; height: 30%; padding-top: 1vh; width: 100%; overflow: auto;}
-.toolsep { margin-right: 1vw; padding:0;  padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;}
+.toolsep { margin: 0 auto; padding:0;  padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;}
 .calc_data { padding-top: 2.5vh; font-size: 1.5vh;  font-family: 'Open Sans', sans-serif;}
 
 #client {
@@ -165,6 +168,11 @@ input[type=radio]:checked + label:before {
 #client-term-resize i { margin: 0 auto; width: 2vw;}
 
 
+#changelog_container h1 { text-align: center; font-size: 1.0em; }
+#changelog_container { height: 80%; text-align: left; font-size: 0.75em; padding-right: 0.3vw; overflow: hidden;}
+#changelog_container::parent {text-align: left;}
+#info_footer {padding-bottom:0.9vh; font-size: 0.60em; position: fixed; bottom: 5vh;}
+
 
 @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%;}