implements tabs as step progression

This commit is contained in:
hunterlester 2016-12-06 22:47:16 -08:00
parent 14dca5e95a
commit 5d38148070
3 changed files with 230 additions and 155 deletions

View file

@ -27,8 +27,60 @@ i.fa {
font-weight: 600;
}
.nav-tabs {
display: inline-block;
border: none;
/*& > li {
& > a {
outline: none;
border: none !important;
background-color: transparent;
&:not(.active):hover {
border-bottom: 2px solid $dropdown-link-hover-bg !important;
}
}
&.active > a,
&.active > a:hover {
border-bottom: 2px solid $btn-default-border !important;
}
}*/
}
.nav-tabs>li>a {
font-size: 1.2em;
color: rgb(30, 115, 190);
border: none;
}
.nav-tabs>li.active>a {
border: none;
color: #ffffff;
background-color: rgb(30, 115, 190);
border-radius: 999px;
}
.nav-tabs>li.active>a:link {
border: none;
}
.nav-tabs>li.active>a:hover {
background-color: #eee;
}
.nav-tabs>li>a:hover {
background-color: #eee;
border-radius: 999px;
}
.nav-tabs>li>a:active {
background-color: rgb(30, 115, 190);
}
.proposalBlock {
margin-top: 6%;
/*margin-top: 6%;*/
padding: 7%;
background-color: #ffffff;
box-shadow: 0px 17px 24px 0px rgba(0, 0, 0, 0.16);

View file

@ -72,6 +72,7 @@
var validProposal = proposal.validate();
if (validProposal) {
document.getElementById('step_two').click();
proposal.walletCommands();
@ -112,6 +113,17 @@
</div> -->
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-2">
<ul class="nav nav-tabs">
<li class="active"><a id="step_one" data-toggle="tab" href="#step1">Form</a></li>
<li><a id="step_two" data-toggle="tab" href="#step2">Commands</a></li>
<li><a id="step_three" data-toggle="tab" href="#step3">Progress</a></li>
<li><a id="step_four" data-toggle="tab" href="#step4">Success</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-md-push-8">
<div class="row" id="side-header">
@ -126,6 +138,9 @@
</div>
<div class="col-lg-6 col-md-6 col-md-offset-2 col-md-pull-2 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0">
<div class="tab-content">
<div id="step1" class="tab-pane fade in active">
<div class="proposalBlock createProposal">
<div class="row">
<div class="col-xs-12">
@ -228,8 +243,8 @@
</div>
</div>
</div>
</div>
<div id="step2" class="tab-pane fade">
<div class="row walletCommands hidden" id="walletCommandsHeader">
<div class="col-xs-12">
<h2>Wallet Commands</h2>
@ -265,6 +280,9 @@
</div>
</div>
<div id="step3" class="tab-pane fade">
<div class="row walletCommands hidden" id="walletCommandsProgress">
<div class="col-xs-12">
@ -278,7 +296,8 @@
</div>
</div>
</div>
<div id="step4" class="tab-pane fade">
<div class="row walletCommands hidden" id="walletCommandsSubmit">
<div class="col-xs-12">
@ -292,6 +311,8 @@
</div>
</div>
</div>
</div>
</div>

View file

@ -28,6 +28,7 @@ function transactionListener(proposal) {
$.getJSON(provider + 'insight-api-dash/tx/' + txidfield.val(), function(data) {
txidfield.attr("disabled", true);
$('.walletCommands#walletCommandsProgress').removeClass('hidden');
document.getElementById('step_three').click();
var txid = data.tx;
var confirmations = data.confirmations;
var conftxt;
@ -126,6 +127,7 @@ function transactionListener(proposal) {
progbarval = 100;
$("#progresstxt").text("Your transaction has " + confirmations + " confirmations. You can now submit the proposal.");
$('.walletCommands#walletCommandsSubmit').removeClass('hidden');
document.getElementById('step_four').click();
}
$("#progressbar").progressbar({value: progbarval})
.children('.ui-progressbar-value')