Issue 106 exit button on first slide

src/js/views/index.js

@@ -50,6 +50,10 @@ var PositiveNegativeBase = BaseView.extend({
     this.navEvents.trigger('positive');
   },
 
+  exit: function() {
+    this.navEvents.trigger('exit');
+  },
+
   negative: function() {
     this.navEvents.trigger('negative');
   }
@@ -148,9 +152,15 @@ var LeftRightView = PositiveNegativeBase.extend({
   template: _.template($('#left-right-template').html()),
   events: {
     'click .left': 'negative',
+    'click .exit': 'exit',
     'click .right': 'positive'
   },
 
+  exit: function() {
+    this.pipeEvents.trigger('exit');
+    LeftRightView.__super__.exit.apply(this);
+  },
+
   positive: function() {
     this.pipeEvents.trigger('positive');
     LeftRightView.__super__.positive.apply(this);

src/js/views/multiView.js

@@ -57,6 +57,7 @@ var MultiView = Backbone.View.extend({
     this.navEvents.on('negative', this.getNegFunc(), this);
     this.navEvents.on('positive', this.getPosFunc(), this);
     this.navEvents.on('quit', this.finish, this);
+    this.navEvents.on('exit', this.finish, this);
 
     this.keyboardListener = new KeyboardListener({
       events: this.navEvents,

src/style/main.css

@@ -942,15 +942,16 @@ div.gitDemonstrationView {
   cursor: pointer;
 }
 
-.leftRightView div.hideLeft i {
-  cursor: default;
-  opacity: 0;
-}
-
 .leftRightView div {
-  margin: 0 20px;
+  margin: 0 60px;
 }
 
+.leftRightView div.exit {
+  -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
+  -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
+}
+
+.leftRightView div.exit,
 .leftRightView div.left {
   color: rgb(253, 50, 50);
   text-shadow: -1px 1px 3px rgba(0,0,0,0.7);
@@ -965,6 +966,7 @@ div.gitDemonstrationView {
   color: #74FC74;
 }
 
+.leftRightView div.exit:hover,
 .leftRightView div.left:hover {
   color: #FF6969;
 }

src/template.index.html

@@ -385,10 +385,11 @@
   <script type="text/html" id="left-right-template">
     <% if (showLeft) { %>
       <div class="box left">
+        <i class="icon-circle-arrow-left"></i>
     <% } else { %>
-      <div class="box left hideLeft">
+      <div class="box exit">
+        <i class="icon-signout"></i>
     <% } %>
-      <i class="icon-circle-arrow-left"></i>
     </div>
     <div class="box right">
       <% if (!lastNav) { %>