From 8f6b76f20db7adbaf2fde9cd0b352fc09a757675 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Thu, 27 Aug 2020 15:42:19 +0800
Subject: [PATCH] update the responsive layout

---
 src/assets/language/cn.js           | 14 ++++----
 src/assets/language/en.js           | 15 +++++----
 src/assets/style.css                |  7 ++++
 src/components/MenubarComponent.vue | 64 +++++++++++++++++++++++++++++++------
 src/views/home.vue                  | 32 +++++++++++++++++++
 5 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index 4e83109..f1a55fb 100644
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -7,6 +7,13 @@ const cn = {
     import:"导入钱包",
     importHint:"如果您在其它网站或 App 上创建过钱包，可以在这里导入"
   },
+  menu:{
+    home:"首页",
+    wallets:"钱包",
+    backup:"备份",
+    expand:"展开",
+    setting:"设置"
+  },
   common:{
     veto: '取消投票',
     cross_chain_in: '跨入Vapor',
@@ -208,13 +215,6 @@ const cn = {
     tips:'提示：访问blockmeta.com来获取交易的相关信息。',
     assetId:'资产Id'
   },
-  menu: {
-    title: '切换账户',
-    createAccount: '创建账户',
-    backup: '备份',
-    help: '帮助',
-    setting: '设置',
-  },
   createAccount: {
     title: '创建钱包',
     walletName:'请输入钱包名称',
diff --git a/src/assets/language/en.js b/src/assets/language/en.js
index 66a14e0..7a5601e 100644
--- a/src/assets/language/en.js
+++ b/src/assets/language/en.js
@@ -24,6 +24,14 @@ const en = {
     confirm: 'Confirm',
     cancel: 'Cancel'
   },
+  menu:{
+    home:"Home",
+    bapp:"BApp",
+    wallets:"Wallets",
+    backup:"Backup",
+    expand:"Expand",
+    setting:"Setting"
+  },
   welcome: {
     enterMain:"Enter Main View",
     title: 'Welcome to the BYTOM Chrome Wallet',
@@ -203,13 +211,6 @@ const en = {
     tips:'Tip: Visit Blockmeta.com to check more information. ',
     assetId:'Asset Id'
   },
-  menu: {
-    title: 'Switch Account',
-    createAccount: 'Create Account',
-    backup: 'Backup',
-    help: 'Help',
-    setting: 'Setting'
-  },
   createAccount: {
     title: 'Create A Wallet',
     walletName:'Please enter wallet\'s name',
diff --git a/src/assets/style.css b/src/assets/style.css
index 3a857bc..51a57ca 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -681,3 +681,10 @@ label{
     border-left: 2px solid #FAFAFA;
     width: calc( 100% - 122px);
   }
+
+@media screen and (min-width: 993px) {
+  .warp-menu {
+    width: calc( 100% - 248px);
+    left: 208px;
+  }
+}
diff --git a/src/components/MenubarComponent.vue b/src/components/MenubarComponent.vue
index 9c37a54..18ae91e 100644
--- a/src/components/MenubarComponent.vue
+++ b/src/components/MenubarComponent.vue
@@ -1,20 +1,30 @@
 <template>
     <nav v-if="showNav()">
         <section class="breadcrumb">
-          <figure><img class="logo" src="@/assets/logo.png" alt=""></figure>
+          <figure class="logo-f"><img class="logo" src="@/assets/logo.png" alt=""></figure>
           <div class="logo_divider"></div>
-          <figure  :class="active('HOME')" v-on:click="toggleTab('HOME')"><i class="iconfont icon_home_filled"></i></figure>
-          <figure  :class="active('BAPP')" v-on:click="toggleTab('BAPP')"><i class="iconfont icon_bapp_filled"></i></figure>
-          <figure :class="active('WALLETS')" v-on:click="toggleTab('WALLETS')"><i class="iconfont icon_wallet_filled"></i></figure>
-          <figure :class="active('BACKUP')" v-on:click="toggleTab('BACKUP')"><i class="iconfont icon_backup_filled"></i></figure>
+          <figure  :class="active('HOME')" v-on:click="toggleTab('HOME')">
+            <a><i class="iconfont icon_home_filled"></i> <span class="hide-small">{{ $t('menu.home') }}</span></a>
+          </figure>
+          <figure  :class="active('BAPP')" v-on:click="toggleTab('BAPP')">
+            <a><i class="iconfont icon_bapp_filled"></i> <span class="hide-small">{{ $t('menu.bapp') }}</span></a>
+          </figure>
+          <figure :class="active('WALLETS')" v-on:click="toggleTab('WALLETS')">
+            <a><i class="iconfont icon_wallet_filled"></i> <span class="hide-small">{{ $t('menu.wallets') }}</span></a>
+          </figure>
+          <figure :class="active('BACKUP')" v-on:click="toggleTab('BACKUP')">
+            <a><i class="iconfont icon_backup_filled"></i> <span class="hide-small">{{ $t('menu.backup') }}</span></a>
+          </figure>
         </section>
         <section class="bottom">
 
-          <a v-if="!hideExpand" :href="link" target="_blank">
-            <i class="iconfont icon_Small_Fullscreen" ></i>
-          </a>
+          <figure>
+            <a v-if="!hideExpand" :href="link" target="_blank">
+              <i class="iconfont icon_Small_Fullscreen" ></i><span class="hide-small">{{ $t('menu.expand') }}</span>
+            </a>
+          </figure>
           <figure class="setting" :class="active('SETTINGS')" v-on:click="toggleTab('SETTINGS')">
-            <i class="iconfont icon_setting_fiiled" ></i>
+            <a><i class="iconfont icon_setting_fiiled" ></i><span class="hide-small">{{ $t('menu.setting') }}</span></a>
           </figure>
         </section>
     </nav>
@@ -134,6 +144,7 @@
 </script>
 
 <style lang="scss">
+
     nav {
         height: 100%;
         background: #fff;
@@ -226,4 +237,39 @@
             background:#f9f9f9;
         }
     }
+    @media screen and (max-width: 992px) {
+      .hide-small{
+        display: none;
+      }
+    }
+    @media screen and (min-width: 993px) {
+      nav{
+        width: 208px;
+        figure{
+          text-align: left;
+          padding: 0px 12px;
+          margin: 18px;
+          span{
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.64);
+            margin-left: 6px;
+          }
+          a{
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        figure.active{
+          background: #F5F5F5;
+          border-radius: 8px;
+          span{
+            color:  rgba(0, 0, 0, 0.88);
+          }
+        }
+        figure.logo-f{
+          text-align: center;
+        }
+      }
+    }
 </style>
diff --git a/src/views/home.vue b/src/views/home.vue
index 9b853f1..83fe134 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -222,6 +222,38 @@ input:checked + .slider:before {
     display: flex;
     flex-direction: column;
   }
+
+  @media screen and (min-width: 768px) {
+      .balance-bg{
+        display: flex;
+        align-items: center;
+        padding: 20px 40px;
+
+        .amount{
+          text-align:left;
+        }
+
+        .total-asset{
+          font-size:14px;
+        }
+        .token-amount{
+          font-size: 36px;
+          margin-top: 5px;
+        }
+
+        .token-amount:first-letter {
+          font-size: 28px;
+        }
+
+        .btn-send-transfer{
+          align-items: center;
+          margin-right: inherit;
+          width: 372px;
+        }
+      }
+
+
+    }
 </style>
 
 <template>
-- 
2.11.0