yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style of the Guided tour CSS + HTML

Browse Source
This commit is contained in:
Zsolt
2017-10-04 13:03:24 +02:00
parent 2ca6e8be9a
commit 93237bfdb8
2 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/Umbraco.Web.UI.Client/src/less/components/application/umb-tour.less
View File

@@ -3,18 +3,34 @@
top: 50%;
left: 50%;
background: @white;
padding: 20px;
width: 200px;
height: 200px;
border-radius: 5px;
font-size: 18px;
padding: 30px;
width: 300px;
min-height: 100px;
z-index: 10000;
transform: translate(-50%, -50%);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.umb-tour__step-counter {
padding-bottom: 26px;
margin-bottom: 23px;
border-bottom: solid 1px @gray-8;
}
.umb-tour__title {
margin-bottom: 10px;
margin-bottom: 20px;
font-weight: bold;
color: @black;
font-size: 16px;
font-size: 20px;
}
.umb-tour__content {
margin-bottom: 20px;
line-height: 24px;
}
.umb-tour__dot {
@@ -23,7 +39,7 @@
right: 0;
top: 0;
bottom: 0;
z-index: 2000;
z-index: 10000;
width: 20px;
height: 20px;
background: red;
@@ -31,6 +47,25 @@
transform: translate(-50%, -50%);
}
.umb-tour__button-container {
float: right;
}
.umb-tour__button-container-center {
text-align: center;
}
.umb-tour__big-title {
font-size: 30px;
font-weight: 700;
margin-bottom: 20px;
}
.center {
text-align: center;
}
// SVG Backdrop
.umb-tour__canvas {
height: 100%;
width: 100%;
@@ -44,5 +79,6 @@
.umb-tour__rect {
position: absolute;
pointer-events: all;
opacity: 0.5;
margin: 0;
}

26
src/Umbraco.Web.UI.Client/src/views/components/application/umb-tour.html
View File

@@ -11,18 +11,22 @@
</div>
<div ng-if="currentStepIndex < steps.length && !loadingStep">
<div>step {{ currentStepIndex + 1 }} of {{ steps.length }}</div>
<div class="umb-tour__step-counter">step {{ currentStepIndex + 1 }} of {{ steps.length }}</div>
<div class="umb-tour__title">{{ currentStep.title }}</div>
<div class="umb-tour__content">{{ currentStep.content }}</div>
<button ng-click="endTour()">End tour</button>
<button ng-click="nextStep()" ng-if="!currentStep.event">Next</button>
<div class="umb-tour__button-container">
<button class="btn umb-button__button btn-info" ng-click="endTour()">End tour</button>
<button class="btn umb-button__button btn-success" ng-click="nextStep()" ng-if="!currentStep.event">Next</button>
</div>
</div>
<div ng-if="currentStepIndex === steps.length && !loadingStep">
<div>WOOOHOOO</div>
<div>Your completed the tour. That is amazing!</div>
<button ng-click="completeTour()">Complete</button>
</div>
<div class="umb-tour__big-title center">WOOOHOOO!</div>
<div class="umb-tour__content center">Your completed the tour. That is amazing!</div>
<div class="umb-tour__button-container-center">
<button class="btn umb-button__button btn-success center" ng-click="completeTour()">Complete</button>
</div>
</div>
</div>
@@ -31,10 +35,10 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="umb-tour__canvas">
<rect class="rect-left umb-tour__rect" height="100%" opacity="0.4"/>
<rect class="rect-top umb-tour__rect" width="100%" opacity="0.4"/>
<rect class="rect-bot umb-tour__rect" width="100%" opacity="0.4"/>
<rect class="rect-right umb-tour__rect" height="100%" width="100%" opacity="0.4"/>
<rect class="rect-left umb-tour__rect" height="100%"/>
<rect class="rect-top umb-tour__rect" width="100%"/>
<rect class="rect-bot umb-tour__rect" width="100%"/>
<rect class="rect-right umb-tour__rect" height="100%" width="100%"/>
</svg>