codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 01:26:18 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move step text into progress bar

Browse source
This commit is contained in:
Robin Ward 2016-09-20 14:04:18 -04:00
parent 9938f9bd67
commit f4f1569e0c
3 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/wizard/components/wizard-step.js.es6
View file

@ -52,10 +52,13 @@ export default Ember.Component.extend({
}
},
@computed('step.displayIndex', 'wizard.totalSteps')
@computed('step.index', 'wizard.totalSteps')
barStyle(displayIndex, totalSteps) {
const ratio = parseFloat(displayIndex) / parseFloat(totalSteps) * 100;
return Ember.String.htmlSafe(`width: ${ratio}%`);
let ratio = parseFloat(displayIndex) / parseFloat(totalSteps - 1);
if (ratio < 0) { ratio = 0; }
if (ratio > 1) { ratio = 1; }
return Ember.String.htmlSafe(`width: ${ratio * 200}px`);
},
autoFocus() {

9
app/assets/javascripts/wizard/templates/components/wizard-step.hbs
View file

@ -20,11 +20,12 @@
</div>
<div class='wizard-step-footer'>
<div class='wizard-progress'>
<div class='text'>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</div>
<div class='bar-container'>
<div class='bar-contents' style={{barStyle}}></div>
</div>
<div class='white'></div>
<div class='black' style={{barStyle}}></div>
<div class='screen'></div>
<span>{{bound-i18n "wizard.step" current=step.displayIndex total=wizard.totalSteps}}</span>
</div>
<div class='wizard-buttons'>

52
app/assets/stylesheets/wizard.scss
View file

@ -62,7 +62,7 @@ body.wizard {
border: 1px solid #ccc;
.wizard-step-contents {
min-height: 480px;
min-height: 510px;
}
.wizard-column-contents {
@ -90,21 +90,43 @@ body.wizard {
}
.wizard-progress {
.text {
font-size: 0.8em;
}
.bar-container {
border: 1px solid #ff6600;
border-radius: 3px;
height: 0.5em;
width: 15em;
border: 1px solid #ff6600;
border-radius: 3px;
width: 200px;
height: 1.4em;
.bar-contents {
background-color: #ff6600;
width: 0;
height: 0.5em;
transition: width .3s;
}
div {
position: absolute;
height: 1.4em;
}
.white {
background: white;
width: 200px;
z-index: 11;
}
.black {
background: black;
transition: width .3s;
z-index: 12;
}
span {
position: absolute;
font-size: 15px;
mix-blend-mode: difference;
color: white;
z-index: 13;
font-size: 0.8em;
left: 2em;
}
.screen {
background-color: #ff6600;
mix-blend-mode: screen;
width: 200px;
z-index: 14;
}
}