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

improve pin screen

This commit is contained in:
bechi 2015-02-10 16:49:15 -03:00
parent 55344e2542
commit 91dc40536e
5 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/src/main.css
View File

@ -1564,8 +1564,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
color: #A5B2BF; color: #A5B2BF;
text-transform: uppercase; text-transform: uppercase;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
border-bottom: 1px solid #425467; margin: 1rem 0;
margin-bottom: 2rem;
text-align: center; text-align: center;
} }

27
css/src/mobile.css
View File

@ -423,14 +423,14 @@
.pin { .pin {
margin: 0 auto; margin: 0 auto;
width: 70%; width: 35%;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
.pin-box { .pin-box {
color: #fff; color: #fff;
font-size: 28px; font-size: 14px;
width: 25%; width: 25%;
float: left; float: left;
} }
@ -440,8 +440,8 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #000; height: 72%;
height: 50%; margin-bottom: 1.5%;
} }
.pin-button-bar { .pin-button-bar {
@ -449,18 +449,27 @@
} }
a.pin-button { a.pin-button {
margin: 4px; margin: 2.5%;
padding: 5% 10%;
display: inline-block; display: inline-block;
color: #ccc; color: #CED5DC;
font-size: 120%; font-size: 150%;
border: 1px solid #4B6178;
border-radius: 100%;
width: 70px;
padding-top: 1.4rem;
height: 70px;
} }
a.pin-button:active { a.pin-button:active {
color: #fff; color: #fff;
background-color: #2C3E50; background-color: #3E5367;
} }
.icon-circle, .icon-circle-active {
color: #1ABC9C;
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {

8
views/home.html
View File

@ -59,11 +59,9 @@
</div> </div>
<div ng-if='askForPin || ($root.hasPin && !$root.iden)'> <div ng-if='askForPin || ($root.hasPin && !$root.iden)'>
<div class="clipo"> <h2 ng-show="$root.hasPin && !$root.iden"> Enter PIN </h2>
<img src="img/clipo-pin-enter.png" alt="clipo" width="300" ng-show="$root.hasPin && !$root.iden"> <h2 ng-show="askForPin && askForPin !=2"> Set up a PIN </h2>
<img src="img/clipo-pin.png" alt="clipo" width="380" ng-show="askForPin"> <h2 ng-show="askForPin == 2">Repeat PIN</h2>
</div>
<div class="text-white text-center" ng-show="askForPin == 2">Repeat PIN</div>
<div class="box-notification" ng-show="error"> <div class="box-notification" ng-show="error">
<div class="box-icon error"> <div class="box-icon error">
<i class="fi-x size-24"></i> <i class="fi-x size-24"></i>

4
views/includes/pin-number.html
View File

@ -16,8 +16,8 @@
</div> </div>
<div class="pin-button-bar"> <div class="pin-button-bar">
<a class="pin-button" ng-click="skip()"> <a class="pin-button" ng-click="skip()">
<i class="fi-unlock text-warning" ng-show="$root.hasPin"></i> <i class="icon-power text-primary" ng-show="$root.hasPin"></i>
<i class="fi-home text-secondary" ng-show="!$root.hasPin"></i> <i class="text-primary size-14" ng-show="!$root.hasPin">Skip</i>
</a> </a>
<a class="pin-button" ng-click="press(0)">0</a> <a class="pin-button" ng-click="press(0)">0</a>
<a class="pin-button" ng-click="clear()"><i class="fi-arrow-left"></i></a> <a class="pin-button" ng-click="clear()"><i class="fi-arrow-left"></i></a>

16
views/includes/pin.html
View File

@ -1,21 +1,21 @@
<div class="pin" ng-show="!error"> <div class="pin" ng-show="!error">
<div class="pin-box"> <div class="pin-box">
<i class="" ng-show="!defined[0]">-</i> <i class="icon-circle" ng-show="!defined[0]"></i>
<i class="" ng-show="defined[0]">*</i> <i class="icon-circle-active" ng-show="defined[0]"></i>
</div> </div>
<div class="pin-box"> <div class="pin-box">
<i class="" ng-show="!defined[1]">-</i> <i class="icon-circle" ng-show="!defined[1]"></i>
<i class="" ng-show="defined[1]">*</i> <i class="icon-circle-active" ng-show="defined[1]"></i>
</div> </div>
<div class="pin-box"> <div class="pin-box">
<i class="" ng-show="!defined[2]">-</i> <i class="icon-circle" ng-show="!defined[2]"></i>
<i class="" ng-show="defined[2]">*</i> <i class="icon-circle-active" ng-show="defined[2]"></i>
</div> </div>
<div class="pin-box"> <div class="pin-box">
<i class="" ng-show="!defined[3]">-</i> <i class="icon-circle" ng-show="!defined[3]"></i>
<i class="" ng-show="defined[3]">*</i> <i class="icon-circle-active" ng-show="defined[3]"></i>
</div> </div>
</div> </div>