anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

New bottom bar menu for small devices

Browse source
This commit is contained in:
Gustavo Maximiliano Cortez 2014-11-22 17:34:28 -03:00
commit e1fd75b262
4 changed files with 48 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
css/src/mobile.css
View file

@ -39,6 +39,15 @@
background: #3C4E60;
}
.bottom-bar {
display: block;
position: fixed;
bottom: 0;
width: 100%;
z-index: 5;
background: #3C4E60;
}
.left-off-canvas-menu {
background: #2C3E50;
}
@ -89,6 +98,17 @@
opacity: 0.6;
}
.bottombar-item a {
color: #fff;
padding: 4px 0;
display: block;
}
.bottombar-item a.active {
color: #000;
background-color: #fff;
}
.box-founds {
background-color: #213140;
}

5
index.html
View file

@ -85,6 +85,11 @@
<section ng-class="{'main':$root.iden && !$root.starting}" ng-view></section>
<div class="bottom-bar" ng-if="$root.wallet &&
$root.wallet.isReady() && !$root.wallet.isLocked">
<div ng-include="'views/includes/bottombar-mobile.html'"></div>
</div>
<a class="exit-off-canvas"></a>
</div>

13
views/includes/bottombar-mobile.html Normal file
View file

@ -0,0 +1,13 @@
<div class="row" ng-controller="SidebarController">
<div class="medium-3 small-3 columns text-center bottombar-item" data-ng-repeat="item in menu" ui-route="{{item.link}}" ng-if="item.link!='more'">
<a href="#!/{{item.link}}" ng-class="{active: isActive(item)}">
<i class="size-24 {{item.icon}} db"></i>
<div class="size-10">
{{item.title}}
<span class="label alert round" ng-if="item.link=='send' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
</div>
</a>
</div>
</div>

25
views/includes/sidebar-mobile.html
View file

@ -22,10 +22,7 @@
</div>
<div ng-if="walletSelection">
<div class="side-nav wallets" ng-show="!wallets.0">
<p class="size-12" translate>You do not have another wallets. Creates one more from link below.</p>
<div class="text-center">
<i class="fi-arrow-down"></i>
</div>
<p class="size-12" translate>You do not have another wallets.</p>
</div>
<ul class="side-nav wallets off-canvas-list" ng-show="wallets.0"
ng-click="toggleWalletSelection()"
@ -78,30 +75,28 @@
<div class="line-t p0"></div>
<ul class="off-canvas-list" ng-show="!walletSelection">
<li data-ng-repeat="item in menu" ui-route="{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
<a href="#!/{{item.link}}" class="db p20h">
<i class="size-24 m20r {{item.icon}}"></i> {{item.title}}
<span class="label alert round" ng-if="item.link=='send' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
</a>
</li>
<li>
<a href="#!/create" class="db p20h" title="Create new wallet">
<a href="#!/more" class="db p20h nav-item" title="Settings">
<i class="size-24 m20r fi-widget"></i> {{'Settings' | translate }} </a>
</li>
<li>
<a href="#!/create" class="db p20h nav-item" title="Create new wallet">
<i class="size-24 m20r fi-plus"></i> {{'Create new wallet' | translate }} </a>
</li>
<li>
<a href="#!/join" class="db p20h" title="Join shared wallet">
<a href="#!/join" class="db p20h nav-item" title="Join shared wallet">
<i class="size-24 m20r fi-torsos-all"></i> {{'Join shared wallet' | translate }} </a>
</li>
<li>
<a href="#!/import" class="db p20h" title="Import wallet">
<a href="#!/import" class="db p20h nav-item" title="Import wallet">
<i class="size-24 m20r fi-download"></i> {{'Import wallet' | translate }} </a>
</li>
<li>
<a href="#!/profile" class="db p20h" title="Profile">
<a href="#!/profile" class="db p20h nav-item" title="Profile">
<i class="size-24 m20r fi-torso"></i> {{'Profile' | translate }} </a>
</li>
<li>
<a href="#!/" class="db p20h" title="Close"
<a href="#!/" class="db p20h nav-item" title="Close"
ng-click="signout()"><i class="size-24 m20r fi-power"></i> {{'Close'|translate}}</a>
</li>
</ul>