[Issue #309] changes layout of the elements

data/collusion.js

@@ -304,8 +304,8 @@ function updateStatsBar(){
         dateSince = new Date(allConnections[0][2]).toDateString();
     }
     document.querySelector(".top-bar .date-gathered").innerHTML = dateSince;
-    document.querySelector(".top-bar .third-party-sites").innerHTML = aggregate.thirdnodes.length;
-    document.querySelector(".top-bar .first-party-sites").innerHTML = aggregate.allnodes.length - aggregate.thirdnodes.length;
+    document.querySelector(".top-bar .third-party-sites").innerHTML = aggregate.thirdnodes.length + " THIRD PARTY SITES"; 
+    document.querySelector(".top-bar .first-party-sites").innerHTML = (aggregate.allnodes.length - aggregate.thirdnodes.length) + " SITES";
     statsBarInitiated = true;
 }
 
@@ -321,6 +321,5 @@ function generateCollusionPageUrl(siteUrl){
     if ( siteUrl ){
         href.push(siteUrl);
     }
-    console.log(href);
     return href;
 }

data/index.html

@@ -66,16 +66,18 @@
 		<div class="content-flex">
 			<div class="top-bar">
                 <div class="stats-section">
-                    DATA HAS GATHERED SINCE 
-                    <div class="stat date-gathered">
-                    </div>
-                     AND YOU VISITED
-                    <div class="stat first-party-sites">
-                    </div>
-                     WEBSITES AND CONNECTED TO 
-    				<div class="stat third-party-sites">
-    				</div>
-                     THRID PARTY WEBSITES
+                    <section>
+                        <span class="context-label">DATA GATHERED SINCE </span>
+                        <div class="stat date-gathered"></div>
+                    </section>
+                    <section>
+                        <span class="context-label">YOU HAVE VISITED</span>
+                        <div class="stat first-party-sites"></div>
+                    </section>
+                    <section>
+                        <span class="context-label">YOU HAVE CONNECTED WITH</span>
+                        <div class="stat third-party-sites"></div>
+                    </section>
                 </div>
                 <div class="sharing-section">
                     <div class="label">SHARING DATA</div>

data/style.css

@@ -251,18 +251,26 @@ h3 {
 }
 
 .top-bar{
-    height: 60px;
     background-color:#fff;
     flex:none;
     padding: 10px;
-    font-size: 9px;
+    font-size: 10px;
 }
 
 .stats-section{
     float: left;
     color: #707070;
     width: 80%;
-    padding-top: 10px;
+}
+
+.stats-section section{
+    float: left;
+    margin-right: 20px;
+}
+
+.stats-section .context-label{
+    display: block;
+    font-weight: bold;
 }
 
 .sharing-section{
@@ -548,7 +556,7 @@ h3 {
 
 .stage{
     flex: 1;
-    margin: 20px 0px;
+    /*margin: 20px 0px;*/
 }
 .showinfo .stage-stack{
     /*margin-right: 300px;*/
@@ -776,7 +784,7 @@ text {
 .breadcrumb{
     display: inline-block;
     overflow: hidden;
-    margin-bottom: 20px;
+    margin-bottom: 5px;
 }
 
 .breadcrumb .breadcrumb-chunk{
@@ -934,6 +942,10 @@ text {
     flex: none;
 }
 
+.list-footer{
+    margin-top: 50px;
+}
+
 .legend-header{
     overflow: hidden;
     border-bottom: 1px solid #fff;