Improve responsive design

Author: rsantanalumis

css/1140.css

@@ -91,13 +91,11 @@ img {
 /* Smaller screens */
 
 @media only screen and (max-width: 1023px) {
-
 	body {
-	font-size: 0.8em;
-	line-height: 1.5em;
-	}
-	
-	}
+		/* font-size: 0.8em; */
+		line-height: 1.5em;
+	}	
+}
 
 
 /* Mobile */

css/explaingit.css

@@ -108,10 +108,10 @@ span.cmd {
 
 #ExplainGitZen-Container .playground-container {
   position: absolute;
-  top: 0;
-  bottom: 20px;
-  right: 20px;
-  left: 20px;
+  top: 10px;
+  bottom: 30px;
+  right: 30px;
+  left: 30px;
 }
 
 .remote-name-display {
@@ -168,7 +168,7 @@ span.cmd {
   padding-left: 15px;
   color: #FFF;
   line-height: 14px;
-  background: url(../images/prompt.gif) no-repeat left top black;
+  background: url(../images/prompt.gif) no-repeat left center black;
 }
 
 .control-box input[type="text"] {
@@ -322,3 +322,61 @@ g.head-tag > text {
   font-weight: bold;
   text-transform: uppercase;
 }
+
+/* Mobile/portrait view */
+@media screen and (max-width: 767px), (max-device-width: 1920px) and (orientation: portrait) {
+	.playground-container {
+		display: flex;
+    	flex-flow: column;
+	}
+
+	.control-box {
+		position: relative;
+		width: 100%;
+		flex: 1 1 33%;
+		order: 1;
+		display: flex;
+		flex-flow: column;
+		overflow: hidden;
+	}
+
+	.control-box input {
+		width: calc(100% - 15px) !important;
+    	font-size: 16px !important;
+    	position: relative !important;
+	}
+
+	.control-box .log {
+		position: relative;
+		order: 2;
+		height: 100%;
+		top: 0;
+		bottom: 0;
+	}
+
+	.scenario-chooser {
+		position: relative !important;
+		left: 0 !important;
+		top: 0 !important;
+	}
+
+	.svg-container {
+		position: relative !important;
+		width: 100%;
+		flex: 1 1 33%;
+		left: 0 !important;
+		min-height: auto !important;
+	}
+}
+
+@media screen and (min-width: 540px) and (max-device-width: 1920px) and (orientation: portrait) {
+    body, .control-box .log, .control-box .log div {
+        font-size: 24px !important;
+		line-height: 2em !important;
+    }
+
+	.control-box input {
+		font-weight: bold;
+		font-size: 35px !important;
+	}
+}

index.html

@@ -12,6 +12,7 @@
 </script>
 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Visualizing Git</title>
 <script src="js/vendor/jquery.js"></script>
 <script src="js/vendor/jquery-ui.min.js"></script>

js/controlbox.js

@@ -372,15 +372,14 @@ function(_yargs, d3, demos) {
         boolean: ['amend'],
         string: ['m']
       })
-      var msg = ""
       this.transact(function() {
         if (opts.amend) {
           this.getRepoView().amendCommit(opts.m || this.getRepoView().getCommit('head').message)
         } else {
           this.getRepoView().commit(null, opts.m);
         }
       }, function(before, after) {
-        var reflogMsg = 'commit: ' + msg
+        var reflogMsg = 'commit: ' + (after.commit.message ?? '');
         this.getRepoView().addReflogEntry(
           'HEAD', after.commit.id, reflogMsg
         )

js/historyview.js

@@ -258,7 +258,7 @@ define(['d3'], function() {
     this.currentBranch = config.currentBranch || 'master';
 
     this.width = config.width;
-    this.height = config.height || 400;
+    this.height = 400;
     this.orginalBaseLine = config.baseLine;
     this.baseLine = this.height * (config.baseLine || 0.9);
 
@@ -528,7 +528,7 @@ define(['d3'], function() {
 
       svg.attr('id', this.name)
         .attr('width', this.width)
-        .attr('height', this.isRemote ? this.height + 150 : this.height);
+        .attr('height', this.height + 150);
 
       if (this.isRemote) {
         svg.append('svg:text')
@@ -603,12 +603,14 @@ define(['d3'], function() {
         var perc = this.height.substring(0, this.height.length - 1) / 100.0;
         var baseLineCalcHeight = Math.round(this.svg.node().parentNode.offsetHeight * perc) - 65;
         var newBaseLine = Math.round(baseLineCalcHeight * (this.originalBaseLine || 0.6));
+
         if (newBaseLine !== this.baseLine) {
           this.baseLine = newBaseLine;
           this.initialCommit.cy = newBaseLine;
           this.svg.attr('height', baseLineCalcHeight);
         }
       }
+
       this._calculatePositionData();
       this._calculatePositionData(); // do this twice to make sure
       this._renderCircles();