joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-27 01:36:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add new items at the top instead of at the bottom

Browse source
This commit is contained in:
Joshua Seigler 2016-09-09 21:00:33 -04:00
parent 9132463310
commit 21bc8e1540
2 changed files with 5 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app.js
View file

@ -1,6 +1,7 @@
'use strict'; 'use strict';
var socket = io("https://blockchain.masternode.io/"); var socket = io("https://blockchain.masternode.io/");
var transactionList = document.getElementById('transactionList');
function playSound(url){ function playSound(url){
var audio = document.createElement('audio'); var audio = document.createElement('audio');
@ -14,10 +15,6 @@ function playSound(url){
document.body.appendChild(audio); document.body.appendChild(audio);
} }
function scrollToEnd() {
window.scrollTo(0,document.body.scrollHeight);
}
var onTransaction = function(data) { var onTransaction = function(data) {
console.log(data); console.log(data);
playSound('assets/bell.mp3'); playSound('assets/bell.mp3');
@ -44,8 +41,7 @@ var onTransaction = function(data) {
txOut.title = (value[Object.keys(value)[0]] * 0.00000001); txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
txOutputs.appendChild(txOut); txOutputs.appendChild(txOut);
}); });
document.getElementById('transactionList').appendChild(tx); transactionList.insertBefore(tx, transactionList.firstChild);
scrollToEnd();
}; };
var onBlock = function(data) { var onBlock = function(data) {
@ -57,8 +53,7 @@ var onBlock = function(data) {
newBlock.target = '_blank'; newBlock.target = '_blank';
newBlock.setAttribute('rel', 'noopener'); newBlock.setAttribute('rel', 'noopener');
newBlock.appendChild(document.createTextNode(data)); newBlock.appendChild(document.createTextNode(data));
document.getElementById('transactionList').appendChild(newBlock); transactionList.insertBefore(newBlock, transactionList.firstChild);
scrollToEnd();
}; };
socket.on('connect', function() { socket.on('connect', function() {

3
style.css
View file

@ -3,6 +3,7 @@ body {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: sans-serif; font-family: sans-serif;
font-size: 140%;
background-image: linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%)); background-image: linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%));
background-color: hsl(208, 73%, 43%); background-color: hsl(208, 73%, 43%);
color: white; color: white;
@ -66,7 +67,7 @@ a {
.blockDivider { .blockDivider {
display: block; display: block;
margin: -2em -1em 1em; margin: -2em -1em 1em;
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.125)); background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.125));
padding: 2.5em 1em 0; padding: 2.5em 1em 0;
color: rgba(0,0,0,0); color: rgba(0,0,0,0);
text-align: center; text-align: center;