From 4b18e4b1c3ac8fce0ec76a7b922880cfeb8fb381 Mon Sep 17 00:00:00 2001 From: Sam Cheng Hung Date: Tue, 24 Jul 2018 15:27:21 +0800 Subject: [PATCH] Adds expand-content component, update various UI measurements --- src/sass/components/action-minor.scss | 5 +- src/sass/components/card.scss | 5 ++ src/sass/components/components.scss | 7 +- src/sass/components/content-frame.scss | 2 +- src/sass/components/expand-content.scss | 26 ++++++++ src/sass/components/header.scss | 2 +- src/sass/directives/directives.scss | 1 + src/sass/directives/elastic.scss | 4 ++ www/css/main.css | 88 ++++++++++++++++--------- www/img/icon-bookmark.svg | 10 ++- www/views/review.html | 42 ++++++------ 11 files changed, 133 insertions(+), 59 deletions(-) create mode 100644 src/sass/components/card.scss create mode 100644 src/sass/components/expand-content.scss create mode 100644 src/sass/directives/elastic.scss diff --git a/src/sass/components/action-minor.scss b/src/sass/components/action-minor.scss index 74fbe5639..f158fe845 100644 --- a/src/sass/components/action-minor.scss +++ b/src/sass/components/action-minor.scss @@ -3,10 +3,10 @@ font-size: 14px; &.mt-negative { - margin-top: -10px; + margin-top: 0; } - &.right { + &.text-right { text-align: right; } @@ -19,5 +19,6 @@ > .action-text { vertical-align: middle; + color: #444444; } } \ No newline at end of file diff --git a/src/sass/components/card.scss b/src/sass/components/card.scss new file mode 100644 index 000000000..6df235ab8 --- /dev/null +++ b/src/sass/components/card.scss @@ -0,0 +1,5 @@ +.card { + &.card-gutter-compact { + margin: 10px 12px; + } +} \ No newline at end of file diff --git a/src/sass/components/components.scss b/src/sass/components/components.scss index c0224e56f..180279125 100644 --- a/src/sass/components/components.scss +++ b/src/sass/components/components.scss @@ -1,6 +1,9 @@ -@import "header"; -@import "content-frame"; @import "item"; @import "ion-content"; +@import "card"; + +@import "header"; +@import "content-frame"; @import "address"; @import "action-minor"; +@import "expand-content"; diff --git a/src/sass/components/content-frame.scss b/src/sass/components/content-frame.scss index 1c6831271..5766b246b 100644 --- a/src/sass/components/content-frame.scss +++ b/src/sass/components/content-frame.scss @@ -1,6 +1,6 @@ .content-frame { &.negative-top { - margin-top: -20px; + margin-top: -40px; .card { &:first-child { diff --git a/src/sass/components/expand-content.scss b/src/sass/components/expand-content.scss new file mode 100644 index 000000000..934a2beec --- /dev/null +++ b/src/sass/components/expand-content.scss @@ -0,0 +1,26 @@ +.expand-content-frame { + position: relative; + + .expand-content-trigger { + position: absolute; + top: 0; + transition: opacity 0.3s ease; + right: 0; + + &.expand-content-revealed { + opacity: 0; + } + } + + .expand-content { + opacity: 0; + transform-origin: 100% 0%; + transform: scale(0,0); + transition: opacity 0.3s ease, transform 0.3s ease; + + &.expand-content-revealed { + opacity: 1; + transform: scale(1,1); + } + } +} \ No newline at end of file diff --git a/src/sass/components/header.scss b/src/sass/components/header.scss index 1c178dd07..fad1f1812 100644 --- a/src/sass/components/header.scss +++ b/src/sass/components/header.scss @@ -1,5 +1,5 @@ .header { - padding: 29px 12px 65px; + padding: 29px 12px 61px; background-color: #FAB915; color: #FFFFFF; diff --git a/src/sass/directives/directives.scss b/src/sass/directives/directives.scss index 9159d3f23..954b86c3a 100644 --- a/src/sass/directives/directives.scss +++ b/src/sass/directives/directives.scss @@ -1 +1,2 @@ @import "gravatar"; +@import "elastic"; \ No newline at end of file diff --git a/src/sass/directives/elastic.scss b/src/sass/directives/elastic.scss new file mode 100644 index 000000000..8e8aba4fa --- /dev/null +++ b/src/sass/directives/elastic.scss @@ -0,0 +1,4 @@ +.elastic { + width: 100%; + font-size: 14px; +} \ No newline at end of file diff --git a/www/css/main.css b/www/css/main.css index b34db534e..df8779400 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -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.*?"/ diff --git a/www/img/icon-bookmark.svg b/www/img/icon-bookmark.svg index b1ad892fd..5db1f9047 100644 --- a/www/img/icon-bookmark.svg +++ b/www/img/icon-bookmark.svg @@ -1,3 +1,11 @@ - + + + + diff --git a/www/views/review.html b/www/views/review.html index 2bef9a95e..9de1a403e 100644 --- a/www/views/review.html +++ b/www/views/review.html @@ -7,9 +7,9 @@ - +
-

You are sending

13.98 USD

0.014 BCH

@@ -17,7 +17,7 @@
-
+
From:
@@ -31,21 +31,8 @@
-
-
From:
-
-
- -
- -

Personal Wallet (BTC)

-

128.67

-
-
-
-
-
To:
+
+
To:
@@ -57,9 +44,22 @@
-
- - Add a personal note +
+
+ + Add a personal note +
+
+
Personal Note:
+
+
+ +
+
+