Skip to content
This repository has been archived by the owner on Jan 14, 2022. It is now read-only.

UI fixes for mobile - Closes #881 #885

Merged
merged 9 commits into from
Jan 24, 2019
Merged

UI fixes for mobile - Closes #881 #885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ce03543
Pagination for mobile 320px view
Jan 17, 2019
683a23d
Add break-line at landing stats for 320px view
Jan 18, 2019
3df0b21
Modify tabs at Network Monitor for mobile views
Jan 18, 2019
3cf3a20
Modify padding of txs lists at landing for mobile
Jan 18, 2019
95adb36
Add pagination for mobile-xs view at Blocks pages
Jan 18, 2019
5145b12
Modify spacing of block table for mobile
Jan 18, 2019
b1328b7
Modify letter-spacing of breadcrumb for mobile-xs
Jan 18, 2019
1e09fb9
Modify layout of Transactions for tablet view
Jan 21, 2019
6002633
Merge remote-tracking branch 'origin/2.2.2' into 881-ui-fix-mobile
Jan 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions src/assets/styles/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,12 @@ qrcode + span {
}
}

@media (max-width: 320px) {
.nav-pagination {
width: 280px;
}
}

.nav-pagination > li {
display: inline-block;
}
Expand Down Expand Up @@ -1794,6 +1800,7 @@ li.dropdown.disabled a {
.network-monitor .big-info .big-details {
font-weight: 600;
}

@media (min-width: 769px){
.delegate-monitor-top > div > div {
margin: 0 15px;
Expand Down Expand Up @@ -1829,3 +1836,48 @@ li.dropdown.disabled a {
{
padding-left: 16px;
}

@media (min-width: 321px) {
.mobile-xs-visible {
display: none;
}
}

@media (max-width: 320px) {
.mobile-xs-hidden {
display: none;
}
}

.mobile-xs-txs-page {
margin-top: 15px;
}

.mobile-xs-txs-page > span {
font-weight: 600;
}

@media (max-width: 320px) {
.latest-blocks {
word-wrap: break-word;
}

.last-block {
word-wrap: break-word;
}
}

@media (max-width: 375px) {
.block-table {
table-layout: fixed;
}

.block-table > tbody > tr > td:first-child {
word-wrap: break-word;
white-space: normal;
}

.block-table > tbody > tr:first-child > td:first-child {
width: 40%;
}
}
2 changes: 1 addition & 1 deletion src/assets/styles/tableMobile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}


@media only screen and (max-width: 995px) {
@media only screen and (max-width: 767px) {

/* Force table to not be like tables anymore */
#table-mobile table,
Expand Down
2 changes: 1 addition & 1 deletion src/components/blocks/block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table summary">
<table class="table summary block-table">
<tbody>
<tr>
<td class='left-padding-xs left-padding-s left-padding-m left-padding-l double'><strong>Block ID</strong></td>
Expand Down
17 changes: 16 additions & 1 deletion src/components/blocks/blocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h1>
</table>
</div>
<nav>
<ul class="nav-pagination">
<ul class="nav-pagination mobile-xs-hidden">
<li>
<a data-ng-class="{'btn-pagination-inactive': !vm.pagination.before, 'btn-prev': vm.pagination.before}" data-ng-disabled="!vm.pagination.before" href="/blocks/{{vm.pagination.previousPage}}">
<i class="fas fa-caret-left fa-lg"></i>
Expand All @@ -80,6 +80,21 @@ <h1>
</a>
</li>
</ul>
<ul class="nav-pagination mobile-xs-visible">
<li>
<a data-ng-class="{'btn-pagination-inactive': !vm.pagination.before, 'btn-prev': vm.pagination.before}" data-ng-disabled="!vm.pagination.before" href="/blocks/{{vm.pagination.previousPage}}">
<i class="fas fa-caret-left fa-lg"></i>
</a>
</li>
<li class="mobile-xs-txs-page nav-item">
Page <span>{{ vm.pagination.currentPage }}</span>
</li>
<li>
<a data-ng-class="{'btn-pagination-inactive': !(vm.pagination.more && vm.pagination.nextPage != 0), 'btn-next': vm.pagination.more}" data-ng-disabled="!(vm.pagination.more && vm.pagination.nextPage != 0)" href="/blocks/{{vm.pagination.nextPage}}">
<i class="fas fa-caret-right fa-lg"></i>
</a>
</li>
</ul>
</nav>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions src/components/bread-crumb/bread-crumb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@
padding-bottom: 0;
}

@media (max-width: 320px) {
.breadcrumb {
letter-spacing: -0.1rem;
}
}

.breadcrumb > li a,
.breadcrumb > li span {
color: #ccc;
Expand Down
11 changes: 5 additions & 6 deletions src/components/home/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left delegates">
<div class="delegates">
<p class="small-title">Delegates</p>
<p>
<span class="total-delegates">{{vm.activeDelegates.length || 0}} active delegates</span><br>
Expand All @@ -43,7 +43,7 @@ <h1>
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left active-nodes peers">
<div class="active-nodes peers">
<p class="small-title">Peers</p>
<p>
<span class="connected-peers">{{vm.peers.connected.length || 0}} connected peers</span><br>
Expand All @@ -58,7 +58,7 @@ <h1>
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left last-block">
<div class="last-block">
<p class="small-title">Last Block</p>
<p data-ng-switch="!!vm.lastBlock">
<span><a data-ng-href="/block/{{vm.lastBlock.id}}" data-ng-switch-when="true">{{vm.lastBlock.id}}</a></span>
Expand Down Expand Up @@ -96,10 +96,9 @@ <h1>
</div>
</div>
</div>

<div class="top-pb row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l latest-transactions-box">
<div class="top-pb row horizontal-padding-s horizontal-padding-m horizontal-padding-l latest-transactions-box">
<div class="col-xs-12">
<div class="big-info">
<div class="big-info horizontal-padding-xs">
<p class="small-title more-transactions">Latest transactions<a href="/txs/" class="pull-right">More<span class="hidden-xs"> transactions</span><span class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>
<!-- <h2 class="left-padding-m left-padding-l">Latest transactions</h2> -->
Expand Down
4 changes: 2 additions & 2 deletions src/components/network-monitor/network-monitor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,11 +237,11 @@ <h1>
<div class="col-xs-12 big-info peers">
<uib-tabset class="peers">
<uib-tab>
<uib-tab-heading><span class="glyphicon glyphicon-ok-sign hidden-xs"></span> Connected<span class="hidden-xs"> Peers</span> <span class="badge">{{vm.counter.connected || 0}}</span></uib-tab-heading>
<uib-tab-heading><span class="glyphicon glyphicon-ok-sign"></span><span> Connected</span><span class="hidden-xs"> Peers</span> <span class="badge">{{vm.counter.connected || 0}}</span></uib-tab-heading>
<peers peers="vm.peers.connected"></peers>
</uib-tab>
<uib-tab>
<uib-tab-heading><span class="glyphicon glyphicon-remove-sign hidden-xs"></span> Disconnected<span class="hidden-xs"> Peers</span> <span class="badge">{{vm.counter.disconnected || 0}}</span></uib-tab-heading>
<uib-tab-heading><span class="glyphicon glyphicon-remove-sign"></span><span class="hidden-xs"> Disconnected Peers</span> <span class="badge hidden-xs">{{vm.counter.disconnected || 0}}</span></uib-tab-heading>
<peers peers="vm.peers.disconnected"></peers>
</uib-tab>
<uib-tab>
Expand Down
14 changes: 7 additions & 7 deletions src/shared/transaction-item/transaction-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
*/
-->
<td data-title="Transaction ID" class="left-padding-m left-padding-l double">
<span class="hidden-md">
<span class="visible-lg visible-xs">
<a class="txid" href="/tx/{{tx.id}}">{{tx.id}}</a>
<span class="btn-copy pull-right right-padding-xs right-padding-s" clip-copy="tx.id"></span>
</span>
<span class="visible-md">
<span class="btn-copy" clip-copy="tx.id" data-on-hover="{{tx.id}}"></span>
<span class="hidden-lg hidden-xs">
<span class="btn-copy pull-right right-padding-xs right-padding-s" clip-copy="tx.id" data-on-hover="{{tx.id}}"></span>
</span>
</td>
<td data-title="Date">
<td class="hidden-sm" data-title="Date">
<span class="hidden-md">{{tx.timestamp | timestamp }}</span>
<a class="visible-md" href="/tx/{{tx.id}}">{{tx.timestamp | timestamp }}</a>
</td>
Expand All @@ -45,9 +45,9 @@
}">{{tx.amount | currency:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}
</span>
</td>
<td data-title="Fee" class="text-nowrap text-right"><span>{{tx.fee | currencyFee:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}</span></td>
<td data-title="Fee" class="text-nowrap text-right hidden-sm"><span>{{tx.fee | currencyFee:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}</span></td>
<td data-title="Confirmations" class="text-right right-padding-m right-padding-l double">
<span class="hidden-md">
<span class="visible-lg">
<span data-ng-if="!block.confirmations && !tx.confirmations" class="text-danger">
Transaction unconfirmed!&nbsp;<i class="glyphicon glyphicon-alert"></i>
</span>
Expand All @@ -61,7 +61,7 @@
Confirmed&nbsp;<i class="glyphicon glyphicon-ok"></span>
</span>
</span>
<span class="visible-md">
<span class="hidden-lg">
<span data-ng-if="!block.confirmations && !tx.confirmations" class="text-danger">
<i class="glyphicon glyphicon-alert">
</span>
Expand Down
27 changes: 20 additions & 7 deletions src/shared/transactions-list/transactions-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
<thead>
<tr>
<th class="left-padding-xs left-padding-s left-padding-m left-padding-l double text-muted">
<span class="hidden-md">Transaction ID</span>
<span class="visible-md">ID</span>
<span class="visible-lg">Transaction ID</span>
<span class="hidden-lg">ID</span>
</th>
<th role="button" data-ng-class="txs.activeSort.predicate === 'timestamp' ? 'text-primary' : 'text-muted'" data-ng-click="txs.applySort('timestamp')">
<th class="hidden-sm" role="button" data-ng-class="txs.activeSort.predicate === 'timestamp' ? 'text-primary' : 'text-muted'" data-ng-click="txs.applySort('timestamp')">
<span>Date</span><i class="glyphicon" data-ng-class="txs.activeSort.direction === 'desc' ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-top'" ng-if="txs.activeSort.predicate === 'timestamp'"></i>
</th>
<th class="text-muted">
Expand All @@ -35,12 +35,12 @@
<th role="button" data-ng-class="txs.activeSort.predicate === 'amount' ? 'text-primary' : 'text-muted'" data-ng-click="txs.applySort('amount')" class="amount text-right">
<span>Amount</span><i class="glyphicon" data-ng-class="txs.activeSort.direction === 'desc' ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-top'" ng-if="txs.activeSort.predicate === 'amount'"></i>
</th>
<th role="button" data-ng-class="txs.activeSort.predicate === 'fee' ? 'text-primary' : 'text-muted'" data-ng-click="txs.applySort('fee')" class="text-nowrap text-right">
<th class="hidden-sm" role="button" data-ng-class="txs.activeSort.predicate === 'fee' ? 'text-primary' : 'text-muted'" data-ng-click="txs.applySort('fee')" class="text-nowrap text-right">
<span>Fee</span><i class="glyphicon" data-ng-class="txs.activeSort.direction === 'desc' ? 'glyphicon-triangle-bottom' : 'glyphicon-triangle-top'" ng-if="txs.activeSort.predicate === 'fee'"></i>
</th>
<th class="text-right right-padding-m right-padding-l double text-muted">
<span class="hidden-md">Confirm.</span>
<span class="visible-md"><i class="glyphicon glyphicon-check" style="left:0"></i></span>
<span class="visible-lg">Confirm.</span>
<span class="hidden-lg"><i class="glyphicon glyphicon-check" style="left:0"></i></span>
</th>
</tr>
</thead>
Expand All @@ -49,7 +49,7 @@
</tbody>
</table>
<nav>
<ul class="nav-pagination">
<ul class="nav-pagination mobile-xs-hidden">
<li data-ng-disabled="!txs.hasPrev">
<button data-ng-class="!txs.hasPrev ? 'btn-pagination-inactive' : 'btn-prev'" data-ng-disabled="!txs.hasPrev" data-ng-click="txs.loadPageOffset(-1)"><i class="fas fa-caret-left fa-lg"></i></button>
</li>
Expand All @@ -59,6 +59,19 @@
<li data-ng-if="txs.currentPage" role="presentation" class="nav-item">
Page <span class="address-currpage">{{txs.currentPage}}</span>
</li>
<li data-ng-disabled="!txs.hasNext">
<a href="#" aria-label="Next">
<button data-ng-class="txs.hasNext ? ' btn-next' : 'btn-pagination-inactive'" data-ng-disabled="!txs.hasNext" data-ng-click="txs.loadPageOffset(1)"><i class="fas fa-caret-right fa-lg"></i></button>
</a>
</li>
</ul>
<ul class="nav-pagination mobile-xs-visible">
<li data-ng-disabled="!txs.hasPrev">
<button data-ng-class="!txs.hasPrev ? 'btn-pagination-inactive' : 'btn-prev'" data-ng-disabled="!txs.hasPrev" data-ng-click="txs.loadPageOffset(-1)"><i class="fas fa-caret-left fa-lg"></i></button>
</li>
<li class="mobile-xs-txs-page" role="presentation" class="nav-item">
Page <span>{{ txs.page }}</span>
</li>
<li data-ng-disabled="!txs.hasNext">
<a href="#" aria-label="Next">
<button data-ng-class="txs.hasNext ? 'btn-next' : 'btn-pagination-inactive'" data-ng-disabled="!txs.hasNext" data-ng-click="txs.loadPageOffset(1)"><i class="fas fa-caret-right fa-lg"></i></button>
Expand Down