From 2484ef10735848d5dd0afe71ca5e2a7ad54afaca Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Tue, 1 Mar 2022 22:07:34 +0800
Subject: [PATCH] add function - show / hide wallet announcement

---
 resources/assets/sass/_responsive.scss        |  4 +++
 .../assets/sass/modules/_typography.scss      |  4 +++
 .../wallets/elements/WalletComponent.vue      | 33 +++++++++++++++----
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/resources/assets/sass/_responsive.scss b/resources/assets/sass/_responsive.scss
index 622c734a..fa7bb2f7 100644
--- a/resources/assets/sass/_responsive.scss
+++ b/resources/assets/sass/_responsive.scss
@@ -1184,4 +1184,8 @@
   border: 1px solid #d9d9d9;
   border-top: none;
   pointer-events: none;
+}
+
+.top-0 {
+  top: 0;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/modules/_typography.scss b/resources/assets/sass/modules/_typography.scss
index 6e9934dc..605b8e7c 100644
--- a/resources/assets/sass/modules/_typography.scss
+++ b/resources/assets/sass/modules/_typography.scss
@@ -439,6 +439,10 @@ hr{
     background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
 }
+.gradient-white {
+    background: -webkit-linear-gradient(top, rgba(255,255,255, 0.5) 0%, rgba(255,255,255, 0.9) 75%);
+    background: linear-gradient(to bottom, rgba(255,255,255, 0.5) 0%, rgba(255,255,255, 0.9) 75%);
+}
 
 /* Other Colors
 ------------------------------------
diff --git a/resources/assets/vue/components/wallets/elements/WalletComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
index c4c12ccc..18c56cd2 100644
--- a/resources/assets/vue/components/wallets/elements/WalletComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -16,13 +16,31 @@
                             <img class="m-b-10 w-100" src="/images/10107.jpg" />
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <p>Transferring your payments by using the wallet just got a lot easier.</p>
-                            <p>This release can:</p>
-                            <p class="no-margin">1. Top up once, pay for multiple transfers</p>
-                            <p class="no-margin">2. Get your refund back to your wallet</p>
-                            <p class="no-margin">3. Get a better exchange rate.</p>
+                    <div class="row" :class="[{'h-25': !expanded}, {'overflow-hidden': !expanded}]">
+                        <div class="col position-relative">
+                            <div class="row">
+                                <div class="col">
+                                    <p>Transferring your payments by using the wallet just got a lot easier.</p>
+                                    <div class="row">
+                                        <div class="col" v-if="expanded">
+                                            <p>This release can:</p>
+                                            <p class="no-margin">1. Top up once, pay for multiple transfers</p>
+                                            <p class="no-margin">2. Get your refund back to your wallet</p>
+                                            <p class="no-margin">3. Get a better exchange rate.</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row position-absolute top-0 w-100 gradient-white p-t-15 p-b-15" v-if="!expanded">
+                                <div class="col">
+                                    <div class="m-b-0 m-t-5 d-flex justify-content-center cursor" @click="expanded = !expanded">Show more <i class="fa fa-angle-down fs-20 bold m-l-10"></i></div>
+                                </div>
+                            </div>
+                            <div class="row" v-if="expanded">
+                                <div class="col">
+                                    <div class="m-b-0 m-t-5 d-flex justify-content-center cursor" @click="expanded = !expanded">Show less <i class="fa fa-angle-up fs-20 bold m-l-10"></i></div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -82,6 +100,7 @@
         data(){
             return {
                 reload: false,
+                expanded: false
             }
         },
         mixins: [componentHandler],