Skip to content

Commit

Permalink
demo docs. input styles changed so placeholder value can be noticed
Browse files Browse the repository at this point in the history
  • Loading branch information
@dtaipov
dtaipov committed Mar 19, 2019
1 parent 5fcfbe9 commit eedda96
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 60 deletions.
49 changes: 19 additions & 30 deletions docs/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,17 @@
text-rendering: optimizeLegibility;
color: white;
}

.page_title {
color: rgb(85, 85, 85);
font-weight: bold;
margin-bottom: 15px;
}

.page {
display: none;
}
.page-active {
display: block;
}

.container {
display: grid;
grid-template-columns: 1fr 500px 1fr;
Expand Down Expand Up @@ -104,31 +101,26 @@
grid-template-rows: 200px 200px 50px auto;
grid-column-gap: 65px;
}

.menu {
grid-column: 1;
grid-row: 1 / 3;
display: grid;
margin-left: -60px;
}

.form {
grid-column: 2 / 4;
grid-row: 1;
}

.right_menu {
grid-column: 4;
grid-row: 1 / 3;
display: grid;
}

.run_request {
grid-column: 2;
grid-row: 3;
justify-self: end;
}

.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
Expand All @@ -140,15 +132,12 @@
font-weight: normal;
padding: 4px 6px 4px 6px;
}

.btn_run_request {
text-align: center;
}

.gap {
grid-column: 1 / 4;
}

.warning_bottom {
background-image: -moz-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
background-image: -webkit-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
Expand All @@ -159,12 +148,10 @@
color: white;
grid-column: 1 / 4;
}

.warning_bottom_divider {
background-color: rgb(209, 18, 80);
grid-column: 1 / 4;
}

.modal {
display: none;
position: fixed;
Expand All @@ -178,7 +165,6 @@
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
text-align: center;
font-size: 1.8rem;
Expand All @@ -188,16 +174,19 @@
padding: 20px;
border: 1px solid #888;
}

.form-label {
color: #006899;
display: inline-block;
width: 100px;
}

.form-input {
color: #b8b8b8;
border: none transparent;
border-radius: 2px;
border-style:solid;
border-width:1px;
width: 200px;
}
textarea {
border-radius: 2px;
}
</style>
</head>
Expand Down Expand Up @@ -251,30 +240,30 @@
<div class="page_title">Unlock</div>
<div class="form-group">
<label class="form-label" for="public_key_UNLOCK">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_UNLOCK">
<input class="form-input" type="text" name="public_key" id="public_key_UNLOCK">
</div>
<div class="form-group">
<label class="form-label">Unlock time:</label>
<input class="form-input param_field" type="number" placeholder="45" value="45" name="unlock_time">
<input class="form-input" type="number" placeholder="45" value="45" name="unlock_time">
</div>
</div>
<div class="page" id="page_sign_trx">
<div class="page_title">Sign transaction</div>
<div class="form-group">
<label class="form-label">Transaction:</label>
<input class="form-input param_field" type="text" value="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" placeholder="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" name="transaction">
<input class="form-input" type="text" value="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" placeholder="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" name="transaction">
</div>
<div class="form-group">
<label class="form-label">Blockchain type:</label>
<input class="form-input param_field" type="text" placeholder="ethereum" value="ethereum" name="blockchain_type">
<input class="form-input" type="text" placeholder="ethereum" value="ethereum" name="blockchain_type">
</div>
<div class="form-group">
<label class="form-label" for="public_key_SIGN_TRX">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_SIGN_TRX">
<input class="form-input" type="text" name="public_key" id="public_key_SIGN_TRX">
</div>
<div class="form-group">
<label class="form-label">Unlock time:</label>
<input class="form-input param_field" type="number" name="unlock_time" placeholder="45" readonly id="unlock_time_SIGN_TRX">
<input class="form-input" type="number" name="unlock_time" placeholder="45" readonly id="unlock_time_SIGN_TRX">
<input type="checkbox" id="checkbox_SIGN_TRX">
</div>
</div>
Expand All @@ -283,15 +272,15 @@
<div class="page_title">Sign hash</div>
<div class="form-group">
<label class="form-label">Hash:</label>
<input class="form-input param_field" type="text" value="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" placeholder="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" name="hash">
<input class="form-input" type="text" value="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" placeholder="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" name="hash">
</div>
<div class="form-group">
<label class="form-label">Sign type:</label>
<input class="form-input param_field" type="text" placeholder="VRS_canonical" value="VRS_canonical" name="sign_type">
<input class="form-input" type="text" placeholder="VRS_canonical" value="VRS_canonical" name="sign_type">
</div>
<div class="form-group">
<label class="form-label" for="public_key_SIGN_HASH">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_SIGN_HASH">
<input class="form-input" type="text" name="public_key" id="public_key_SIGN_HASH">
</div>
</div>
<div class="page" id="page_about">
Expand Down Expand Up @@ -367,7 +356,7 @@
const hash = window.location.hash.substr(1);
const el = document.getElementById('page_' + hash);

const inputs = el.getElementsByClassName('param_field');
const inputs = el.getElementsByClassName('form-input');
const params = {};
for (let i=0; i<inputs.length; i++) {
const name = inputs[i].getAttribute('name');
Expand All @@ -389,7 +378,7 @@
const hash = window.location.hash.substr(1);
const el = document.getElementById('page_' + hash);

const inputs = el.getElementsByClassName('param_field');
const inputs = el.getElementsByClassName('form-input');
for (let i=0; i<inputs.length; i++) {
const name = inputs[i].getAttribute('name');
if (!inputs[i].readOnly) {
Expand Down Expand Up @@ -418,7 +407,7 @@
event.preventDefault();
runRequest();
});
const inputs = document.getElementsByClassName('param_field');
const inputs = document.getElementsByClassName('form-input');
for (let i=0; i<inputs.length; i++) {
inputs[i].addEventListener('keyup', function() { onHash(false) });
inputs[i].addEventListener('change', function() { onHash(false) });
Expand Down
49 changes: 19 additions & 30 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,17 @@
text-rendering: optimizeLegibility;
color: white;
}

.page_title {
color: rgb(85, 85, 85);
font-weight: bold;
margin-bottom: 15px;
}

.page {
display: none;
}
.page-active {
display: block;
}

.container {
display: grid;
grid-template-columns: 1fr 500px 1fr;
Expand Down Expand Up @@ -104,31 +101,26 @@
grid-template-rows: 200px 200px 50px auto;
grid-column-gap: 65px;
}

.menu {
grid-column: 1;
grid-row: 1 / 3;
display: grid;
margin-left: -60px;
}

.form {
grid-column: 2 / 4;
grid-row: 1;
}

.right_menu {
grid-column: 4;
grid-row: 1 / 3;
display: grid;
}

.run_request {
grid-column: 2;
grid-row: 3;
justify-self: end;
}

.btn {
border-radius: 2px;
background-image: -moz-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
Expand All @@ -140,15 +132,12 @@
font-weight: normal;
padding: 4px 6px 4px 6px;
}

.btn_run_request {
text-align: center;
}

.gap {
grid-column: 1 / 4;
}

.warning_bottom {
background-image: -moz-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
background-image: -webkit-linear-gradient( -90deg, rgb(32,135,184) 0%, rgb(16,120,169) 47%, rgb(0,104,153) 100%);
Expand All @@ -159,12 +148,10 @@
color: white;
grid-column: 1 / 4;
}

.warning_bottom_divider {
background-color: rgb(209, 18, 80);
grid-column: 1 / 4;
}

.modal {
display: none;
position: fixed;
Expand All @@ -178,7 +165,6 @@
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
text-align: center;
font-size: 1.8rem;
Expand All @@ -188,16 +174,19 @@
padding: 20px;
border: 1px solid #888;
}

.form-label {
color: #006899;
display: inline-block;
width: 100px;
}

.form-input {
color: #b8b8b8;
border: none transparent;
border-radius: 2px;
border-style:solid;
border-width:1px;
width: 200px;
}
textarea {
border-radius: 2px;
}
</style>
</head>
Expand Down Expand Up @@ -251,30 +240,30 @@
<div class="page_title">Unlock</div>
<div class="form-group">
<label class="form-label" for="public_key_UNLOCK">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_UNLOCK">
<input class="form-input" type="text" name="public_key" id="public_key_UNLOCK">
</div>
<div class="form-group">
<label class="form-label">Unlock time:</label>
<input class="form-input param_field" type="number" placeholder="45" value="45" name="unlock_time">
<input class="form-input" type="number" placeholder="45" value="45" name="unlock_time">
</div>
</div>
<div class="page" id="page_sign_trx">
<div class="page_title">Sign transaction</div>
<div class="form-group">
<label class="form-label">Transaction:</label>
<input class="form-input param_field" type="text" value="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" placeholder="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" name="transaction">
<input class="form-input" type="text" value="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" placeholder="eb0885098bca5a00825208948ec6977b1255854169e5f9f8f163f371bcf1ffd287038d7ea4c6800080038080" name="transaction">
</div>
<div class="form-group">
<label class="form-label">Blockchain type:</label>
<input class="form-input param_field" type="text" placeholder="ethereum" value="ethereum" name="blockchain_type">
<input class="form-input" type="text" placeholder="ethereum" value="ethereum" name="blockchain_type">
</div>
<div class="form-group">
<label class="form-label" for="public_key_SIGN_TRX">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_SIGN_TRX">
<input class="form-input" type="text" name="public_key" id="public_key_SIGN_TRX">
</div>
<div class="form-group">
<label class="form-label">Unlock time:</label>
<input class="form-input param_field" type="number" name="unlock_time" placeholder="45" readonly id="unlock_time_SIGN_TRX">
<input class="form-input" type="number" name="unlock_time" placeholder="45" readonly id="unlock_time_SIGN_TRX">
<input type="checkbox" id="checkbox_SIGN_TRX">
</div>
</div>
Expand All @@ -283,15 +272,15 @@
<div class="page_title">Sign hash</div>
<div class="form-group">
<label class="form-label">Hash:</label>
<input class="form-input param_field" type="text" value="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" placeholder="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" name="hash">
<input class="form-input" type="text" value="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" placeholder="fe5e4a8974715e20f47c8bb609547c9e66b0b9e31d521199b3d8d6af6da74cb1" name="hash">
</div>
<div class="form-group">
<label class="form-label">Sign type:</label>
<input class="form-input param_field" type="text" placeholder="VRS_canonical" value="VRS_canonical" name="sign_type">
<input class="form-input" type="text" placeholder="VRS_canonical" value="VRS_canonical" name="sign_type">
</div>
<div class="form-group">
<label class="form-label" for="public_key_SIGN_HASH">Public key:</label>
<input class="form-input param_field" type="text" name="public_key" id="public_key_SIGN_HASH">
<input class="form-input" type="text" name="public_key" id="public_key_SIGN_HASH">
</div>
</div>
<div class="page" id="page_about">
Expand Down Expand Up @@ -367,7 +356,7 @@
const hash = window.location.hash.substr(1);
const el = document.getElementById('page_' + hash);

const inputs = el.getElementsByClassName('param_field');
const inputs = el.getElementsByClassName('form-input');
const params = {};
for (let i=0; i<inputs.length; i++) {
const name = inputs[i].getAttribute('name');
Expand All @@ -389,7 +378,7 @@
const hash = window.location.hash.substr(1);
const el = document.getElementById('page_' + hash);

const inputs = el.getElementsByClassName('param_field');
const inputs = el.getElementsByClassName('form-input');
for (let i=0; i<inputs.length; i++) {
const name = inputs[i].getAttribute('name');
if (!inputs[i].readOnly) {
Expand Down Expand Up @@ -418,7 +407,7 @@
event.preventDefault();
runRequest();
});
const inputs = document.getElementsByClassName('param_field');
const inputs = document.getElementsByClassName('form-input');
for (let i=0; i<inputs.length; i++) {
inputs[i].addEventListener('keyup', function() { onHash(false) });
inputs[i].addEventListener('change', function() { onHash(false) });
Expand Down

0 comments on commit eedda96

Please sign in to comment.