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; position: relative;
float: right; float: right;
margin-left: 15px; margin-left: 15px;
height: 62px; /* height: 551px; */
} }
.logo { .logo {
@ -64,13 +64,6 @@ html, body {height: 100%;}
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: 640px) {
.logo {
margin: 0 auto;
margin-bottom: 10px;
}
}
.top-bar-section li:not(.has-form) a:not(.button) { .top-bar-section li:not(.has-form) a:not(.button) {
line-height: 60px; line-height: 60px;
} }
@ -129,7 +122,6 @@ html, body {height: 100%;}
} }
.panel { .panel {
/* padding: 0.7rem 1rem; */
border:0; border:0;
} }
@ -155,7 +147,7 @@ html, body {height: 100%;}
} }
.box-backup { .box-backup {
margin: 2rem 0; margin: 0.6rem 0;
padding: 2rem 1rem; padding: 2rem 1rem;
} }
@ -328,7 +320,7 @@ hr { margin: 2.25rem 0;}
.box-copayers figure { .box-copayers figure {
width: 51px; width: 51px;
height: 55px; height: 63px;
border-top-left-radius: 4px 4px; border-top-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px; border-bottom-left-radius: 4px 4px;
overflow: hidden; overflow: hidden;
@ -621,3 +613,59 @@ p.dr-notification-text {
white-space: nowrap; 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 { .logo {
background: transparent url('../img/logo.png'); background: transparent url('../img/logo.png') no-repeat;
} }
#footer { #footer {

4
css/tpl-default.css
View File

@ -38,8 +38,8 @@ body {
} }
.logo { .logo {
background: transparent url('../img/logo-negative.svg'); background: transparent url('../img/logo-negative.svg') no-repeat;
background-size: 131px 51px; background-size: 130px 51px;
} }
.top-bar-section li:not(.has-form) a:not(.button) { .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 data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header"> <div class="header">
<div class="header-content"> <div class="header-content">
<div class="large-3 medium-3 columns"> <div class="large-3 medium-3 small-3 columns">
<span class="logo"></span> <span class="logo"></span>
</div> </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"> <div class="large-4 medium-4 columns line-dashed-v">
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}"> <a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
<strong><span>{{$root.wallet.getName()}}</span></strong> <strong><span>{{$root.wallet.getName()}}</span></strong>
@ -56,7 +56,7 @@
<ul class="title-area"> <ul class="title-area">
<li class="name"></li> <li class="name"></li>
<li class="toggle-topbar menu-icon"> <li class="toggle-topbar menu-icon">
<a ng-click="isCollapsed=!isCollapsed"> Menu</a> <a ng-click="isCollapsed=!isCollapsed"></a>
</li> </li>
</ul> </ul>
@ -84,6 +84,7 @@
<div class="row"> <div class="row">
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'> <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> <div class="alert-box secondary radius" data-alert>
<i class="fi-info"></i> <i class="fi-info"></i>
Not all copayers have joined your wallet yet. Not all copayers have joined your wallet yet.
@ -95,20 +96,23 @@
</span> </span>
yet to join. yet to join.
</div> </div>
</div>
<div class="panel radius">
<h3 class="m15b">Share this secret with your other copayers <div class="medium-12 small-12 columns ">
<small> for them to join your wallet</small> <div class="panel radius m30v">
</h3> <h3 class="m15b">Share this secret with your other copayers
<div class="row"> <small> for them to join your wallet</small>
<div class="large-9 medium-12 small-12 columns line-dashed-v text-gray"> </h3>
<div class="panel input"> <div class="row">
<p class="text-gray">{{$root.wallet.getSecret()}}</p> <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>
<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> </div>
</div> </div>
@ -133,7 +137,7 @@
</div> </div>
</div> </div>
<div class="row p10t" ng-show="$root.wallet"> <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> <div>
<strong>{{$root.wallet.getName()}}</strong> <strong>{{$root.wallet.getName()}}</strong>
</div> </div>
@ -191,9 +195,9 @@
<div ng-show="!wallets.length"> <div ng-show="!wallets.length">
<h3>Create a new wallet</h3> <h3>Create a new wallet</h3>
<form name="createForm" ng-submit="create(createForm)" novalidate> <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. 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" <button type="submit" class="button secondary radius"
ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button> ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button>
</form> </form>
@ -272,19 +276,17 @@
</div> </div>
<div ng-show="!loading"> <div ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate> <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">
<div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup"> <h3>Create new wallet</h3>
<h3>Create new wallet</h3> <div class="large-6 columns line-dashed-v">
<div class="large-6 columns line-dashed-v"> <h6>Select total number of copayers</h6>
<h6>Select total number of copayers</h6> <select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues"> </select>
</select> </div>
</div> <div class="large-6 columns">
<div class="large-6 columns"> <h6>Select required signatures</h6>
<h6>Select required signatures</h6> <select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues"> </select>
</select>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -309,13 +311,11 @@
<input type="text" placeholder="Bob" class="form-control" ng-model="myNickname"> <input type="text" placeholder="Bob" class="form-control" ng-model="myNickname">
</div> </div>
</div> </div>
<div class="row"> <div class="large-12 columns line-dashed">
<div class="large-12 columns line-dashed"> <button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
<button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading"> Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet </button>
</button> <a class="button secondary radius" href="#signin">Go back</a>
<a class="button secondary radius" href="#signin">Go back</a>
</div>
</div> </div>
</form> </form>
</div> </div>
@ -351,13 +351,12 @@
<i class="fi-bitcoin"></i> <i class="fi-bitcoin"></i>
</span> </span>
</span> </span>
</a> </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 all</span>
<span ng-if="showAll">Show less</span> <span ng-if="showAll">Show less</span>
</button> </a>
</div> </div>
<div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr"> <div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr">
<qrcode size="160" data="{{selectedAddr.address}}"></qrcode> <qrcode size="160" data="{{selectedAddr.address}}"></qrcode>
@ -396,9 +395,9 @@
<div class="large-12 columns"> <div class="large-12 columns">
<h4> Transaction proposals <span ng-if="onlyPending">[Pending]</span> <small>({{txs.length}})</small></h4> <h4> Transaction proposals <span ng-if="onlyPending">[Pending]</span> <small>({{txs.length}})</small></h4>
<ul class="button-group"> <ul class="button-group radius">
<li> <button ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating"> Pending </button> <li> <button class="secondary" 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> <li> <button class="secondary" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating"> All </button>
</ul> </ul>
<div class="panel radius pending" ng-repeat="tx in txs | paged"> <div class="panel radius pending" ng-repeat="tx in txs | paged">
<div class="txheader row m10"> <div class="txheader row m10">
@ -489,12 +488,12 @@
</div> </div>
</div> </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>
<div class="large-12 columns"> <div class="large-12 columns">
<h4>Last transactions</h4> <h4>Last transactions</h4>
<button ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</button> <a ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</a>
<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-show="lastShowed && !loading">Hide</a>
<div class="btransactions" ng-if="lastShowed"> <div class="btransactions" ng-if="lastShowed">
<div ng-if="!blockchain_txs[0].txid && !loading"> <div ng-if="!blockchain_txs[0].txid && !loading">
No transactions yet. No transactions yet.
@ -503,7 +502,7 @@
<div class="m15"> <div class="m15">
<div class="row"> <div class="row">
<div class="large-8 columns"> <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}} {{btx.txid}}
</a> </a>
</div> </div>
@ -513,24 +512,24 @@
</div> </div>
</div> </div>
<div class="tx-copayers"> <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"> <div ng-repeat="vin in btx.vin track by $index | groupByAddress">
<p class="left text-gray size-12"> {{vin.addr}} </p> <p class="small-8 ellipsis left text-gray size-12"> {{vin.addr}} </p>
<small class="right">{{vin.value}}</small> <small class="small-4 right">{{vin.value}}</small>
</div> </div>
</div> </div>
<div class="large-1 columns text-center"> <div class="large-1 small-1 columns text-center">
<i class="fi-arrow-right"></i> <i class="fi-arrow-right"></i>
</div> </div>
<div class="large-6 columns"> <div class="large-6 small-6 columns">
<div ng-repeat="vout in btx.vout"> <div ng-repeat="vout in btx.vout">
<div class="row"> <div class="row">
<div class="large-10 columns"> <div class="large-10 small-8 columns">
<div ng-repeat="addr in vout.scriptPubKey.addresses"> <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> </div>
<div class="large-2 columns"> <div class="large-2 small-4 columns">
<small>{{vout.value}}</small> <small>{{vout.value}}</small>
</div> </div>
</div> </div>
@ -539,9 +538,9 @@
</div> </div>
<div class="m15 size-12 text-gray"> <div class="m15 size-12 text-gray">
<div class="row"> <div class="row">
<div class="large-4 columns">Fees: {{btx.fees}}</div> <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees}}</div>
<div class="large-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div> <div class="large-4 medium-4 small-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 text-right">Total: {{btx.valueOut}}</div>
</div> </div>
</div> </div>
</div> </div>