From bc432d3dbcf6d5549f6938c559644f323eafe2f7 Mon Sep 17 00:00:00 2001
From: dennisdebel <dennisdebel@gmail.com>
Date: Thu, 21 May 2015 14:58:00 +0200
Subject: [PATCH] stylable nodes,hops info, minor esthetics

---
 web/index.html |  3 +--
 web/main.js    |  4 ++--
 web/style.css  | 56 ++++++++++++++++++++++----------------------------
 3 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/web/index.html b/web/index.html
index 996cb60..90578ac 100755
--- a/web/index.html
+++ b/web/index.html
@@ -50,10 +50,9 @@
 
   </div>
 
-  <div id="overview-page">
+  <div id="overview-page"><br>
     <div class="messages">
       <ul id="inbox"></ul>
-lol
       <ul id="outbox"></ul>
     </div>
     <div id="input-footer">
diff --git a/web/main.js b/web/main.js
index 3587d2c..a6be76e 100644
--- a/web/main.js
+++ b/web/main.js
@@ -203,8 +203,8 @@ var localStorageArray = [];
       '<div class="date-sender">On ' + datereadable +
       ' <b>' + orderStorage[i].user +'</b> wrote:</div>' +
       '<div class="message-text">' + parseEmoticons( orderStorage[i].message ) + '</div>' + //parseEmoticons is found in emoji.js
-      ' <span class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</span>' +
-      ' <span class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</span></div></li>';
+      ' <div class="nodehops"><div class="node '+orderStorage[i].node+'">from '+orderStorage[i].alias + '</div>' +
+      ' <div class="hops '+orderStorage[i].hops+'">via '+orderStorage[i].hops+' nodes</div></div></div></li>';
   }
   document.getElementById( 'inbox' ).innerHTML = contentString;
 }
diff --git a/web/style.css b/web/style.css
index 8fb1e41..f9b8ec2 100755
--- a/web/style.css
+++ b/web/style.css
@@ -66,7 +66,7 @@ body{
     image-rendering: optimize-contrast;
     -ms-interpolation-mode: nearest-neighbor;
   }
-}
+
 
 img.photo-message{
   /* disable anti aliasing */
@@ -81,6 +81,7 @@ img.photo-message{
 }
 
 .photo-message{ /* rounded corner imgs on desktop...*/
+    padding:30px;
     width:100%;
     height:100%;
     overflow:hidden;
@@ -98,11 +99,20 @@ img.photo-message{
     border-bottom-left-radius:123px;
   }
 
+}
+
+
+
 img.emo {
   width: 22px;
   height: 22px;
 }
 
+p.text-message{
+padding: 30px;
+padding-top: 40px;
+}
+
 #input-footer{
 position: fixed;
 top:0px;
@@ -410,16 +420,13 @@ hr{
   background:#fff;
 }
 
-
-
-
-.node {
-  font-size:10px;
-  margin-top:-30px;
-  display: none;
+.nodehops{
   position: absolute;
-  word-wrap:break-word;
-  overflow: visible;
+  float: right;
+  right:20px;
+  text-align: right;
+  padding: 4px;
+  margin-top:-60px;
   -moz-box-shadow:0 0 23px #bbb;
   -webkit-box-shadow:0 0 23px #bbb;
   box-shadow:0 0 23px #bbb;
@@ -436,41 +443,26 @@ hr{
   border-bottom-right-radius:123px;
   border-bottom-left-radius:123px;
   background:#fff;
+
 }
-.hops {
-    display: none;
+
+.node, .hops {
   font-size:10px;
-  //padding: 10px;
-  margin-top:-30px;
-  position: absolute;
+  display: inline-block;
   word-wrap:break-word;
   overflow: visible;
-  -moz-box-shadow:0 0 23px #bbb;
-  -webkit-box-shadow:0 0 23px #bbb;
-  box-shadow:0 0 23px #bbb;
-  -webkit-border-top-left-radius:123px;
-  -webkit-border-top-right-radius:123px;
-  -webkit-border-bottom-right-radius:123px;
-  -webkit-border-bottom-left-radius:123px;
-  -moz-border-radius-bottomright:123px;
-  -moz-border-radius-bottomleft:123px;
-  -moz-border-top-left-radius:123px;
-  -moz-border-top-right-radius:123px;
-  border-top-left-radius:123px;
-  border-top-right-radius:123px;
-  border-bottom-right-radius:123px;
-  border-bottom-left-radius:123px;
-  background:#fff;
+  
 }
 
 
 .message-text {
   font-size: 25px;
 }
+
 .date-sender {
   position: absolute;
   font-size: 15px;
-
+  padding: 4px;
   word-wrap:break-word;
   overflow: visible;
   -moz-box-shadow:0 0 23px #bbb;