diff --git a/app/assets/stylesheets/modules/tour.scss b/app/assets/stylesheets/modules/tour.scss index a840281d6..c48037ae1 100644 --- a/app/assets/stylesheets/modules/tour.scss +++ b/app/assets/stylesheets/modules/tour.scss @@ -3,3 +3,21 @@ fill: rgba(0, 0, 0, 0.5); z-index: 10000; } + + +.ui-tour-popup.popover { + max-width: 414px; +} + +.tour-step-navigation.popover-navigation .btn-group { + display: flex; + flex-direction: row; + justify-content: space-between; + + .button-placekeeper { + width: 90px; + height: 30px; + background-color: transparent; + } +} + diff --git a/app/assets/templates/shared/tour-step-template.html b/app/assets/templates/shared/tour-step-template.html index cefe61657..fa9c83b0e 100644 --- a/app/assets/templates/shared/tour-step-template.html +++ b/app/assets/templates/shared/tour-step-template.html @@ -2,9 +2,11 @@ <div class="popover-content tour-step-content" bind-html-compile="tourStep.trustedContent || tourStep.content"></div> <div class="popover-navigation tour-step-navigation"> <div class="btn-group"> - <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()" translate>{{ 'app.shared.tour.previous' }}</button> - <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()" translate>{{ 'app.shared.tour.next' }}</button> + <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isPrev()" ng-click="tour.prev()" translate>⮜ {{ 'app.shared.tour.previous' }}</button> + <div class="button-placekeeper" ng-if="!tourStep.isPrev()"></div> + <button type="button" class="btn btn-sm btn-default" ng-click="tour.end()" translate>{{ 'app.shared.tour.end' }}</button> + <button type="button" class="btn btn-sm btn-default" ng-if="tourStep.isNext()" ng-click="tour.next()" translate>{{ 'app.shared.tour.next' }} ⮞</button> + <div class="button-placekeeper" ng-if="!tourStep.isNext()"></div> </div> - <button type="button" class="btn btn-sm btn-default" ng-click="tour.end()" translate>{{ 'app.shared.tour.end' }}</button> </div> </div>