BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #471 from bechi/feature/mobile-interface 

fix mobile interface
This commit is contained in:
Gustavo Maximiliano Cortez 2014-05-29 16:27:57 -03:00
parent bc6f69db14 9cc70398f1
commit 036b28b91f
4 changed files with 121 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/main.css
View File

@ -54,7 +54,7 @@ html, body {height: 100%;}
position: relative;
float: right;
margin-left: 15px;
height: 62px;
/* height: 551px; */
}
.logo {
@ -64,13 +64,6 @@ html, body {height: 100%;}
margin: 0 auto;
}
@media (max-width: 640px) {
.logo {
margin: 0 auto;
margin-bottom: 10px;
}
}
.top-bar-section li:not(.has-form) a:not(.button) {
line-height: 60px;
}
@ -129,7 +122,6 @@ html, body {height: 100%;}
}
.panel {
/* padding: 0.7rem 1rem; */
border:0;
}
@ -155,7 +147,7 @@ html, body {height: 100%;}
}
.box-backup {
margin: 2rem 0;
margin: 0.6rem 0;
padding: 2rem 1rem;
}
@ -328,7 +320,7 @@ hr { margin: 2.25rem 0;}
.box-copayers figure {
width: 51px;
height: 55px;
height: 63px;
border-top-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
overflow: hidden;
@ -621,3 +613,59 @@ p.dr-notification-text {
white-space: nowrap;
}
ul.pagination li.current a {
background: #1ABC9C;
}
ul.pagination li.current a:hover, ul.pagination li.current a:focus {
background: #16A085;
}
@media only screen and (max-width: 40em) {
#main, .header-content {
font-size: 80%;
line-height: 140%;
}
.top-bar {
background: #1ABC9C;
}
.header-content {
padding: 0.3rem 0rem 1rem 0.4rem;
}
.logo {
background-size: 90px 44px !important;
float: left;
margin-top: 0.7rem;
}
.header-content .small-9 {
text-align: right !important;
}
.header-content .line-dashed-v {
border: none !important;
}
.box-backup {
margin: 0.6rem 0;
}
#footer {
font-size: 80%;
padding: 0.2rem 0.5rem;
}
.box-status {
height: 71px;
}
.box-copayers figure {
height: 71px;
width: 71px;
}
}

2
css/tpl-clean.css
View File

@ -1,5 +1,5 @@
.logo {
background: transparent url('../img/logo.png');
background: transparent url('../img/logo.png') no-repeat;
}
#footer {

4
css/tpl-default.css
View File

@ -38,8 +38,8 @@ body {
}
.logo {
background: transparent url('../img/logo-negative.svg');
background-size: 131px 51px;
background: transparent url('../img/logo-negative.svg') no-repeat;
background-size: 130px 51px;
}
.top-bar-section li:not(.has-form) a:not(.button) {

119
index.html
View File

@ -16,10 +16,10 @@
<div data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header">
<div class="header-content">
<div class="large-3 medium-3 columns">
<div class="large-3 medium-3 small-3 columns">
<span class="logo"></span>
</div>
<div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
<div class="large-9 medium-9 small-9 columns text-center p10t" ng-show="$root.wallet">
<div class="large-4 medium-4 columns line-dashed-v">
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
<strong><span>{{$root.wallet.getName()}}</span></strong>
@ -56,7 +56,7 @@
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a ng-click="isCollapsed=!isCollapsed"> Menu</a>
<a ng-click="isCollapsed=!isCollapsed"></a>
</li>
</ul>
@ -84,6 +84,7 @@
<div class="row">
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
<div class="medium-12 small-12 columns">
<div class="alert-box secondary radius" data-alert>
<i class="fi-info"></i>
Not all copayers have joined your wallet yet.
@ -95,20 +96,23 @@
</span>
yet to join.
</div>
<div class="panel radius">
<h3 class="m15b">Share this secret with your other copayers
<small> for them to join your wallet</small>
</h3>
<div class="row">
<div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
<div class="panel input">
<p class="text-gray">{{$root.wallet.getSecret()}}</p>
</div>
<div class="medium-12 small-12 columns ">
<div class="panel radius m30v">
<h3 class="m15b">Share this secret with your other copayers
<small> for them to join your wallet</small>
</h3>
<div class="row">
<div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
<div class="panel input">
<p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
</div>
</div>
<div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
<h5 class="m0">{{$root.wallet.getName()}}</h5>
<p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
</div>
</div>
<div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
<h5 class="m0">{{$root.wallet.getName()}}</h5>
<p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
</div>
</div>
</div>
@ -133,7 +137,7 @@
</div>
</div>
<div class="row p10t" ng-show="$root.wallet">
<div class="large-3 medium-3 small-3 columns">
<div class="large-3 medium-3 hide-for-small columns">
<div>
<strong>{{$root.wallet.getName()}}</strong>
</div>
@ -191,9 +195,9 @@
<div ng-show="!wallets.length">
<h3>Create a new wallet</h3>
<form name="createForm" ng-submit="create(createForm)" novalidate>
<label>
<p class="text-gray">
Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
</label>
</p>
<button type="submit" class="button secondary radius"
ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button>
</form>
@ -272,19 +276,17 @@
</div>
<div ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate>
<div class="row">
<div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
<h3>Create new wallet</h3>
<div class="large-6 columns line-dashed-v">
<h6>Select total number of copayers</h6>
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
</select>
</div>
<div class="large-6 columns">
<h6>Select required signatures</h6>
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
</select>
</div>
<div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
<h3>Create new wallet</h3>
<div class="large-6 columns line-dashed-v">
<h6>Select total number of copayers</h6>
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
</select>
</div>
<div class="large-6 columns">
<h6>Select required signatures</h6>
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
</select>
</div>
</div>
<div class="row">
@ -309,13 +311,11 @@
<input type="text" placeholder="Bob" class="form-control" ng-model="myNickname">
</div>
</div>
<div class="row">
<div class="large-12 columns line-dashed">
<button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
</button>
<a class="button secondary radius" href="#signin">Go back</a>
</div>
<div class="large-12 columns line-dashed">
<button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
</button>
<a class="button secondary radius" href="#signin">Go back</a>
</div>
</form>
</div>
@ -351,13 +351,12 @@
<i class="fi-bitcoin"></i>
</span>
</span>
</a>
<button class="button small secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|withoutFunds) > 1">
<a class="secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|withoutFunds) > 1">
<span ng-if="!showAll">Show all</span>
<span ng-if="showAll">Show less</span>
</button>
</a>
</div>
<div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr">
<qrcode size="160" data="{{selectedAddr.address}}"></qrcode>
@ -396,9 +395,9 @@
<div class="large-12 columns">
<h4> Transaction proposals <span ng-if="onlyPending">[Pending]</span> <small>({{txs.length}})</small></h4>
<ul class="button-group">
<li> <button ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating"> Pending </button>
<li> <button ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating"> All </button>
<ul class="button-group radius">
<li> <button class="secondary" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating"> Pending </button>
<li> <button class="secondary" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating"> All </button>
</ul>
<div class="panel radius pending" ng-repeat="tx in txs | paged">
<div class="txheader row m10">
@ -489,12 +488,12 @@
</div>
</div>
</div>
<pagination ng-show="!onlyPending" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small"></pagination>
<pagination ng-show="!onlyPending" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
</div>
<div class="large-12 columns">
<h4>Last transactions</h4>
<button ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</button>
<button ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-show="lastShowed && !loading">Hide</button>
<a ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</a>
<a ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-show="lastShowed && !loading">Hide</a>
<div class="btransactions" ng-if="lastShowed">
<div ng-if="!blockchain_txs[0].txid && !loading">
No transactions yet.
@ -503,7 +502,7 @@
<div class="m15">
<div class="row">
<div class="large-8 columns">
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
<a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
{{btx.txid}}
</a>
</div>
@ -513,24 +512,24 @@
</div>
</div>
<div class="tx-copayers">
<div class="large-5 columns">
<div class="large-5 small-5 columns">
<div ng-repeat="vin in btx.vin track by $index | groupByAddress">
<p class="left text-gray size-12"> {{vin.addr}} </p>
<small class="right">{{vin.value}}</small>
<p class="small-8 ellipsis left text-gray size-12"> {{vin.addr}} </p>
<small class="small-4 right">{{vin.value}}</small>
</div>
</div>
<div class="large-1 columns text-center">
<div class="large-1 small-1 columns text-center">
<i class="fi-arrow-right"></i>
</div>
<div class="large-6 columns">
<div class="large-6 small-6 columns">
<div ng-repeat="vout in btx.vout">
<div class="row">
<div class="large-10 columns">
<div class="large-10 small-8 columns">
<div ng-repeat="addr in vout.scriptPubKey.addresses">
<p class="text-gray size-12"> {{addr}} </p>
<p class="ellipsis text-gray size-12"> {{addr}} </p>
</div>
</div>
<div class="large-2 columns">
<div class="large-2 small-4 columns">
<small>{{vout.value}}</small>
</div>
</div>
@ -539,9 +538,9 @@
</div>
<div class="m15 size-12 text-gray">
<div class="row">
<div class="large-4 columns">Fees: {{btx.fees}}</div>
<div class="large-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
<div class="large-4 columns text-right">Total: {{btx.valueOut}}</div>
<div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees}}</div>
<div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
<div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut}}</div>
</div>
</div>
</div>