From 163da1862e0792089440ad3ac9511311db05e1cb Mon Sep 17 00:00:00 2001
From: Yann Sergent <ysergent@ippon.fr>
Date: Wed, 22 Nov 2017 00:21:13 +0100
Subject: [PATCH] add zen mode with remote for presentation

---
 css/explaingit.css | 40 ++++++++++++++++++++++++++++++++++------
 index.html         | 32 ++++++++++++++++++++++++++++++--
 js/explaingit.js   |  4 ++--
 3 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/css/explaingit.css b/css/explaingit.css
index cbae11b..c6cbb38 100644
--- a/css/explaingit.css
+++ b/css/explaingit.css
@@ -69,6 +69,10 @@ span.cmd {
     top: 0; bottom: 0; right: 0; left: 0;
 }
 
+#ExplainGitZenRemote-Container .id-label{
+    font-size: 15px;
+}
+
 #ExplainGitZen-Container .svg-container {
     display: inline-block;
     border: 1px dotted #AAA;
@@ -77,15 +81,39 @@ span.cmd {
     margin-left: 0;
 }
 
-#ExplainGitZen-Container .svg-container.remote-container {
+#ExplainGitZen-Container .playground-container {
+    position: absolute;
+    top: 0; bottom: 20px; right: 20px; left: 20px;
+}
+
+#ExplainGitZenRemote-Container {
+    position: absolute;
+    top: 0; bottom: 0; right: 0; left: 0;
+}
+
+#ExplainGitZenRemote-Container .id-label{
+    font-size: 12px;
+}
+
+#ExplainGitZenRemote-Container .svg-container {
+    display: inline-block;
+    border: 1px dotted #AAA;
+    position: absolute;
+    top: 0; bottom: 40%; right: 0; left: 250px;
+    margin-left: 0;
+}
+
+#ExplainGitZenRemote-Container .svg-container.remote-container {
+    display: inline-block;
+    border: 1px dotted #AAA;
     position: absolute;
-    top: 0px; right: 0px; left: auto; bottom: auto;
+    top: 60%; bottom: 0; right: 0; left: 250px;
+    margin-left: 0;
     background-color: #EFF1FF;
-    border-left: 1px dotted #AAA;
-    border-bottom: 1px dotted #AAA;
+    overflow: auto;    
 }
 
-#ExplainGitZen-Container .playground-container {
+#ExplainGitZenRemote-Container .playground-container {
     position: absolute;
     top: 0; bottom: 20px; right: 20px; left: 20px;
 }
@@ -122,7 +150,7 @@ span.cmd {
 .control-box .log,
 .control-box input[type="text"] {
     font-family: Courier New;
-    font-size: 14px;
+    font-size: 15px;
 }
 
 .control-box .log .command-entry {
diff --git a/index.html b/index.html
index f9741ea..fe43ffa 100644
--- a/index.html
+++ b/index.html
@@ -278,6 +278,7 @@ <h2>Specific Examples</h2>
     <div class="twocol last">
       <a id="open-freeplay" class="openswitch" href="#freeplay">Free Playground</a>
       <a id="open-zen" class="openswitch" href="#zen">Zen Mode</a>
+      <a id="open-zen-remote" class="openswitch" href="#zenremote">Zen Mode with remote</a>
     </div>
   </div>
 </div>
@@ -286,6 +287,10 @@ <h2>Specific Examples</h2>
     <div class="playground-container"></div>
 </div>
 
+<div id="ExplainGitZenRemote-Container" style="display:none">
+  <div class="playground-container"></div>
+</div>
+
 <svg version="1.1" baseProfile="full"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -519,7 +524,7 @@ <h2>Specific Examples</h2>
             initialMessage:
                 'Have fun.'
         }
-    };
+  };
 
     window.addEventListener('hashchange', open, false);
     window.addEventListener('load', open, false);
@@ -547,11 +552,34 @@ <h2>Specific Examples</h2>
                 name: 'Zen',
                 height: '100%',
                 commitData: [
-                    {id: 'e137e9b', tags: ['master'], message: 'first commit'}
+                    {id: 'e137e9b', tags: ['master'], message: 'initial commit'}
                 ],
                 initialMessage:
                     'Have fun.'
             });
+        } else if (hash === 'zenremote') {
+            var elements = document.getElementsByClassName('row');
+            for(var i = 0; i != elements.length; ++i)
+            {
+              elements[i].style.display = 'none';
+            }
+            document.getElementById('fork-me').style.display = 'none';
+            
+            explainGit.reset();
+
+            explainGit.open({
+                name: 'ZenRemote',
+                height: '100%',
+                commitData: [
+                    {id: 'e137e9b', tags: ['origin/master', 'master'], message: 'initial commit'}
+                ],
+                commitRadius: 15,
+                originData: [
+                    {id: 'e137e9b', tags: ['master'], message: 'initial commit'}
+                ],
+                initialMessage:
+                    'Formation Git'
+            });
         }
     }
 });
diff --git a/js/explaingit.js b/js/explaingit.js
index 9501ee3..744e4ff 100644
--- a/js/explaingit.js
+++ b/js/explaingit.js
@@ -22,8 +22,8 @@ define(['historyview', 'controlbox', 'd3'], function (HistoryView, ControlBox, d
         if (args.originData) {
             originView = new HistoryView({
                 name: name + '-Origin',
-                width: 300,
-                height: 225,
+                width: 275,
+                height: 300,
                 commitRadius: 15,
                 remoteName: 'origin',
                 commitData: args.originData