anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Adds expand-content component, update various UI measurements

Browse source
This commit is contained in:
Sam Cheng Hung 2018-07-24 15:27:21 +08:00
commit 4b18e4b1c3
11 changed files with 133 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

88
www/css/main.css
View file

@ -15079,34 +15079,9 @@ log-options #check-bar .checkbox-icon {
border-radius: 3px;
display: inline-block; }
.header {
padding: 29px 12px 65px;
background-color: #FAB915;
color: #FFFFFF; }
.header .title {
font-size: 18px;
font-weight: 400;
line-height: 1em;
color: #FFFFFF;
text-align: center; }
.header .title + .content {
margin-top: 23px; }
.header .content {
text-align: center; }
.header .content p {
margin: 0;
line-height: 1em;
font-size: 18px; }
.header .content p.large {
font-size: 29px;
font-weight: 600; }
.header .content p + p {
margin-top: 8px; }
.content-frame.negative-top {
margin-top: -20px; }
.content-frame.negative-top .card:first-child {
margin-top: 0; }
.elastic {
width: 100%;
font-size: 14px; }
/*
* Extends Ionic v1 item
@ -15152,6 +15127,38 @@ ion-content.bg-neutral {
ion-content.padded-bottom-cta {
bottom: 92px; }
.card.card-gutter-compact {
margin: 10px 12px; }
.header {
padding: 29px 12px 61px;
background-color: #FAB915;
color: #FFFFFF; }
.header .title {
font-size: 18px;
font-weight: 400;
line-height: 1em;
color: #FFFFFF;
text-align: center; }
.header .title + .content {
margin-top: 23px; }
.header .content {
text-align: center; }
.header .content p {
margin: 0;
line-height: 1em;
font-size: 18px; }
.header .content p.large {
font-size: 29px;
font-weight: 600; }
.header .content p + p {
margin-top: 8px; }
.content-frame.negative-top {
margin-top: -40px; }
.content-frame.negative-top .card:first-child {
margin-top: 0; }
.address {
background-color: #F8F8F8;
border: 0.5px solid #EDEBEB;
@ -15175,8 +15182,8 @@ ion-content.padded-bottom-cta {
margin: 20px 14px;
font-size: 14px; }
.action-minor.mt-negative {
margin-top: -10px; }
.action-minor.right {
margin-top: 0; }
.action-minor.text-right {
text-align: right; }
.action-minor > .action-icon {
width: 15px;
@ -15184,7 +15191,26 @@ ion-content.padded-bottom-cta {
vertical-align: middle;
margin-right: 3px; }
.action-minor > .action-text {
vertical-align: middle; }
vertical-align: middle;
color: #444444; }
.expand-content-frame {
position: relative; }
.expand-content-frame .expand-content-trigger {
position: absolute;
top: 0;
transition: opacity 0.3s ease;
right: 0; }
.expand-content-frame .expand-content-trigger.expand-content-revealed {
opacity: 0; }
.expand-content-frame .expand-content {
opacity: 0;
transform-origin: 100% 0%;
transform: scale(0, 0);
transition: opacity 0.3s ease, transform 0.3s ease; }
.expand-content-frame .expand-content.expand-content-revealed {
opacity: 1;
transform: scale(1, 1); }
/* This is for rules that don't yet have a home.
* Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/

10
www/img/icon-bookmark.svg
View file

@ -1,3 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.25 15">
<path id="_ionicons_svg_md-bookmark" d="M121.688,64h-8.125A1.567,1.567,0,0,0,112,65.563V79l5.625-2.5L123.25,79V65.563A1.567,1.567,0,0,0,121.688,64Z" transform="translate(-112 -64)"/>
<defs>
<style>
.cls-1 {
fill: #444;
opacity: 0.564;
}
</style>
</defs>
<path id="_ionicons_svg_md-bookmark" class="cls-1" d="M121.688,64h-8.125A1.567,1.567,0,0,0,112,65.563V79l5.625-2.5L123.25,79V65.563A1.567,1.567,0,0,0,121.688,64Z" transform="translate(-112 -64)"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 256 B

After

Width:  |  Height:  |  Size: 381 B

Before After
Before After

42
www/views/review.html
View file

@ -7,9 +7,9 @@
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padded-bottom-cta bg-neutral">
<ion-content class="padded-bottom-cta bg-neutral"
ng-init="memoExpanded = false">
<div class="header">
<h1 class="title" translate>You are sending</h1>
<div class="content" translate>
<p class="large">13.98 USD</p>
<p>0.014 BCH</p>
@ -17,7 +17,7 @@
</div>
<div class="content-frame negative-top">
<div class="card">
<div class="card card-gutter-compact">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
@ -31,21 +31,8 @@
</div>
</div>
</div>
<div class="card">
<div class="item item-compact">From:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg icon-wallet"
ng-style="{'background-color': '#535353'}"></div>
</i>
<h2>Personal Wallet <span class="highlight" ng-style="{'color': '#535353'}">(BTC)</span></h2>
<p>128.67</p>
</div>
</div>
</div>
<div class="card">
<div class="item item-compact">To:</div>
<div class="card card-gutter-compact">
<div class="item item-compact" translate>To:</div>
<div class="item item-gutterless item-complex item-avatar">
<div class="item-content item-content-avatar">
<img src="img/contact-placeholder.svg" class="bg">
@ -57,9 +44,22 @@
</div>
</div>
</div>
<div class="action-minor mt-negative right">
<img src="img/icon-bookmark.svg" class="action-icon">
<span class="action-text">Add a personal note</span>
<div class="expand-content-frame">
<div class="action-minor mt-negative text-right expand-content-trigger"
ng-class="{ 'expand-content-revealed': memoExpanded }"
ng-click="memoExpanded = !memoExpanded">
<img src="img/icon-bookmark.svg" class="action-icon">
<span class="action-text">Add a personal note</span>
</div>
<div class="card card-gutter-compact expand-content"
ng-class="{ 'expand-content-revealed': memoExpanded }">
<div class="item item-compact" translate>Personal Note:</div>
<div class="item">
<div class="item-content">
<textarea elastic placeholder="{{btx.note.body || btx.message || 'Enter text here'}}" class="elastic"></textarea>
</div>
</div>
</div>
</div>
</div>
</ion-content>