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:
commit
91c1bec493
|
@ -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; }
|
||||
|
|
|
@ -33,5 +33,5 @@ angular.module('insight.system').controller('HeaderController',
|
|||
});
|
||||
|
||||
|
||||
$scope.isCollapsed = false;
|
||||
$scope.isCollapsed = true;
|
||||
});
|
||||
|
|
|
@ -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()">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<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> ·
|
||||
<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>
|
||||
<strong>Conn</strong> {{info.connections}}
|
||||
</span> ·
|
||||
<strong>Height</strong> {{totalBlocks || info.blocks}}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue