Fixes mobile version. Fix #550

This commit is contained in:
Gustavo Maximiliano Cortez 2014-09-12 18:48:14 -03:00
parent cab5dd438b
commit c788ef0c2f
6 changed files with 149 additions and 70 deletions

File diff suppressed because one or more lines are too long

View File

@ -144,21 +144,6 @@ margin-left: 0;
margin-top: 15px;
}
@media (max-width: 991px) {
.status {
display: none;
}
}
@media (max-width: 767px) {
.navbar-form {
width: auto;
}
.status {
display: none;
}
}
.nav-tabs.nav-justified>li>a:hover {
cursor: pointer;
}
@ -198,8 +183,6 @@ margin-left: 0;
#search-form { color: #fff; }
#search { font-family: 'Ubuntu', sans-serif; }
#search.loading {
background-image: url('/img/loading.gif');
background-position: 5px center;
@ -215,10 +198,11 @@ margin-left: 0;
margin-left: 5px;
}
#search { color: #fff; }
#search::-webkit-input-placeholder {
color: #BCDF7E;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-style: italic;
font-weight: 100;
}
@ -226,7 +210,6 @@ margin-left: 0;
#search::-moz-placeholder {
color: #BCDF7E;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 100;
}
@ -268,25 +251,6 @@ margin-left: 0;
z-index: 1;
}
@media (max-width: 768px) {
.col-gray-fixed {
width:100%;
}
}
@media (max-width: 995px) {
.col-gray-fixed {
position:static;
width: 100%;
}
}
@media (min-width: 1200px) {
.col-gray-fixed {
width: 280px;
}
}
.ellipsis {
display: block;
overflow: hidden;
@ -398,13 +362,6 @@ margin-left: 0;
border-radius: .25em;
}
@media (max-width: 768px) {
.txvalues {
display: block;
margin: 5px;
}
}
.txvalues-primary {
background-color: #8DC429;
}
@ -584,16 +541,6 @@ margin-left: 0;
.btn-copy.zeroclipboard-is-hover { color: #2a6496; }
.btn-copy.zeroclipboard-is-active .tooltip { opacity: 1; }
@media (max-width: 991px) {
.btn-copy {
display: none;
}
}
.txid {
line-height: 26px;
}
.tx-id {
background-color: #373D42;
border: 3px solid #FFFFFF;
@ -611,7 +558,10 @@ margin-left: 0;
.page-header { margin-top: 0; }
.panel { margin-bottom: 1em;}
.panel-body {padding: 0.7em;}
.panel-body {
padding: 0.7em;
word-wrap: break-word;
}
/* Index */
#home .btn-more {
@ -745,6 +695,132 @@ a.v_highlight_more {
margin-top: 15px;
}
@media (min-width: 768px) {
#search { color: #fff; }
@media (max-width: 991px) {
.status {
display: none;
}
.navbar-form {
width: auto;
}
.btn-copy {
display: none;
}
.col-gray-fixed {
position:static;
width: 100%;
margin-top: 0;
padding: 0;
}
.m50v {
margin: 15px 0;
}
.block-id span {
font-size: 24px;
margin: 10px 0;
}
.icon-block {
font-size: initial;
margin: 10px 0;
}
body {
font-size: 12px;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
}
@media (max-width: 767px) {
.navbar-form {
width: auto;
}
.status {
display: none;
}
#wrap>.container {
padding: 50px 15px 0;
}
#ngProgress-container {
top: 50px;
}
body {
font-size: 11px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
.navbar-default .navbar-brand {
padding: 15px;
}
.insight {
font-size: 26px;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.container {
padding-left: 0;
padding-right: 0;
}
.navbar-default .navbar-toggle {
margin-top: 7px;
}
.navbar {
min-height: 50px;
}
#search { color: #000; }
.txvalues {
display: block;
margin: 5px;
padding: 0.5em 2em;
font-size: 11px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #fff;
}
.txvalues {
display: inline;
margin: 0;
padding: 0;
font-weight: bold;
}
.txvalues-success {
background: none;
color: #2FA4D7;
}
.txvalues-primary {
background: none;
color: #8DC429;
}
.txvalues-default {
background: none;
color: #A09E9E;
}
.txvalues-danger {
background: none;
color: #AC0015;
}
.btn-expand {
font-size: 18px;
}
}
@media (min-width: 1200px) {
.col-gray-fixed {
width: 280px;
}
.navbar-form .form-control {
width: 350px;
}
}

View File

@ -39,7 +39,7 @@
<th>Height</th>
<th>Timestamp</th>
<th class="text-right">Transactions</th>
<th class="text-right">Mined by</th>
<th class="text-right hidden-xs">Mined by</th>
<th class="text-right">Size</th>
</tr>
</thead>
@ -51,7 +51,7 @@
<td><a href="/block/{{b.hash}}">{{b.height}}</a></td>
<td>{{b.time * 1000 | date:'medium'}}</td>
<td class="text-right">{{b.txlength}}</td>
<td class="text-right"><a href="{{b.poolInfo.url}}" title="{{b.poolInfo.poolName}}" target="_blank" data-ng-show="b.poolInfo">{{b.poolInfo.poolName}}</a></td>
<td class="text-right hidden-xs"><a href="{{b.poolInfo.url}}" title="{{b.poolInfo.poolName}}" target="_blank" data-ng-show="b.poolInfo">{{b.poolInfo.poolName}}</a></td>
<td class="text-right">{{b.size}}</td>
</tr>
</tbody>

View File

@ -16,7 +16,7 @@
<th>Height</th>
<th>Age</th>
<th class="text-right"><span class="ellipsis">Transactions</span></th>
<th class="text-right"><span class="ellipsis">Mined by</span></th>
<th class="text-right hidden-xs"><span class="ellipsis">Mined by</span></th>
<th class="text-right">Size</th>
</tr>
</thead>
@ -28,8 +28,8 @@
</td>
<td><span class="ellipsis">{{humanSince(b.time)}}</span></td>
<td class="text-right">{{b.txlength}}</td>
<td class="text-right"><a href="{{b.poolInfo.url}}" title="{{b.poolInfo.poolName}}" target="_blank" data-ng-show="b.poolInfo">{{b.poolInfo.poolName}}</a></td>
<td class="text-right">{{b.size}} bytes</td>
<td class="text-right hidden-xs"><a href="{{b.poolInfo.url}}" title="{{b.poolInfo.poolName}}" target="_blank" data-ng-show="b.poolInfo">{{b.poolInfo.poolName}}</a></td>
<td class="text-right">{{b.size}}</td>
</tr>
</tbody>
</table>

View File

@ -60,7 +60,10 @@
</tr>
<tr>
<td><strong>Included in Block </strong></td>
<td data-ng-show="tx.blockhash" class="text-muted text-right"> <a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
<td data-ng-show="tx.blockhash" class="text-muted text-right">
<div class="ellipsis">
<a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
</div>
<td data-ng-show="!tx.blockhash" class="text-muted text-right">Unconfirmed</td>
</tr>
<tr data-ng-show="tx.locktime">

View File

@ -1,14 +1,14 @@
<div class="line-bot row" data-ng-hide="!tx">
<div class="col-xs-12 col-md-8">
<div class="col-xs-7 col-md-8">
<div class="ellipsis">
<a class="btn-expand" href="#" title="Show/Hide items details" data-ng-click="itemsExpanded = !itemsExpanded">
<span class="glyphicon glyphicon-plus-sign" data-ng-class="{'glyphicon-minus-sign': itemsExpanded}"></span>
</a>
<a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
<a href="/tx/{{tx.txid}}">{{tx.txid}}</a>
<span class="btn-copy" clip-copy="tx.txid"></span>
</div>
</div>
<div class="col-xs-12 col-md-4 text-right text-muted">
<div class="col-xs-5 col-md-4 text-right text-muted">
<div data-ng-show="tx.firstSeenTs">
first seen at
<time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
@ -183,10 +183,10 @@
</div>
<div class="line-top row" data-ng-hide="!tx">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="col-xs-6 col-sm-4 col-md-4">
<span data-ng-show="!tx.isCoinBase && !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees) || tx.fees + 'BTC'}} </span>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 text-right">
<div class="col-xs-6 col-sm-8 col-md-8 text-right">
<span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
<span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
<span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut) || tx.valueOut + ' BTC' }}</span>