Merge pull request #13 from hunterlester/development

UI Adjustments
This commit is contained in:
snogcel 2016-12-07 20:09:48 -07:00 committed by GitHub
commit 4b4c5dd273
4 changed files with 265 additions and 165 deletions

View file

@ -1,5 +1,6 @@
body {
background-image: url("../images/background.png");
font-family: 'Roboto', sans-serif;
}
textarea {
@ -26,8 +27,16 @@ i.fa {
font-weight: 600;
}
.input-spacing {
margin: 5%;
}
.progress {
margin-top: 2%;
}
.proposalBlock {
margin-top: 6%;
/*margin-top: 6%;*/
padding: 7%;
background-color: #ffffff;
box-shadow: 0px 17px 24px 0px rgba(0, 0, 0, 0.16);
@ -68,6 +77,36 @@ i.fa {
width: 20%;
}
#side-header {
margin-top: 40%;
}
#side_header_description {
margin: 20% 0% 20% 0%;
}
#proposal_link {
font-weight: 600;
}
@media (max-width: 992px) {
#side-header {
margin-top: 4%;
}
.proposalBlock {
margin-top: 0%;
}
.header_description {
margin: 1% 0% 1% 0%;
}
#side_header_description {
margin: 1% 0% 1% 0%;
}
}
#walletCommandsHeader {
margin-top:2em;
}

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -2,8 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dash Governance Tools</title>
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="bitcore-lib-dash.js"></script>
<script src="vendor/jquery/jquery-3.1.1.min.js"></script>
@ -19,7 +23,6 @@
<link rel="stylesheet" href="css/master.css">
<script src="js/proposalGenerator.js"></script>
<script src="js/paymentCycle.js"></script>
<script src="js/txListener.js"></script>
<script src="js/transactionListener.js"></script>
<script src="js/formHandler.js"></script>
@ -76,9 +79,14 @@
var validProposal = proposal.validate();
if (validProposal) {
document.getElementById('step_two').click();
document.getElementsByClassName('progress-bar')[0].style.width = "50%";
document.getElementsByClassName('progress-bar')[0].innerText = "Generated wallet commands";
proposal.walletCommands();
transactionListener(proposal);
$('#btnEdit').click(function() {
proposal.createProposal();
});
@ -104,9 +112,7 @@
txListener.initSocket();
}
});
});
});
</script>
@ -115,191 +121,237 @@
<div class="container-fluid">
<div class="row" id="header">
<div class="col-sm-2">
<div class="col-md-2">
<img src="images/dash_logo.png" alt="dash governance tools">
</div>
<div class="col-sm-4">
<h2 class="header_title">Dash Budget Proposal Generator</h2>
<h5 class="header_description">Generate budget proposal commands you can copy/paste into your Dash wallet to prepare a budget proposal and submit it to the network.</h5>
<div class="col-md-4">
</div>
<div class="col-sm-4 col-sm-offset-2 text-right">
<!-- -->
<!-- -->
<!-- Social icons commented out until we get URIs -->
<!-- -->
<!-- <div class="col-md-4 col-md-offset-2 text-right">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
<img id="lang_box" src="images/lang.png" alt="english language">
</div>
</div> -->
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="proposalBlock createProposal">
<div class="row">
<div class="col-xs-12">
<div class="row" id="createProposalHeader">
<div class="col-xs-12">
<h1 class="removeMargin">Create a Proposal</h1>
<h5 class="header_description">Enter details for your proposal and click 'Create Proposal'. This will generate a command you can run in your local wallet to prepare the proposal at a cost of 0.33 Dash</h5>
</div>
</div>
<div class="col-xs-12">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%">
Create proposal
</div>
</div>
<ul class="nav nav-pills">
<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">Complete</a></li>
</ul>
</div>
</div>
<div id="createProposalForm">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="name">Proposal Name:</label>
<input type="text" class="form-control" id="name" value="" placeholder="proposal-name">
</div>
<div class="form-group">
<label for="url">Proposal Description URL:</label>
<input type="text" class="form-control" id="url" value="" placeholder="https://www.dashcentral.org/p/proposal-name">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-md-push-8">
<div class="row" id="side-header">
<div class="col-xs-12">
<div >
<h3 class="header_title">Dash Budget Proposal</h3>
<p id="side_header_description" class="header_description">Generate budget proposal commands you can copy/paste into your Dash wallet to prepare a budget proposal and submit it to the network.</p>
<a href="#"><h5 id="proposal_link">Proposal Generator</h5></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label for="start_epoch">Start Date:</label>
<select name="start_epoch" class="form-control" id="start_epoch"></select>
</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">
<div class="row" id="createProposalHeader">
<div class="col-xs-12">
<h1 class="removeMargin">Create a Proposal</h1>
<h5 class="header_description">Enter details for your proposal and click 'Create Proposal'. This will generate a command you can run in your local wallet to prepare the proposal at a cost of 0.33 Dash</h5>
</div>
</div>
<div class="col-xs-3">
<div id="createProposalForm">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="name">Proposal Name:</label>
<input type="text" class="form-control" id="name" value="" placeholder="proposal-name">
</div>
<div class="form-group">
<label for="url">Proposal Description URL:</label>
<input type="text" class="form-control" id="url" value="" placeholder="https://www.dashcentral.org/p/proposal-name">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label for="start_epoch">Start Date:</label>
<select name="start_epoch" class="form-control" id="start_epoch"></select>
</div>
</div>
<div class="col-xs-3">
<!-- -->
<!-- -->
<!-- ATTENTION: COMMENT FOR JON -->
<!-- -->
<!-- -->
<!-- The following form group is a placeholder for proposal end time. Please change to the correct id. -->
<div class="form-group">
<label for="start_epoch">Number of Payments:</label>
<select name="start_epoch" class="form-control" id="end_epoch"></select>
</div>
<!-- -->
<!-- -->
<!-- -->
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="payment_address">Payment Address:</label>
<input type="text" class="form-control" id="payment_address" value="" placeholder="">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label for="payment_amount">Monthly Payment Amount in Dash:</label>
<input type="text" class="form-control" id="payment_amount" value="" placeholder="0">
</div>
</div>
<div class="col-xs-4">
<input type="submit" class="btn btn-success" id="btnPrepare" value="Create Proposal">
<div class="input-spacing">
<input type="submit" class="btn btn-primary hidden" id="btnEdit" value="Edit Proposal">
</div>
<div class="input-spacing">
<input type="submit" class="btn btn-primary hidden" id="btnNew" value="New Proposal">
</div>
</div>
</div>
<div class="form-group" style="display:none;">
<label for="type">type:</label>
<input type="text" class="form-control" id="type" value="1" placeholder="1">
</div>
<div class="form-group" style="display:none;">
<label for="parentHash">parent-hash:</label>
<input type="text" class="form-control" id="parentHash" value="0" placeholder="0">
</div>
<div class="form-group" style="display:none;">
<label for="revision">revision:</label>
<input type="text" class="form-control" id="revision" value="1" placeholder="1">
</div>
<div class="form-group" style="display:none;">
<label for="time">Creation Time:</label>
<input type="text" class="form-control" id="time" value="" placeholder="">
</div>
<!-- -->
<!-- -->
<!-- -->
<!-- ATTENTION: COMMENT FOR JON -->
<!-- -->
<!-- -->
<!-- The following form group is a placeholder for proposal end time. Please change to the correct id. -->
<div class="form-group">
<label for="start_epoch">End Date:</label>
<select name="start_epoch" class="form-control" id="end_epoch"></select>
</div>
<!-- -->
<!-- -->
<!-- -->
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="payment_address">Payment Address:</label>
<input type="text" class="form-control" id="payment_address" value="" placeholder="">
</div>
<!-- The following form group is commented out because it's not a part of the design mock. Staying here for safe keeping just in case still needed. -->
<!-- <div class="form-group">
<label for="end_epoch">Choose payment cycle:</label>
<select name="end_epoch" class="form-control" id="end_epoch"></select>
</div> -->
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label for="payment_amount">Monthly Payment Amount in Dash:</label>
<input type="text" class="form-control" id="payment_amount" value="" placeholder="0">
</div>
</div>
<div class="col-xs-4 col-xs-offset-1">
<div type="submit" class="btn btn-success" id="btnPrepare">Create Proposal</div>
<div type="submit" class="btn btn-primary hidden" id="btnEdit">Edit Proposal</div>
<div type="submit" class="btn btn-primary hidden" id="btnNew">New Proposal</div>
</div>
</div>
<div class="form-group" style="display:none;">
<label for="type">type:</label>
<input type="text" class="form-control" id="type" value="1" placeholder="1">
</div>
<div class="form-group" style="display:none;">
<label for="parentHash">parent-hash:</label>
<input type="text" class="form-control" id="parentHash" value="0" placeholder="0">
</div>
<div class="form-group" style="display:none;">
<label for="revision">revision:</label>
<input type="text" class="form-control" id="revision" value="1" placeholder="1">
</div>
<div class="form-group" style="display:none;">
<label for="time">Creation Time:</label>
<input type="text" class="form-control" id="time" value="" placeholder="">
</div>
<!-- -->
<!-- -->
<!-- -->
<!-- ATTENTION: COMMENT FOR JON -->
<!-- The following form group is commented out because it's not a part of the design mock. Staying here for safe keeping just in case still needed. -->
<!-- <div class="form-group">
<label for="end_epoch">Choose payment cycle:</label>
<select name="end_epoch" class="form-control" id="end_epoch"></select>
</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>
</div>
</div>
<div class="row walletCommands hidden" id="walletCommandsPrepare">
<div class="col-xs-12">
<div class="form-group">
<label for="prepareProposal">Prepare-Proposal Command:</label>
<div>Paste this proposal command into your Dash wallet console to spend a Fee transaction of 0.33 DASH.</div>
<textarea readonly class="form-control" id="prepareProposal" rows="4" placeholder=""></textarea>
</div>
</div>
</div>
<div class="row walletCommands hidden" id="walletCommandsTx">
<div class="col-xs-12">
<div class="form-group">
<label for="feeTxid">Fee Transaction ID:</label>
<div>Paste the transaction ID returned by the wallet below to generate the final submit command.</div>
<input type="text" class="form-control" id="feeTxid" value="" placeholder="<fee-txid>">
</div>
</div>
</div>
</div>
<div id="step3" class="tab-pane fade">
<div class="row walletCommands hidden" id="walletCommandsProgress">
<div class="col-xs-12">
<div class="form-group">
<label for="feeTxid">Fee Transaction Progress:</label>
<div id="progresstxt">We'll wait for 6 confirmations. Waiting for new blocks to confirm...</div>
<div id="progressbar"></div>
</div>
</div>
</div>
</div>
<div id="step4" class="tab-pane fade">
<div class="row walletCommands hidden" id="walletCommandsSubmit">
<div class="col-xs-12">
<div class="form-group">
<label for="submitProposal">Submit Proposal Command:</label>
<div>Paste the Fee TX id to generate the proposal submit command. This is the final step and can be completed after 6 confirmations on the fee tx.</div>
<textarea readonly class="form-control" id="submitProposal" rows="4" placeholder=""></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="row walletCommands hidden" id="walletCommandsHeader">
<div class="col-xs-12">
<h2>Wallet Commands</h2>
</div>
</div>
<div class="row walletCommands hidden" id="walletCommandsPrepare">
<div class="col-xs-12">
<div class="form-group">
<label for="prepareProposal">Prepare-Proposal Command:</label>
<div>Paste this proposal command into your Dash wallet console to spend a Fee transaction of 0.33 DASH.</div>
<textarea readonly class="form-control" id="prepareProposal" rows="4" placeholder=""></textarea>
</div>
</div>
</div>
<div class="row walletCommands" id="walletCommandsTx">
<div class="col-xs-12">
<div class="form-group">
<label for="feeTxid">Fee Transaction ID:</label>
<div>Paste the transaction ID returned by the wallet below to generate the final submit command.</div>
<input type="text" class="form-control" id="feeTxid" value="" placeholder="<fee-txid>">
</div>
</div>
</div>
<div class="row walletCommands" id="walletCommandsProgress">
<div class="col-xs-12">
<div class="form-group">
<label for="feeTxid">Fee Transaction Progress:</label>
<div id="progresstxt">We'll wait for 6 confirmations. Waiting for new blocks to confirm...</div>
<div id="progressbar"></div>
</div>
</div>
</div>
<div class="row walletCommands hidden" id="walletCommandsSubmit">
<div class="col-xs-12">
<div class="form-group">
<label for="submitProposal">Submit Proposal Command:</label>
<div>Paste the Fee TX id to generate the proposal submit command. This is the final step and can be completed after 6 confirmations on the fee tx.</div>
<textarea readonly class="form-control" id="submitProposal" rows="4" placeholder=""></textarea>
</div>
</div>
</div>
</div>
</div>
</div>

View file

@ -31,6 +31,11 @@ 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();
document.getElementsByClassName('progress-bar')[0].style.width = "75%";
document.getElementsByClassName('progress-bar')[0].innerText = "Awaiting network confirmations...";
var txid = data.tx;
var confirmations = data.confirmations;
var conftxt;
@ -129,6 +134,10 @@ 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();
document.getElementsByClassName('progress-bar')[0].style.width = "100%";
document.getElementsByClassName('progress-bar')[0].innerText = "Success";
}
$("#progressbar").progressbar({value: progbarval})
.children('.ui-progressbar-value')