From f7397f57343364f4f58064f4c278d0064d10d0f3 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Fri, 24 Jan 2014 16:50:59 -0300
Subject: [PATCH] modified navbar to support small device. responsive fix for
 homepage

---
 public/css/common.css           | 84 ++++++++++++++++++++-------------
 public/js/controllers/header.js |  2 +-
 public/views/header.html        | 49 ++++++++++---------
 public/views/index.html         | 27 +++++------
 4 files changed, 91 insertions(+), 71 deletions(-)

diff --git a/public/css/common.css b/public/css/common.css
index cede077..d97d6c8 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -1,13 +1,3 @@
-.insight {
-  color: #FFFFFF !important;
-  font-family: 'Ubuntu', sans-serif;
-  font-size: 34px;
-  font-style: italic;
-  font-weight: 400;
-  line-height: 25px;
-  margin-right: 50px;
-}
-
 /* Sticky footer styles
 -------------------------------------------------- */
 html,
@@ -46,18 +36,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .navbar-default {
   background-color: #8DC429;
   border-bottom: 4px solid #64920F;
-  color: #fff;
-  min-height: 60px;
-  padding: 0;
 }
 
-.navbar-form { margin: 12px 0; }
-
 .navbar-default .navbar-nav>li>a {
   color: #F4FBE8;
   font-family: 'Ubuntu', sans-serif;
-  font-size: 16px;
-  line-height: 28px;
 }
 
 .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li>a:hover  {
@@ -68,6 +51,37 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   color: #373D42;
 }
 
+.navbar-form .form-group {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .navbar-form {
+    width: 35%;
+  }
+}
+
+@media (max-width: 768px) {
+  .status {
+    margin: 0 14px !important;
+  }
+}
+
+.insight {
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 34px;
+  font-style: italic;
+  font-weight: 400;
+}
+
+.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
+  color: #fffffe;
+}
+
+.navbar-default .navbar-brand {
+  color: #FFFFFF;
+}
+
 .navbar-form .form-control {
   background-color: #7CAD23;
   border-radius: 3px;
@@ -82,24 +96,21 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 #search {
   color: #fff;
   font-family: 'Ubuntu', sans-serif;
-  font-weight: 100;
 }
 
 #search::-webkit-input-placeholder {
   color: #BCDF7E;
   font-family: 'Ubuntu', sans-serif;
-  font-size: 15px;
+  font-size: 14px;
   font-style: italic;
   font-weight: 100;
-  line-height: 20px;
 }
 
 #search::-moz-placeholder {
   color: #BCDF7E;
   font-family: 'Ubuntu', sans-serif;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 100;
-  line-height: 20px;
 }
 
 .status {
@@ -107,24 +118,30 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   -webkit-border-radius: 3px;
   background-color: #597338;
   border-radius: 3px;
-  float: right;
-  font-weight: 300;
-  margin: 11px 0;
-  padding: 8px 15px;
+  margin: 8px 0;
+  padding: 8px 10px;
+  font-size: 12px;
+  color: #eee;
+  text-align: center;
 }
 
-.status i { margin: 0 5px; }
+.status .tooltip {
+  margin: 0;
+}
 
 .col-gray {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background-color: #F4F4F4;
   border-radius: 5px;
-  margin-top: 21px;
   padding: 15px;
   width: 267px;
 }
 
+.col-gray-responsive {
+  width: auto;
+}
+
 .ellipsis {
   display: block;
   overflow: hidden;
@@ -218,8 +235,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .progress-bar-info { background-color: #8DC429; }
 
-#home .col-gray { width: 100%; }
-
 /* Set the fixed height of the footer here */
 #footer {
   background-color: #373D42;
@@ -232,6 +247,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 #footer a.insight {
   font-size: 20px;
   text-decoration: none;
+  color: #fff;
+}
+
+#footer a.insight:hover {
+  color: #fffffe;
 }
 
 #footer a.insight small { font-size: 11px; }
@@ -261,8 +281,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .address { font-size: 11px; }
 
-#search { width: 300px; }
-
 .no_matching {
   background-color: #FFFFFF;
   border: 2px solid #64920F;
@@ -323,8 +341,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 
 .status .t {
   color: white;
-  display: inline-block;
-  padding:0px 5px;
 }
 
 .status .text-danger { background: red; }
diff --git a/public/js/controllers/header.js b/public/js/controllers/header.js
index 0fc60c8..0e539fa 100755
--- a/public/js/controllers/header.js
+++ b/public/js/controllers/header.js
@@ -33,5 +33,5 @@ angular.module('insight.system').controller('HeaderController',
   });
 
 
-  $scope.isCollapsed = false;
+  $scope.isCollapsed = true;
 });
diff --git a/public/views/header.html b/public/views/header.html
index ffe876f..eea5638 100755
--- a/public/views/header.html
+++ b/public/views/header.html
@@ -1,36 +1,41 @@
 <div class="container">
   <div data-ng-controller="HeaderController">
     <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" data-ng-click="isCollapsed = !isCollapsed">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
       <a class="insight navbar-brand" href="/">Insight</a>
     </div>
+    <div class="navbar-collapse collapse" collapse="isCollapsed">
       <ul class="nav navbar-nav">
         <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" data-ng-class="{active: $uiRoute}">
           <a href="/{{item.link}}">{{item.title}}</a>
         </li>
       </ul>
-      <div data-ng-controller="SearchController">
-        <form class="navbar-form navbar-left" role="search" data-ng-submit="search()">
-          <div class="form-group" data-ng-class="{'has-error': badQuery}">
-            <input id="search" type="text" class="form-control" data-ng-model="q" placeholder="Search for block, transaction or address">
-          </div>
-          <div class="no_matching text-danger" data-ng-show="badQuery">No matching records found!</div>
-        </form>
-      </div>
+      <form data-ng-controller="SearchController" class="navbar-form navbar-left" role="search" data-ng-submit="search()">
+        <div class="form-group" data-ng-class="{'has-error': badQuery}">
+          <input id="search" type="text" class="form-control" data-ng-model="q" placeholder="Search for block, transaction or address">
+        </div>
+        <div class="no_matching text-danger" data-ng-show="badQuery">No matching records found!</div>
+      </form>
+      <ul class="nav navbar-nav navbar-right">
+        <li>
       <div class="status" data-ng-controller="StatusController">
-        <span  data-ng-init="getSync()">
-          <div class="t text-danger"  data-ng-show="sync.error" tooltip="{{sync.error}}" tooltip-placement="bottom"> ERROR </div>
-          <div class="t text-warning " tooltip="{{sync.syncedBlocks}} /  {{sync.blockChainHeight}} synced. {{sync.skippedBlocks}} skipped" tooltip-placement="bottom" data-ng-show="sync.status==='syncing'"> {{sync.status}} {{sync.syncPercentage}}%</div>
-          <div class="t text-default" tooltip="Historic sync finished" tooltip-placement="bottom" data-ng-show="sync.status==='finished'"> On sync</div>
-          </span>
-        </span>
-        <span  data-ng-init="getStatus('Info')">
-          <i class="small">
-            <strong> Conn: </strong> {{info.connections}}
-          </i>
-          <i class="small">
-            <strong>Height:</strong> {{totalBlocks || info.blocks}}
-          </i>
-        </span>
+        <a href="#" data-ng-init="getSync()">
+          <span class="t text-danger"  data-ng-show="sync.error" tooltip="{{sync.error}}" tooltip-placement="bottom"> ERROR </span>
+          <span class="t text-warning " tooltip="{{sync.syncedBlocks}} /  {{sync.blockChainHeight}} synced. {{sync.skippedBlocks}} skipped" tooltip-placement="bottom" data-ng-show="sync.status==='syncing'"> {{sync.status}} {{sync.syncPercentage}}%</span>
+          <span class="t text-default" tooltip="Historic sync finished" tooltip-placement="bottom" data-ng-show="sync.status==='finished'"> On sync</span>
+        </a> &middot; 
+        <span data-ng-init="getStatus('Info')">
+          <strong>Conn</strong> {{info.connections}}
+        </span> &middot; 
+        <strong>Height</strong> {{totalBlocks || info.blocks}}
       </div>
+      </li>
+      </ul>
+    </div>
   </div>
 </div>
diff --git a/public/views/index.html b/public/views/index.html
index f07e0f5..2185213 100644
--- a/public/views/index.html
+++ b/public/views/index.html
@@ -4,16 +4,16 @@
 <section data-ng-controller="IndexController" data-ng-init="index()">
   <div class="container">
     <div id="home" class="row">
-      <div class="col-md-8 m20v">
-        <h2>Latest Blocks</h2>
-        <table class="table table-hover" >
+      <div class="col-xs-12 col-md-8">
+        <h1>Latest Blocks</h1>
+        <table class="table table-hover" style="table-layout: fixed">
           <thead>
             <tr>
               <th>Height</th>
               <th>Age</th>
-              <th>Transactions</th>
+              <th><span class="ellipsis">Transactions</span></th>
               <th>Size</th>
-              <th>Confirmations</th>
+              <th><span class="ellipsis">Confirmations</span></th>
             </tr>
           </thead>
           <tbody>
@@ -22,24 +22,24 @@
             <td>
               <a href="/block/{{b.hash}}">{{b.height}}</a>
             </td>
-            <td>{{humanSince(b.time)}}</td>
+            <td><span class="ellipsis">{{humanSince(b.time)}}</span></td>
             <td>{{b.tx.length}}</td>
             <td>{{b.size}}</td>
             <td>{{b.confirmations}}</td>
           </tr>
           </tbody>
         </table>
-        <h3 style="margin-top: 50px;"> About </h3>
+        <h2> About </h2>
         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, sint, neque harum libero eos maiores rerum rem fuga quae architecto ea incidunt dolore optio ullam sit placeat vero perferendis beatae?</p>
         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, unde quidem commodi dolor asperiores ullam molestias sit a sapiente ipsa!</p>
         <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt tempora fugiat dolorem cupiditate perspiciatis praesentium.</p>
       </div>
 
-      <div class="col-md-4">
-        <div class="col-gray">
-          <h4>Latest Transactions</h4>
+      <div class="col-xs-12 col-md-4">
+        <div class="col-gray col-gray-responsive">
+          <h3>Latest Transactions</h3>
 
-          <table class="table table-hover" style="table-layout: fixed">
+          <table class="table" style="table-layout: fixed">
             <thead>
               <tr>
                 <th>Hash</th>
@@ -58,9 +58,8 @@
             </tr>
             </tbody>
           </table>
-          <div class="m50v"></div>
-          <h4> Other Bitcoin Links </h4>
-          <ul style="line-height: 22px;">
+          <h3> Other Bitcoin Links </h3>
+          <ul>
             <li>
               <a href="">Most Popular Addresses</a>
               <small> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores.</small>