flex view

This commit is contained in:
Javier 2016-08-09 11:22:12 -03:00
parent ec56a7c044
commit c3e510cc7c
3 changed files with 82 additions and 72 deletions

View File

@ -10,89 +10,100 @@
<button class="button black" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</button> <button class="button black" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</button>
<button class="button" ng-style="{'background-color':color}" ng-show="!showAlternativeAmount">{{unitName}}</button> <button class="button" ng-style="{'background-color':color}" ng-show="!showAlternativeAmount">{{unitName}}</button>
</div> </div>
<div class="buttons m3t" ng-if="specificAmount" ng-click="init()"> <div class="right-small m10r" ng-if="specificAmount">
<button class="button right" ng-style="{'background-color':color}"><span translate>Cancel</span></button> <a ng-click="init()">
<span class="text-close" translate>Cancel</span>
</a>
</div> </div>
</ion-header-bar> </ion-header-bar>
<div> <ion-pane>
<div class="row content" ng-show="!specificAmount"> <ion-content scroll="false" ng-show="!specificAmount">
<div class="send-amount col"> <section class="main-container">
<div class="text-light text-black m15t" ng-class="{'size-28': smallFont, 'size-36' : !smallFont}">{{amount || '-'}}</div> <div class="row header">
<div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">{{globalResult}} [{{amountResult || '0.00'}} {{alternativeIsoCode}}]</div> <div class="col text-center">
<div class="size-17 text-light text-black" ng-show="showAlternativeAmount">{{globalResult}} [{{alternativeResult || '0.00'}} {{unitName}}]</div> <div class="text-light text-black m15t" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
</div> <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">{{globalResult}} [{{amountResult || '0.00'}} {{alternativeIsoCode}}]</div>
<div class="size-17 text-light text-black" ng-show="showAlternativeAmount">{{globalResult}} [{{alternativeResult || '0.00'}} {{unitName}}]</div>
</div>
</div>
<div class="calculator-keyboard m10b col"> <div class="row button-row">
<div class="button-content text-center df"> <div class="col-25 col-offset-50">
<div class="col col-25 col-offset-50">
<button class="button expand button-stable" ng-click="resetAmount()">AC</button> <button class="button expand button-stable" ng-click="resetAmount()">AC</button>
</div> </div>
<div class="col col-25"> <div class="col-25">
<button class="button expand text-center" ng-style="{'background-color':index.backgroundColor}" <button class="button expand text-center" ng-style="{'background-color':index.backgroundColor}"
ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount"> ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
<span>Ok</span> <span>Ok</span>
</button> </button>
</div> </div>
</div> </div>
<div class="button-content text-center df">
<div class="row button-row">
<button class="button expand button-light" ng-click="pushDigit('7')">7</button> <button class="button expand button-light" ng-click="pushDigit('7')">7</button>
<button class="button expand button-light" ng-click="pushDigit('8')">8</button> <button class="button expand button-light" ng-click="pushDigit('8')">8</button>
<button class="button expand button-light" ng-click="pushDigit('9')">9</button> <button class="button expand button-light" ng-click="pushDigit('9')">9</button>
<button class="button expand button-stable" ng-click="pushOperator('/')">/</button> <button class="button expand button-stable" ng-click="pushOperator('/')">/</button>
</div> </div>
<div class="button-content text-center df">
<div class="row button-row">
<button class="button expand button-light" ng-click="pushDigit('4')">4</button> <button class="button expand button-light" ng-click="pushDigit('4')">4</button>
<button class="button expand button-light" ng-click="pushDigit('5')">5</button> <button class="button expand button-light" ng-click="pushDigit('5')">5</button>
<button class="button expand button-light" ng-click="pushDigit('6')">6</button> <button class="button expand button-light" ng-click="pushDigit('6')">6</button>
<button class="button button-amount expand button-stable" ng-click="pushOperator('x')">x</button> <button class="button button-amount expand button-stable" ng-click="pushOperator('x')">x</button>
</div> </div>
<div class="button-content text-center df">
<div class="row button-row">
<button class="button expand button-light" ng-click="pushDigit('1')">1</button> <button class="button expand button-light" ng-click="pushDigit('1')">1</button>
<button class="button expand button-light" ng-click="pushDigit('2')">2</button> <button class="button expand button-light" ng-click="pushDigit('2')">2</button>
<button class="button expand button-light" ng-click="pushDigit('3')">3</button> <button class="button expand button-light" ng-click="pushDigit('3')">3</button>
<button class="button expand button-stable" ng-click="pushOperator('+')">+</button> <button class="button expand button-stable" ng-click="pushOperator('+')">+</button>
</div> </div>
<div class="button-content text-center df">
<div class="row button-row">
<button class="button expand button-light" ng-click="pushDigit('.')">.</button> <button class="button expand button-light" ng-click="pushDigit('.')">.</button>
<button class="button expand button-light" ng-click="pushDigit('0')">0</button> <button class="button expand button-light" ng-click="pushDigit('0')">0</button>
<button class="button expand button-light" ng-click="removeDigit()"><</button> <button class="button expand button-light" ng-click="removeDigit()"><</button>
<button class="button expand button-stable" ng-click="pushOperator('-')">-</button> <button class="button expand button-stable" ng-click="pushOperator('-')">-</button>
</div> </div>
</div> </section>
</div> </ion-content>
<div class="modal-content m20b" ng-show="specificAmount"> <ion-content ng-show="specificAmount" ng-style="{'background-color':'#f6f7f9'}">
<h4 class="title m10l" translate>QR Code</h4> <section class="modal-content m20b">
<ul class="no-bullet size-14 m0"> <h4 class="title m10l" translate>QR Code</h4>
<li class="line-b p10 oh text-center"> <ul class="no-bullet size-14 m0">
<qrcode size="220" data="bitcoin:{{addr + '?amount=' + specificAmount}}"></qrcode> <li class="line-b p10 oh text-center">
<div class="m10t text-center" ng-show="isCordova"> <qrcode size="220" data="bitcoin:{{addr + '?amount=' + specificAmount}}"></qrcode>
<span class="button outline dark-gray tiny round" <div class="m10t text-center" ng-show="isCordova">
ng-click="shareAddress('bitcoin:' + addr + '?amount=' + specificAmount)"> <span class="button outline dark-gray tiny round"
<i class="fi-share"></i> ng-click="shareAddress('bitcoin:' + addr + '?amount=' + specificAmount)">
<span translate>Share address</span> <i class="fi-share"></i>
<span translate>Share address</span>
</span>
</div>
</li>
</ul>
<h4 class="title m10l" translate>Details</h4>
<ul class="no-bullet size-14 m0">
<li class="line-b p10 oh">
<span class="text-gray" translate>Address</span>:
<span class="right">
<span class="text-gray enable_text_select">{{address}}</span>
</span> </span>
</div> </li>
</li> <li class="line-b p10 oh">
</ul> <span class="text-gray" translate>Amount</span>:
<span class="right">
<h4 class="title m10l" translate>Details</h4> {{specificAmount}} {{unitName}}
<ul class="no-bullet size-14 m0"> <span class="label gray radius">{{specificAlternativeAmount}} {{alternativeIsoCode}}</span>
<li class="line-b p10 oh"> </span>
<span class="text-gray" translate>Address</span>: </li>
<span class="right"> </ul>
<span class="text-gray enable_text_select">{{address}}</span> <div class="extra-margin-bottom"></div>
</span> </section>
</li> </ion-content>
<li class="line-b p10 oh"> </ion-pane>
<span class="text-gray" translate>Amount</span>:
<span class="right">
{{specificAmount}} {{unitName}}
<span class="label gray radius">{{specificAlternativeAmount}} {{alternativeIsoCode}}</span>
</span>
</li>
</ul>
</div>
</div>
</ion-modal-view> </ion-modal-view>

View File

@ -16,14 +16,6 @@
display: inherit; display: inherit;
} }
.df {
display: flex;
}
.button-content {
margin-bottom: -15px;
}
.behind { .behind {
z-index: -1; z-index: -1;
} }

View File

@ -282,6 +282,26 @@ a {
} }
} }
.main-container {
display: -webkit-flex;
-webkit-flex-direction: column;
height: 100%;
}
.main-container > .row {
-webkit-flex: 1;
}
.header {
-webkit-flex: 1.5 !important;
-webkit-align-items: center;
}
.button-row {
-webkit-align-items: center;
margin-bottom: -30px;
}
.box-setup-footer { .box-setup-footer {
overflow: hidden; overflow: hidden;
margin-top: 1rem; margin-top: 1rem;
@ -1580,19 +1600,6 @@ input.ng-invalid-match {
margin-bottom: 25px; margin-bottom: 25px;
} }
.send-amount {
width: 100%;
text-align: center;
padding-top: 7%;
color: #fff;
height: 30%;
}
.calculator-keyboard {
width: 100%;
height: 70%;
}
.alternative-amount { .alternative-amount {
height: 25px; height: 25px;
text-align: center; text-align: center;