From 21bc8e1540407a86065335212d55bfafaf577ac8 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Fri, 9 Sep 2016 21:00:33 -0400
Subject: [PATCH] feat: add new items at the top instead of at the bottom

---
 app.js    | 11 +++--------
 style.css |  3 ++-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app.js b/app.js
index 7f03dfc..1fbd645 100644
--- a/app.js
+++ b/app.js
@@ -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() {
diff --git a/style.css b/style.css
index 6ae59aa..ad8b513 100644
--- a/style.css
+++ b/style.css
@@ -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;