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

3
style.css
View file

@ -3,6 +3,7 @@ body {
margin: 0;
box-sizing: border-box;
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-color: hsl(208, 73%, 43%);
color: white;
@ -66,7 +67,7 @@ a {
.blockDivider {
display: block;
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;
color: rgba(0,0,0,0);
text-align: center;