mirror of https://github.com/BTCPrivate/copay.git
Mobile menu
This commit is contained in:
Gustavo Maximiliano Cortez
parent
bd53891a9d
commit
f10e58acdf
13
css/main.css
13
css/main.css
|
|
@ -105,6 +105,14 @@ body, html{
|
|||
width:100%;
|
||||
}
|
||||
|
||||
.off-canvas-wrap, .inner-wrap{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3498DB;
|
||||
}
|
||||
|
|
@ -417,6 +425,11 @@ a:hover {
|
|||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.line-sidebar-t {
|
||||
border-top: 1px solid #3C5269;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.line-sidebar-b {
|
||||
border-bottom: 1px solid #3C5269;
|
||||
padding-bottom: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -20,4 +20,65 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page, .main {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: 100%;
|
||||
margin-top: 40px;
|
||||
margin-left: 0;
|
||||
margin-bottom: -40px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
display: block;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
background: #3C4E60;
|
||||
}
|
||||
|
||||
.left-off-canvas-menu {
|
||||
background: #3C4E60;
|
||||
}
|
||||
|
||||
.off-canvas-wrap,.inner-wrap{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.page{
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.copayers {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
overflow-y: none;
|
||||
}
|
||||
|
||||
ul.copayer-list img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.tab-bar-section {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.setup-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hide-tab-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
45
index.html
45
index.html
|
|
@ -14,17 +14,44 @@
|
|||
</head>
|
||||
<body ng-cloak class="ng-cloak">
|
||||
<div class="page">
|
||||
<div notifications="middle right"></div>
|
||||
<div class="off-canvas-wrap">
|
||||
<div class="inner-wrap">
|
||||
|
||||
<div ng-include="'views/includes/copayers.html'"></div>
|
||||
|
||||
<div
|
||||
ng-class="{'sidebar' : $root.wallet && $root.wallet.isReady()}"
|
||||
ng-include="'views/includes/sidebar.html'"
|
||||
role='navigation'
|
||||
ng-if="$root.wallet && $root.wallet.isReady()"></div>
|
||||
<nav class="tab-bar" ng-class="{'hide-tab-bar' : !$root.wallet && !$root.wallet.isReady()}">
|
||||
<section class="left-small">
|
||||
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
|
||||
</section>
|
||||
|
||||
<section ng-class="{'main' : $root.wallet && $root.wallet.isReady()}" ng-view></section>
|
||||
<section class="middle tab-bar-section">
|
||||
<h1 class="right">
|
||||
{{totalBalance || 0 |noFractionNumber}} {{$root.unitName}}
|
||||
</h1>
|
||||
<h1 class="title ellipsis">
|
||||
{{$root.wallet.getName()}}
|
||||
</h1>
|
||||
</section>
|
||||
</nav>
|
||||
|
||||
<aside class="left-off-canvas-menu">
|
||||
<div ng-include="'views/includes/sidebar-mobile.html'"></div>
|
||||
</aside>
|
||||
|
||||
<div notifications="middle right"></div>
|
||||
|
||||
<div ng-include="'views/includes/copayers.html'"></div>
|
||||
|
||||
<div
|
||||
ng-class="{'sidebar' : $root.wallet && $root.wallet.isReady()}"
|
||||
ng-include="'views/includes/sidebar.html'"
|
||||
role='navigation'
|
||||
ng-if="$root.wallet && $root.wallet.isReady()"></div>
|
||||
|
||||
<section ng-class="{'main' : $root.wallet && $root.wallet.isReady()}" ng-view></section>
|
||||
|
||||
<a class="exit-off-canvas"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/mousetrap/mousetrap.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<div ng-controller="SidebarController">
|
||||
<header class="text-center">
|
||||
<div class="text-white m10v">
|
||||
Copay
|
||||
<small>v{{version}}</small>
|
||||
<small ng-if="$root.wallet.getNetworkName()=='livenet'">LIVENET</small>
|
||||
<small ng-if="$root.wallet.getNetworkName()=='testnet'">TESTNET</small>
|
||||
</div>
|
||||
<div class="founds size-12">
|
||||
Balance
|
||||
<span ng-if="$root.updatingBalance">
|
||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
</span>
|
||||
<span ng-if="!$root.updatingBalance"
|
||||
data-options="disable_for_touch:true"
|
||||
tooltip="{{totalBalanceBTC || 0 |noFractionNumber:8}} BTC"
|
||||
tooltip-trigger="mouseenter"
|
||||
tooltip-placement="bottom">{{totalBalance || 0
|
||||
|noFractionNumber}} {{$root.unitName}}
|
||||
</span>
|
||||
·
|
||||
Available
|
||||
<span ng-if="$root.updatingBalance">
|
||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
</span>
|
||||
<span ng-show="!$root.updatingBalance"
|
||||
data-options="disable_for_touch:true"
|
||||
tooltip="{{availableBalanceBTC || 0 |noFractionNumber:8}} BTC"
|
||||
tooltip-trigger="mouseenter"
|
||||
tooltip-placement="bottom">{{availableBalance || 0|noFractionNumber}} {{$root.unitName}}
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="off-canvas-list">
|
||||
<li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
|
||||
<a href="{{item.link}}" ng-click="toggleCollapse()" class="db p20h">
|
||||
<i class="size-24 m20r {{item.icon}}"></i> {{item.title}}
|
||||
<span class="label alert round" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="db p20h" title="Signout"
|
||||
ng-click="signout()"><i class="size-24 m20r fi-power"></i> Signout</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue