From 3bca2ba1278aa1d0a5cd98a247d0ab2a44efe240 Mon Sep 17 00:00:00 2001
From: Daryl Pinto <daryl.j.pinto@gmail.com>
Date: Thu, 20 Jun 2019 21:12:32 -0400
Subject: [PATCH 1/2] Improve layout and UX for mobile devices

---
 css/1140.css     | 35 +++++++++++++++++++++++++++++++++++
 index.html       |  1 +
 js/controlbox.js | 10 +++++++---
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/css/1140.css b/css/1140.css
index b8d6fa2..faa6d68 100644
--- a/css/1140.css
+++ b/css/1140.css
@@ -109,6 +109,41 @@ img {
 	-webkit-text-size-adjust: none;
 	}
 	
+	body #ExplainGitZen-Container .playground-container {
+		display: flex;
+		flex-direction: column;
+		margin: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;	
+	}
+
+	body #ExplainGitZen-Container .control-box {
+		width: 100%;
+		height: 30vh;
+		bottom: 0;
+		top: auto;
+	}
+
+	body #ExplainGitZen-Container .control-box input[type="text"] {
+		width: 100vw;
+		height: 40px;
+		box-sizing: border-box;
+		border-top: 1px solid gray;
+	}
+
+	body #ExplainGitZen-Container .control-box .log {
+		bottom: 40px;
+		padding-bottom: 10px;
+	}
+
+	body #ExplainGitZen-Container .svg-container {
+		position: static;
+		width: 100%;
+		height: 70vh;
+		border: none;
+	}
+
 	.row, body, .container {
 	width: 100%;
 	min-width: 0;
diff --git a/index.html b/index.html
index a87e584..c70bc60 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
   gtag('config', 'UA-115441830-1');
 </script>
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>Visualizing Git</title>
 <script src="js/vendor/jquery.js"></script>
diff --git a/js/controlbox.js b/js/controlbox.js
index c9761bf..a1f0e78 100644
--- a/js/controlbox.js
+++ b/js/controlbox.js
@@ -133,9 +133,13 @@ function(_yargs, d3, demos) {
         .classed('log', true);
 
       input = cBoxContainer.append('input')
-        .attr('type', 'text')
-        .classed('input', true)
-        .attr('placeholder', 'enter git command');
+        .attr({
+          type: 'text',
+          placeholder: 'enter git command',
+          autocorrect: 'off',
+          autocapitalize: 'none'
+        })
+        .classed('input', true);
 
       log.on('click', function () {
         if (d3.event.target === log.node()) {

From 5c17cb629788d21345b6ae86b0c7cc9c2ba4e0f3 Mon Sep 17 00:00:00 2001
From: Daryl Pinto <daryl.j.pinto@gmail.com>
Date: Thu, 20 Jun 2019 23:41:31 -0400
Subject: [PATCH 2/2] Add tabs to switch between local/remote repos on mobile

---
 css/1140.css     | 82 ++++++++++++++++++++++++++++++++++++++----------
 index.html       | 26 +++++++++++++++
 js/explaingit.js |  2 +-
 3 files changed, 93 insertions(+), 17 deletions(-)

diff --git a/css/1140.css b/css/1140.css
index faa6d68..9b1a3da 100644
--- a/css/1140.css
+++ b/css/1140.css
@@ -87,6 +87,9 @@ img {
 	height: auto;
 }
 
+.mobile-tabs {
+	display: none;
+}
 
 /* Smaller screens */
 
@@ -108,7 +111,26 @@ img {
 	font-size: 16px;
 	-webkit-text-size-adjust: none;
 	}
+
+	.row, body, .container {
+	width: 100%;
+	min-width: 0;
+	margin-left: 0px;
+	margin-right: 0px;
+	padding-left: 0px;
+	padding-right: 0px;
+	}
 	
+	.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
+	width: auto;
+	float: none;
+	margin-left: 0px;
+	margin-right: 0px;
+	padding-left: 20px;
+	padding-right: 20px;
+	}
+
+	/* Re-arrange layout */
 	body #ExplainGitZen-Container .playground-container {
 		display: flex;
 		flex-direction: column;
@@ -123,6 +145,8 @@ img {
 		height: 30vh;
 		bottom: 0;
 		top: auto;
+		z-index: 105;
+		background-color: white;
 	}
 
 	body #ExplainGitZen-Container .control-box input[type="text"] {
@@ -140,26 +164,52 @@ img {
 	body #ExplainGitZen-Container .svg-container {
 		position: static;
 		width: 100%;
-		height: 70vh;
+		height: calc(70vh - 15px);
+		margin-top: 11px;
 		border: none;
 	}
 
-	.row, body, .container {
-	width: 100%;
-	min-width: 0;
-	margin-left: 0px;
-	margin-right: 0px;
-	padding-left: 0px;
-	padding-right: 0px;
+	/* Tabbed view for Remote scenarios */
+	#ExplainGitZen-Container .svg-container.remote-container {
+		height: 70vh;
+		min-height: auto;
 	}
-	
-	.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
-	width: auto;
-	float: none;
-	margin-left: 0px;
-	margin-right: 0px;
-	padding-left: 20px;
-	padding-right: 20px;
+
+	#ExplainGitZen-Container .svg-container.remote-container
+	#ExplainGitZen-Origin {
+		height: 90%;
+	}
+
+	#ExplainGitZen-Container .svg-container.remote-container.hidden {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.mobile-tabs {
+		display: flex;
+		position: fixed;
+		z-index: 105;
+		width: 100%;
+		background-color: white;	
+	}
+
+	.mobile-tabs.hidden {
+		display: none;
+	}
+
+	.mobile-tabs span {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 50%;
+		text-align: center;
+		height: 40px;
+		font-weight: bold;
+		cursor: pointer;
+	}
+
+	.tab-origin {
+		background-color: #eff1ff;
 	}
 
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index c70bc60..c7b1255 100644
--- a/index.html
+++ b/index.html
@@ -24,6 +24,11 @@
 </head>
 <body>
 
+<div class="mobile-tabs hidden">
+  <span class="tab-local" onclick="showLocalRepo()">Local Repository</span>
+  <span class="tab-origin" onclick="showRemoteRepo()">Origin (Remote)</span>
+</div>
+
 <div id="ExplainGitZen-Container" style="display:none">
     <div class="playground-container">
       <pre id='last-command' style='display: none;'></pre>
@@ -50,6 +55,26 @@
     </marker>
 </svg>
 
+<script type="text/javascript">
+    function initMobileTabs () {
+      var hasRemote = $('#ExplainGitZen-Origin').length > 0;
+      if(hasRemote) {
+        $('.mobile-tabs').removeClass('hidden');
+        showLocalRepo();
+      }else {
+        $('.mobile-tabs').addClass('hidden');
+        showRemoteRepo();
+      }
+    }
+
+    function showLocalRepo () {
+      $('.remote-container').addClass('hidden');
+    }
+
+    function showRemoteRepo () {
+      $('.remote-container').removeClass('hidden');
+    }
+</script>
 <script type="text/javascript">
 require(['explaingit', 'demos'], function (explainGit, demos) {
     function ready(fn) {
@@ -100,6 +125,7 @@
           document.getElementById('last-command').textContent = ""
           clean()
           open()
+          initMobileTabs()
         }
       }
 
diff --git a/js/explaingit.js b/js/explaingit.js
index 8aa89d5..309568c 100644
--- a/js/explaingit.js
+++ b/js/explaingit.js
@@ -25,7 +25,7 @@ define(['historyview', 'controlbox', 'd3'], function(HistoryView, ControlBox, d3
       originView = new HistoryView({
         name: name + '-Origin',
         width: 300,
-        height: 400,
+        height: $(window).height() * 0.3,
         commitRadius: args.commitRadius,
         remoteName: 'origin',
         commitData: args.originData,