INT-971 Tour CSS bug on window resize (#453)

Moved pager list to bottom of modal to make room for all the new steps we've added
(cherry picked from commit 3838c56)

Author: marcgurney

src/app/tour/index.jade

@@ -18,10 +18,12 @@
       .pager
         button.previous-slide.hide Previous
         button.next-slide Next
-        ul
-          each feature, i in features
-            - var id = 'f' + i
-            - var cls = (i === 0) ? 'selected' : null
-            li(id='#{id}', class='#{cls}', data-n='#{i}', title='#{feature.title}')
       .get-started-button-holder
         button#tour-remove.hide(type="button", class="btn btn-info") Get Started
+    .clearfix
+    .pager
+      ul
+        each feature, i in features
+          - var id = 'f' + i
+          - var cls = (i === 0) ? 'selected' : null
+          li(id='#{id}', class='#{cls}', data-n='#{i}', title='#{feature.title}')

src/app/tour/index.js

@@ -79,7 +79,7 @@ var TourView = View.extend({
     }
   },
   events: {
-    'click #features ul': 'showFeature',
+    'click .pager ul': 'showFeature',
     'click .previous-slide': 'showPreviousFeature',
     'click .next-slide': 'showNextFeature',
     'click #tour-remove': 'tourRemove',
@@ -170,7 +170,7 @@ var TourView = View.extend({
     var nFeature = parseInt(nCLick, 10);
 
     // deselect old
-    $('#features li.selected').removeClass('selected');
+    $('.pager li.selected').removeClass('selected');
     $('.feature-content.active').removeClass('active');
 
     // select new
@@ -194,11 +194,11 @@ var TourView = View.extend({
     var that = this;
 
     // deselect old
-    $('#features li.selected').removeClass('selected');
+    $('.pager li.selected').removeClass('selected');
     $('.feature-content.active').removeClass('active');
 
     // select new
-    $('#features li#f' + previousFeature).addClass('selected');
+    $('.pager li#f' + previousFeature).addClass('selected');
 
     $('#animation-gif').one('webkitTransitionEnd', function() {
       that.$animationGIF.src = path.join(that.tourImagesFolder, that.features[previousFeature].image);
@@ -218,11 +218,11 @@ var TourView = View.extend({
     var that = this;
 
     // deselect old
-    $('#features li.selected').removeClass('selected');
+    $('.pager li.selected').removeClass('selected');
     $('.feature-content.active').removeClass('active');
 
     // select new
-    $('#features li#f' + nextFeature).addClass('selected');
+    $('.pager li#f' + nextFeature).addClass('selected');
 
     $('#animation-gif').one('webkitTransitionEnd', function() {
       that.$animationGIF.src = path.join(that.tourImagesFolder, that.features[nextFeature].image);

src/app/tour/index.less

@@ -76,72 +76,70 @@
       color: @gray4;
       height: 120px;
     }
-    .pager {
-      position: relative;
-      -webkit-user-select: none;
-
-      button {
-        position: absolute;
-        display: block;
-        color: @green2;
-        border: none;
-        background: none;
+    .get-started-button-holder {
+      text-align: center;
+      margin-top: 100px;
 
-        &:hover {
-          text-decoration: none;
-          cursor: pointer;
-        }
-      }
-      button.previous-slide {
-        float: left;
-        background: url('images/tour/pager-arrow-left.png') left 0 no-repeat;
-        background-size: 10px 22px;
-        padding: 1px 0 0 20px;
-        left: 0;
+      #tour-remove {
+        opacity: 0;
+        animation: fade-in 750ms ease-out 500ms forwards;
       }
-      button.next-slide {
-        float: right;
-        background: url('images/tour/pager-arrow-right.png') right 0 no-repeat;
-        background-size: 10px 22px;
-        padding: 1px 20px 0 0;
-        right: 0;
+    }
+  }
+  .pager {
+    position: relative;
+    -webkit-user-select: none;
+    margin-top: 0;
+
+    button {
+      position: absolute;
+      display: block;
+      color: @green2;
+      border: none;
+      background: none;
+
+      &:hover {
+        text-decoration: none;
+        cursor: pointer;
       }
     }
+    button.previous-slide {
+      background: url('images/tour/pager-arrow-left.png') left 0 no-repeat;
+      background-size: 10px 22px;
+      padding: 1px 0 0 20px;
+      left: 0;
+    }
+    button.next-slide {
+      background: url('images/tour/pager-arrow-right.png') right 0 no-repeat;
+      background-size: 10px 22px;
+      padding: 1px 20px 0 0;
+      right: 0;
+    }
     ul {
-      // position: absolute;
       display: block;
       margin-left: auto;
       margin-right: auto;
       padding: 0;
-      // left: 120px;
       top: 2px;
-    }
-    li {
-      display: inline-block;
-      margin: 0 10px;
-      width: 10px;
-      height: 10px;
-      border-radius: 6px;
-      border: 1px solid @gray5;
-      list-style: none;
-      cursor: pointer;
-      text-indent: -9999px;
 
-      &:hover {
-        border-color: @green2;
-      }
-    }
-    li.selected {
-      background: @green2;
-      border-color: @green2;
-    }
-    .get-started-button-holder {
-      text-align: center;
-      margin-top: 100px;
+      li {
+        display: inline-block;
+        margin: 0 10px;
+        width: 10px;
+        height: 10px;
+        border-radius: 6px;
+        border: 1px solid @gray5;
+        list-style: none;
+        cursor: pointer;
+        text-indent: -9999px;
 
-      #tour-remove {
-        opacity: 0;
-        animation: fade-in 750ms ease-out 500ms forwards;
+        &:hover {
+          border-color: @green2;
+        }
+      }
+      li.selected {
+        background: @green2;
+        border-color: @green2;
       }
     }
   }