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

fixes sidebar. Amount in alternative currency breaking the layout. Vertical support for small devices

This commit is contained in:
Gustavo Maximiliano Cortez 2014-10-21 18:44:46 -03:00 committed by Matias Alejo Garcia
parent abe82dc158
commit 768dba5d53
3 changed files with 72 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
css/src/main.css
View File

@ -109,7 +109,6 @@ body, html{
} }
header { header {
padding: 0.7rem;
background-color: #1ABC9C; background-color: #1ABC9C;
overflow: hidden; overflow: hidden;
} }
@ -132,24 +131,20 @@ header .alt-currency {
} }
.col1 { .col1 {
width: 38px; width: 50px;
float: left; float: left;
} }
.col2 { .col2 {
width: 150px; width: 170px;
float: left; float: left;
margin-top: 5px;
} }
.col3 { .col3 {
position: absolute;
width: 30px;
height: 68px; height: 68px;
width: 30px;
float: right; float: right;
background-color: #23C9A9; background-color: #23C9A9;
top: 0;
right: 0;
padding: 19px 12px; padding: 19px 12px;
} }
@ -182,14 +177,16 @@ ul.side-nav.wallets .avatar-wallet{
background-color: #7A8C9E; background-color: #7A8C9E;
color: #213140; color: #213140;
padding: 0.35rem 0.7rem; padding: 0.35rem 0.7rem;
margin-top: 13px; margin-top: 6px;
margin-left: 14px; margin-left: 7px;
} }
.avatar-wallet { .avatar-wallet {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
margin-top: 4px; margin-top: 10px;
margin-left: 4px;
margin-right: 8px;
padding: 0.5rem 0.8rem; padding: 0.5rem 0.8rem;
background-color: #fff; background-color: #fff;
color: #1ABC9C; color: #1ABC9C;
@ -233,7 +230,6 @@ a:hover {
.sidebar { .sidebar {
height:100%; height:100%;
overflow-y: auto;
overflow-x: none; overflow-x: none;
} }
@ -521,7 +517,6 @@ a.button-setup {
.name-wallet { .name-wallet {
font-size: 14px; font-size: 14px;
line-height: 16px;
width: 75%; width: 75%;
float: left; float: left;
color: #fff; color: #fff;
@ -987,6 +982,8 @@ button.gray:focus,
background-color: #213140 ; background-color: #213140 ;
padding: 0.7rem; padding: 0.7rem;
border-bottom: 1px solid #3A4E61; border-bottom: 1px solid #3A4E61;
overflow-y: auto;
height: 280px;
} }
.side-nav.wallets a { .side-nav.wallets a {
@ -999,7 +996,7 @@ button.gray:focus,
} }
.side-nav .wallet-item { .side-nav .wallet-item {
padding: 10px 0; padding: 4px 0;
} }
.side-nav li.nav-item { .side-nav li.nav-item {
overflow: hidden; overflow: hidden;
@ -1044,6 +1041,15 @@ button.gray:focus,
background-color: #3C4E60; background-color: #3C4E60;
} }
.sidebar-footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 10px;
overflow-y: hidden;
}
.addresses ul { .addresses ul {
margin-left: 0; margin-left: 0;
} }
@ -1277,43 +1283,16 @@ a.text-warning:hover {color: #FD7262;}
} }
} }
@media (max-height: 610px) { @media (max-height: 480px) {
.copayer-list { .side-nav.wallets {
height: 160px;
}
}
@media (max-height: 380px) {
.sidebar-footer {
display: none; display: none;
} }
.copayer-list-small-height {
display: block;
}
.sidebar .copayer-list-small-height {
list-style-type: none;
padding:0; margin:0;
}
.sidebar .copayer-list-small-height li {
margin-top: 15px;
font-weight: 100;
font-size: 12px;
color: #C9C9C9;
}
.sidebar .copayer-list-small-height img {
width: 30px;
height: 30px;
}
.copayers {
padding: 10px 20px;
}
.side-bar h3 {
margin-top: 0;
}
.side-nav li {
line-height: 30px;
}
} }
.wide-page { .wide-page {

94
views/includes/sidebar.html
View File

@ -1,66 +1,61 @@
<div ng-controller="SidebarController"> <div ng-controller="SidebarController">
<header ng-click="toggleWalletSelection()" ng-show="$root.wallet"> <header ng-click="toggleWalletSelection()" ng-show="$root.wallet">
<!-- <div ng&#45;show="$root.wallet.isShared()" ng&#45;include="'views/includes/peer&#45;list.html'"></div> --> <a href="#" ng-click="refresh()">
<div class="col1 avatar-wallet m10r"> <div class="col1">
<span>P</span> <div class="avatar-wallet">P</div>
</div>
<div class="col2">
<div href="#!/receive">
<b class="ellipsis name-wallet">{{$root.wallet.getName()}} </b>
<p class="right size-10">[ {{$root.wallet.totalCopayers}} of {{$root.wallet.requiredCopayers}} ]</p>
</div> </div>
<div class="founds size-12"> <div class="col2">
<!-- {{'Balance'|translate}} --> <div class="oh m5t m10r">
<span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span> <div class="right size-10">[ {{$root.wallet.totalCopayers}} of {{$root.wallet.requiredCopayers}} ]</div>
<div ng-if="$root.wallet && !$root.updatingBalance" data-options="disable_for_touch:true"> <div class="ellipsis name-wallet">{{$root.wallet.getName()}}</div>
<b class="m5r">{{totalBalance || 0 |noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency">{{totalBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}</span>
</div> </div>
<div class="m10t" ng-show="lockedBalance"> <div class="founds size-12">
{{'Locked'|translate}} &nbsp; <!-- {{'Balance'|translate}} -->
<span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span> <span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
<span ng-if="$root.wallet && !$root.updatingBalance" class="has-tip" data-options="disable_for_touch:true" tooltip-popup-delay='500' tooltip="{{lockedBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}} <div ng-if="$root.wallet && !$root.updatingBalance" data-options="disable_for_touch:true">
</span> &nbsp; <b class="m5r">{{totalBalance || 0 |noFractionNumber}} {{$root.wallet.settings.unitName}}</b>
<i class="fi-info medium" tooltip="{{'Balance locked in pending transaction proposals'|translate}}" tooltip-placement="bottom"></i> <span class="alt-currency">{{totalBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}</span>
</div> </div>
<!-- <div class="wfooter"> <div class="m10t" ng-show="lockedBalance">
<span ng-if="$root.wallet.isShared()"> {{'Locked'|translate}} &nbsp;
{{$root.wallet.requiredCopayers}} <span translate>of</span> {{$root.wallet.totalCopayers}} wallet <span ng-if="$root.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
<span ng-if="!$root.wallet.isReady()"> <span ng-if="$root.wallet && !$root.updatingBalance" class="has-tip" data-options="disable_for_touch:true" tooltip-popup-delay='500' tooltip="{{lockedBalanceAlternative |noFractionNumber:2}} {{alternativeIsoCode}}" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{lockedBalance || 0|noFractionNumber}} {{$root.wallet.settings.unitName}}
<span class="creation"> in creation </span> </span> &nbsp;
</span> <i class="fi-info medium" tooltip="{{'Balance locked in pending transaction proposals'|translate}}" tooltip-placement="bottom"></i>
</span> </div>
</div> -->
</div> </div>
</div> </div>
<div class="col3"> </a>
<a class="side-bar" title="{{'Manual Update'|translate}}" ng-disabled="$root.loading" ng-click="refresh()"> v </a> <div class="col3">
</div> <a href="#" class="side-bar" title="{{'Manual Update'|translate}}" ng-disabled="$root.loading" ng-click="refresh()"> v </a>
</div>
</header> </header>
<div ng-if="walletSelection"> <div ng-if="walletSelection">
<ul class="side-nav wallets"> <ul class="side-nav wallets">
<li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-if="item.id != $root.wallet.id"> <li data-ng-repeat="item in wallets track by $index" class="nav-item" ng-if="item.id != $root.wallet.id">
<div class="col1 avatar-wallet m10r"> <div class="col1">
<span>P</span> <div class="avatar-wallet">P</div>
</div> </div>
<div class="col2"> <div class="col2">
<a class="size-12 wallet-item" ng-click="switchWallet(item.id)"> <a class="size-12 wallet-item" ng-click="switchWallet(item.id)">
<div> <div class="oh">
<span class="ellipsis name-wallet">{{item.name || item.id}} </span> <div class="right size-10">[ {{item.totalCopayers}} of {{item.requiredCopayers}} ]</div>
<p class="m0 size-10">[ {{item.totalCopayers}} of {{item.requiredCopayers}} ]</p> <div class="ellipsis name-wallet">{{item.name || item.id}}</div>
</div> </div>
<span ng-if="item.isReady() && item.balanceInfo.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span> <div class="oh">
<div ng-if="item.isReady() && !item.balanceInfo.updatingBalance" data-options="disable_for_touch:true"> <span ng-if="item.isReady() && item.balanceInfo.updatingBalance"><i class="fi-bitcoin-circle icon-rotate spinner"></i></span>
<b class="m5r size-12">{{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}}</b> <div ng-if="item.isReady() && !item.balanceInfo.updatingBalance" data-options="disable_for_touch:true">
<span class="alt-currency size-10">{{item.balanceInfo.totalBalanceAlternative |noFractionNumber:2}} {{item.balanceInfo.alternativeIsoCode}}</span> <b class="m5r size-12">{{item.balanceInfo.totalBalance || 0 |noFractionNumber}} {{item.settings.unitName}}</b>
<span class="alt-currency size-10">{{item.balanceInfo.totalBalanceAlternative |noFractionNumber:2}} {{item.balanceInfo.alternativeIsoCode}}</span>
</div>
<span ng-if="!item.isReady()">Waiting for copayers...</span>
</div> </div>
<span ng-if="!item.isReady()">Waiting for copayers...</span>
</a> </a>
</div> </div>
</li> </li>
</ul> </ul>
<a ui-route="{{create}}" href="#!/manage" class="button-setup add-wallet db p20h" title="Create"><i class="m5r fi-plus"></i> {{'Add Wallets' | translate }} </a> <a ui-route="{{create}}" href="#!/manage" class="button-setup add-wallet db p20h" title="Create"><i class="m5r fi-plus"></i> {{'Add Wallet' | translate }} </a>
</div> </div>
<ul class="side-nav" ng-if="!walletSelection && $root.wallet.isReady()"> <ul class="side-nav" ng-if="!walletSelection && $root.wallet.isReady()">
@ -78,14 +73,11 @@
</li> </li>
</ul> </ul>
<div class="pa text-gray" style="bottom: 0; left: 30%;"> <div class="sidebar-footer text-center">
<div class="text-center lo"> <a href="#!/" class="db">
<a href="#" class="db"> <img src="img/logo-negative-beta.svg" alt="Copay" width="100">
<img src="img/logo-negative-beta.svg" alt="" width="100"> </a>
</a> <div ng-include="'views/includes/version.html'"></div>
</div> </div>
<div ng-include="'views/includes/version.html'"></div>
<span ng-if="$root.wallet.isTestnet()"> [TESTNET]</span>
</div>
</div> </div>

1
views/includes/version.html
View File

@ -1,5 +1,6 @@
<div ng-controller="VersionController"> <div ng-controller="VersionController">
<small>v{{version}}</small> <small>v{{version}}</small>
<small>#{{commitHash}}</small> <small>#{{commitHash}}</small>
<small ng-if="$root.wallet.isTestnet()">[TESTNET]</small>
</div> </div>