diff --git a/src/app/tour/index.jade b/src/app/tour/index.jade index 775fe928121..3a07b442d0b 100644 --- a/src/app/tour/index.jade +++ b/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}') diff --git a/src/app/tour/index.js b/src/app/tour/index.js index 3a3a4ba834b..1b93be3497f 100644 --- a/src/app/tour/index.js +++ b/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); diff --git a/src/app/tour/index.less b/src/app/tour/index.less index 7e68fb79d6c..95f2eaf7dcf 100644 --- a/src/app/tour/index.less +++ b/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; } } }