zcash-hackworks
/
bitcore-node-zcash
mirror of https://github.com/zcash-hackworks/bitcore-node-zcash.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #155 from cmgustavo/feature/01navbar-home-responsive 

modified navbar to support small device. responsive fix for homepage
This commit is contained in:
Mario Colque 2014-01-24 11:48:14 -08:00
parent d707a55dad f7397f5734
commit 91c1bec493
4 changed files with 91 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
public/css/common.css
View File

@ -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 /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html, html,
@ -46,18 +36,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.navbar-default { .navbar-default {
background-color: #8DC429; background-color: #8DC429;
border-bottom: 4px solid #64920F; border-bottom: 4px solid #64920F;
color: #fff;
min-height: 60px;
padding: 0;
} }
.navbar-form { margin: 12px 0; }
.navbar-default .navbar-nav>li>a { .navbar-default .navbar-nav>li>a {
color: #F4FBE8; color: #F4FBE8;
font-family: 'Ubuntu', sans-serif; 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 { .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; 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 { .navbar-form .form-control {
background-color: #7CAD23; background-color: #7CAD23;
border-radius: 3px; border-radius: 3px;
@ -82,24 +96,21 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
#search { #search {
color: #fff; color: #fff;
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
font-weight: 100;
} }
#search::-webkit-input-placeholder { #search::-webkit-input-placeholder {
color: #BCDF7E; color: #BCDF7E;
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
font-size: 15px; font-size: 14px;
font-style: italic; font-style: italic;
font-weight: 100; font-weight: 100;
line-height: 20px;
} }
#search::-moz-placeholder { #search::-moz-placeholder {
color: #BCDF7E; color: #BCDF7E;
font-family: 'Ubuntu', sans-serif; font-family: 'Ubuntu', sans-serif;
font-size: 15px; font-size: 14px;
font-weight: 100; font-weight: 100;
line-height: 20px;
} }
.status { .status {
@ -107,24 +118,30 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
background-color: #597338; background-color: #597338;
border-radius: 3px; border-radius: 3px;
float: right; margin: 8px 0;
font-weight: 300; padding: 8px 10px;
margin: 11px 0; font-size: 12px;
padding: 8px 15px; color: #eee;
text-align: center;
} }
.status i { margin: 0 5px; } .status .tooltip {
margin: 0;
}
.col-gray { .col-gray {
-moz-border-radius: 5px; -moz-border-radius: 5px;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
background-color: #F4F4F4; background-color: #F4F4F4;
border-radius: 5px; border-radius: 5px;
margin-top: 21px;
padding: 15px; padding: 15px;
width: 267px; width: 267px;
} }
.col-gray-responsive {
width: auto;
}
.ellipsis { .ellipsis {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -218,8 +235,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.progress-bar-info { background-color: #8DC429; } .progress-bar-info { background-color: #8DC429; }
#home .col-gray { width: 100%; }
/* Set the fixed height of the footer here */ /* Set the fixed height of the footer here */
#footer { #footer {
background-color: #373D42; background-color: #373D42;
@ -232,6 +247,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
#footer a.insight { #footer a.insight {
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
color: #fff;
}
#footer a.insight:hover {
color: #fffffe;
} }
#footer a.insight small { font-size: 11px; } #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; } .address { font-size: 11px; }
#search { width: 300px; }
.no_matching { .no_matching {
-moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px; -moz-border-radius-bottomright: 2px;
@ -332,8 +350,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
.status .t { .status .t {
color: white; color: white;
display: inline-block;
padding:0px 5px;
} }
.status .text-danger { background: red; } .status .text-danger { background: red; }

2
public/js/controllers/header.js
View File

@ -33,5 +33,5 @@ angular.module('insight.system').controller('HeaderController',
}); });
$scope.isCollapsed = false; $scope.isCollapsed = true;
}); });

49
public/views/header.html
View File

@ -1,36 +1,41 @@
<div class="container"> <div class="container">
<div data-ng-controller="HeaderController"> <div data-ng-controller="HeaderController">
<div class="navbar-header"> <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> <a class="insight navbar-brand" href="/">Insight</a>
</div> </div>
<div class="navbar-collapse collapse" collapse="isCollapsed">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li data-ng-repeat="item in menu" ui-route="/{{item.link}}" data-ng-class="{active: $uiRoute}"> <li data-ng-repeat="item in menu" ui-route="/{{item.link}}" data-ng-class="{active: $uiRoute}">
<a href="/{{item.link}}">{{item.title}}</a> <a href="/{{item.link}}">{{item.title}}</a>
</li> </li>
</ul> </ul>
<div data-ng-controller="SearchController"> <form data-ng-controller="SearchController" class="navbar-form navbar-left" role="search" data-ng-submit="search()">
<form class="navbar-form navbar-left" role="search" data-ng-submit="search()"> <div class="form-group" data-ng-class="{'has-error': badQuery}">
<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">
<input id="search" type="text" class="form-control" data-ng-model="q" placeholder="Search for block, transaction or address"> </div>
</div> <div class="no_matching text-danger" data-ng-show="badQuery">No matching records found!</div>
<div class="no_matching text-danger" data-ng-show="badQuery">No matching records found!</div> </form>
</form> <ul class="nav navbar-nav navbar-right">
</div> <li>
<div class="status" data-ng-controller="StatusController"> <div class="status" data-ng-controller="StatusController">
<span data-ng-init="getSync()"> <a href="#" data-ng-init="getSync()">
<div class="t text-danger" data-ng-show="sync.error" tooltip="{{sync.error}}" tooltip-placement="bottom"> ERROR </div> <span class="t text-danger" data-ng-show="sync.error" tooltip="{{sync.error}}" tooltip-placement="bottom"> ERROR </span>
<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> <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>
<div class="t text-default" tooltip="Historic sync finished" tooltip-placement="bottom" data-ng-show="sync.status==='finished'"> On sync</div> <span class="t text-default" tooltip="Historic sync finished" tooltip-placement="bottom" data-ng-show="sync.status==='finished'"> On sync</span>
</span> </a> &middot;
</span> <span data-ng-init="getStatus('Info')">
<span data-ng-init="getStatus('Info')"> <strong>Conn</strong> {{info.connections}}
<i class="small"> </span> &middot;
<strong> Conn: </strong> {{info.connections}} <strong>Height</strong> {{totalBlocks || info.blocks}}
</i>
<i class="small">
<strong>Height:</strong> {{totalBlocks || info.blocks}}
</i>
</span>
</div> </div>
</li>
</ul>
</div>
</div> </div>
</div> </div>

27
public/views/index.html
View File

@ -4,16 +4,16 @@
<section data-ng-controller="IndexController" data-ng-init="index()"> <section data-ng-controller="IndexController" data-ng-init="index()">
<div class="container"> <div class="container">
<div id="home" class="row"> <div id="home" class="row">
<div class="col-md-8 m20v"> <div class="col-xs-12 col-md-8">
<h2>Latest Blocks</h2> <h1>Latest Blocks</h1>
<table class="table table-hover" > <table class="table table-hover" style="table-layout: fixed">
<thead> <thead>
<tr> <tr>
<th>Height</th> <th>Height</th>
<th>Age</th> <th>Age</th>
<th>Transactions</th> <th><span class="ellipsis">Transactions</span></th>
<th>Size</th> <th>Size</th>
<th>Confirmations</th> <th><span class="ellipsis">Confirmations</span></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -22,24 +22,24 @@
<td> <td>
<a href="/block/{{b.hash}}">{{b.height}}</a> <a href="/block/{{b.hash}}">{{b.height}}</a>
</td> </td>
<td>{{humanSince(b.time)}}</td> <td><span class="ellipsis">{{humanSince(b.time)}}</span></td>
<td>{{b.tx.length}}</td> <td>{{b.tx.length}}</td>
<td>{{b.size}}</td> <td>{{b.size}}</td>
<td>{{b.confirmations}}</td> <td>{{b.confirmations}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </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. 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. 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> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt tempora fugiat dolorem cupiditate perspiciatis praesentium.</p>
</div> </div>
<div class="col-md-4"> <div class="col-xs-12 col-md-4">
<div class="col-gray"> <div class="col-gray col-gray-responsive">
<h4>Latest Transactions</h4> <h3>Latest Transactions</h3>
<table class="table table-hover" style="table-layout: fixed"> <table class="table" style="table-layout: fixed">
<thead> <thead>
<tr> <tr>
<th>Hash</th> <th>Hash</th>
@ -58,9 +58,8 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="m50v"></div> <h3> Other Bitcoin Links </h3>
<h4> Other Bitcoin Links </h4> <ul>
<ul style="line-height: 22px;">
<li> <li>
<a href="">Most Popular Addresses</a> <a href="">Most Popular Addresses</a>
<small> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores.</small> <small> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores.</small>