style 01 proposal

This commit is contained in:
bechi 2014-12-02 15:32:42 -03:00
parent d511103081
commit 6baf35dad0
4 changed files with 131 additions and 114 deletions

View File

@ -404,14 +404,48 @@ a:hover {
background-color: #C0392A;
}
.panel.last-transactions {
padding: 0;
margin-bottom: 2.25rem;
}
.last-transactions {
margin-bottom: 2rem;
background-color: #E8EAEF;
a.missing-copayers {
background: #7A8C9E;
position: absolute;
display: block;
right: -1px;
bottom: -23px;
padding: 0.2rem 0.5rem;
font-size: 10px;
border-radius: 0 0 3px 3px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
ul.tx-copayers {
background: #E4E8EC;
padding: 0.8rem;
margin-left: 0;
}
.tx-copayers li {
border-bottom: 1px solid #CAD2DA;
list-style: none;
padding: 0.3rem;
font-size: 12px;
}
.last-transactions-header {
padding: 0.5rem;
border-radius: 3px 3px 0 0;
background: #2C3E50;
padding: 0.6rem;
color: #fff;
}
.last-transactions-content {
padding: 0.8rem 0.8rem 0;
color: #7A8C9E;
}
.last-transactions-footer {
@ -419,11 +453,6 @@ a:hover {
overflow: hidden;
}
table.last-transactions-content {
background-color: #F8F8FB;
margin-bottom: 10px;
}
.last-transactions-content .box-status {
font-size: 13px;
width: 30px;
@ -446,7 +475,7 @@ table.last-transactions-content {
color: #fff;
}
.last-transactions-content .icon-active-check {
.tx-copayers .icon-active-check {
background-color: #3FBC9C;
color: #fff;
}
@ -456,26 +485,12 @@ table.last-transactions-content {
color: #fff;
}
.private-message {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #fff;
}
.header-message {
background-color: #F8F8FB;
height: 18px;
}
.date-message {
background-color: #3C4E60;
color: #fff;
background-color: #213140;
border-radius: 3px;
font-size: 12px;
padding: 2px 5px;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-ms-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
padding: 0.2rem 0.4rem;
color: #7A8C9E;
}
.input-note {
@ -485,18 +500,14 @@ table.last-transactions-content {
}
.send-note {
background-color: #EDEDF5;
background-color: #F8F8FB;
padding: 10px;
margin-bottom: 10px;
}
.send-note p {
.send-note span {
margin-bottom: 5px;
font-size: 12px;
}
.send-note b {
color: #000;
color: #2C3E50;
}
a.button-setup.add-wallet {
@ -610,12 +621,12 @@ a.button-setup {
}
.line-t {
border-top: 1px solid #F8F8FB;
border-top: 1px solid #E9E9EC;
padding-top: 0.5rem;
}
.line-b {
border-bottom: 1px solid #F8F8FB;
border-bottom: 1px solid #E9E9EC;
padding-bottom: 0.5rem;
}
@ -1383,6 +1394,8 @@ a:hover .photo-container {
margin-bottom: 0.2rem;
}
icon-status.icon-active-check
.has-error {
color: #C0392A;
}
@ -1456,9 +1469,9 @@ a.text-warning:hover {color: #FD7262;}
.panel {
border-radius: 3px;
background: #FFFFFF;
-moz-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.10);
box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.10);
-o-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.10);
-moz-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
-o-box-shadow: 1.5px 1.5px 0px 0px rgba(32,48,64,0.20);
border: none;
}

View File

@ -221,10 +221,6 @@
padding: 0.15rem 0.2rem;
}
.line-t {
border-top: 1px solid #3C5269;
}
}
@media (max-width: 640px) {

View File

@ -1,61 +1,41 @@
<div class="header-message">
<span class="date-message">{{tx.createdTs | amCalendar}}</span>
</div>
<div class="last-transactions-header" ng-init="txIndex = $index">
<div class="private-message" ng-show="tx.comment">
<i class="fi-comment-quotes"></i>
<span class="text-light">{{tx.comment}}</span>
<div class="last-transactions-header row collapse" ng-init="txIndex = $index">
<div class="large-9 small-7 columns size-14">
<div ng-show="tx.comment">
<i class="fi-comment-quotes size-18 vm"></i>
<span class="text-light">{{tx.comment}}</span>
</div>
</div>
<div class="large-3 small-5 columns text-right">
<span class="date-message">{{tx.createdTs | amCalendar}}</span>
</div>
</div>
<div class="last-transactions-content">
<div class="row" ng-repeat="out in tx.outs">
<div class="large-3 medium-3 small-4 columns">
<div class="size-12">
<b>{{out.value}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency gray">
{{out.alternativeAmount}} {{out.alternativeIsoCode}}
</span>
</div>
<div class="large-3 medium-3 small-4 columns size-14">
<b>{{out.value}} {{$root.wallet.settings.unitName}}</b>
<span class="alt-currency gray">
{{out.alternativeAmount}} {{out.alternativeIsoCode}}
</span>
</div>
<div class="large-1 medium-1 small-1 columns fi-arrow-right"></div>
<div class="large-8 medium-8 small-7 columns ellipsis">
<div class="large-8 medium-8 small-7 columns ellipsis size-12">
<contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right" />
</div>
</div>
<div class="line-t m5t" ng-show="!!tx.merchant">
<div class="m10t" ng-show="!!tx.merchant">
<div class="send-note">
<p>
<b>{{tx.merchant.pr.pd.memo}}</b>
<p>
Expires {{tx.merchant.pr.pd.expires * 1000 | amTimeAgo }}
<span><b>{{tx.merchant.pr.pd.memo}}</b></span> <br>
<span>Expires {{tx.merchant.pr.pd.expires * 1000 | amTimeAgo }} </span>
<span ng-show="tx.merchant.domain">[{{tx.merchant.domain}}]</span>
<span ng-show="!!tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.pr.ca}}</span>
<span ng-show="!!tx.merchant.pr.ca"><i class="icon-locked size-14"></i> {{tx.merchant.pr.ca}}</span>
<span ng-show="!tx.merchant.pr.ca" style="color:red;weight:bold;"><i class="fi-unlock"></i> Untrusted</span>
</div>
</div>
<div class="line-b"></div>
</div>
<table class="last-transactions-content">
<tbody>
<tr ng-repeat="c in tx.actionList">
<td width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td>
<td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
<i ng-if="!c.actions.create" class="fi-crown icon-status"></i>
</td>
<td>
<i ng-if="c.actions.seen" class="fi-eye icon-status icon-active"></i>
<i ng-if="!c.actions.seen" class="fi-eye icon-status"></i>
</td>
<td>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check"></i>
<i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="fi-loop icon-rotate"></i>
</td>
</tr>
</tbody>
</table>
<div class="last-transactions-footer">
<div class="row collapse">
<div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
@ -84,31 +64,59 @@
</div>
</div>
<div class="large-7 medium-5 small-12 columns text-right">
<div translate ng-show="tx.finallyRejected" class="has-error">
Transaction finally rejected
</div>
<div ng-show="!tx.missingSignatures && tx.sentTs">
<div class="is-valid">
<strong translate>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
</div>
<div class="ellipsis small m10t">
<span translate>Transaction ID</span>:
<a href="http://{{getShortNetworkName()}}.insight.is/tx/{{tx.sentTxid}}" target="_blank">
{{tx.sentTxid}}
</a>
</div>
</div>
<div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures==1">
One signature missing
</div>
<div translate class="text-gray" ng-show="!tx.finallyRejected && tx.missingSignatures>1">
{{tx.missingSignatures}} signatures missing
</div>
<div class="ellipsis small text-gray show-for-large-up m5t">
<strong translate>Fee</strong>: {{tx.fee}} {{$root.wallet.settings.unitName}}
<strong translate>Proposal ID</strong>: {{tx.ntxid}}
</div>
<div class="ellipsis large-7 columns small text-gray show-for-large-up m5t text-right">
<strong translate>Fee</strong>: {{tx.fee}} {{$root.wallet.settings.unitName}}
<strong translate>Proposal ID</strong>: {{tx.ntxid}}
</div>
</div>
</div>
<a class="missing-copayers" ng-click="">
<div translate ng-show="!tx.finallyRejected && tx.missingSignatures==1">
<i class="icon-people size-16"></i>
One signature missing
</div>
<div translate ng-show="!tx.finallyRejected && tx.missingSignatures>1">
<i class="icon-people size-16"></i>
{{tx.missingSignatures}} signatures missing
</div>
</a>
<ul class="tx-copayers">
<li ng-repeat="c in tx.actionList">
<span>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x m10r"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check m10r"></i>
<i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="m10r fi-loop icon-rotate"></i>
</span>
<span>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active m10r"></i>
<i ng-if="!c.actions.create" class="fi-crown icon-status m10r"></i>
</span>
<span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
</li>
</ul>
<!--
<div class="tx-copayers">
<table>
<tbody>
<tr ng-repeat="c in tx.actionList">
<td width="100%">{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}
</td>
<td>
<i ng-if="c.actions.create" class="fi-crown icon-status icon-active"></i>
<i ng-if="!c.actions.create" class="fi-crown icon-status"></i>
</td>
<td>
<i ng-if="c.actions.seen" class="fi-eye icon-status icon-active"></i>
<i ng-if="!c.actions.seen" class="fi-eye icon-status"></i>
</td>
<td>
<i ng-if="c.actions.rejected" class="fi-x icon-status icon-active-x"></i>
<i ng-if="c.actions.sign" class="fi-check icon-status icon-active-check"></i>
<i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="fi-loop icon-rotate"></i>
</td>
</tr>
</tbody>
</table>
</div> -->

View File

@ -2,7 +2,7 @@
<div class="row" ng-show="txps.length != 0">
<div class="large-12 columns">
<h2 translate>Pending Transactions Proposals</h2>
<div class="last-transactions"
<div class="panel last-transactions pr"
ng-repeat="tx in txps | paged"
ng-include="'views/includes/transaction.html'"></div>
</div>