zcash-hackworks
/
insight-ui-zcash
mirror of https://github.com/zcash-hackworks/insight-ui-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
-------------------------------------------------- */
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 {
-moz-border-radius-bottomleft: 2px;
-moz-border-radius-bottomright: 2px;
@ -332,8 +350,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; }

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 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>

27
public/views/index.html
View File

@ -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>