From c2cc31ad2c7ea5739a44a74f26852dcfa737081b Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 6 Sep 2018 17:09:35 +0800
Subject: [PATCH] refine style

---
 src/views/layout/components/AppMain.vue |  1 +
 src/views/layout/components/Navbar.vue  | 31 ++++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 553bb61d..b6a3378f 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -26,6 +26,7 @@ export default {
 .app-main {
   /*84 = navbar + tags-view = 50 +34 */
   min-height: calc(100vh - 84px);
+  width: 100%;
   position: relative;
   overflow: hidden;
 }
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 08f3f9d0..7bae38e0 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,25 +1,27 @@
 <template>
-  <el-menu class="navbar" mode="horizontal">
+  <div class="navbar">
     <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
 
     <breadcrumb class="breadcrumb-container"/>
 
     <div class="right-menu">
-      <error-log class="errLog-container right-menu-item"/>
+      <template v-if="device!=='mobile'">
+        <error-log class="errLog-container right-menu-item"/>
 
-      <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-        <screenfull class="screenfull right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
+          <screenfull class="screenfull right-menu-item"/>
+        </el-tooltip>
 
-      <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-        <size-select class="international right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
+          <size-select class="international right-menu-item"/>
+        </el-tooltip>
 
-      <lang-select class="international right-menu-item"/>
+        <lang-select class="international right-menu-item"/>
 
-      <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-        <theme-picker class="theme-switch right-menu-item"/>
-      </el-tooltip>
+        <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
+          <theme-picker class="theme-switch right-menu-item"/>
+        </el-tooltip>
+      </template>
 
       <el-dropdown class="avatar-container right-menu-item" trigger="click">
         <div class="avatar-wrapper">
@@ -43,7 +45,7 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-  </el-menu>
+  </div>
 </template>
 
 <script>
@@ -70,7 +72,8 @@ export default {
     ...mapGetters([
       'sidebar',
       'name',
-      'avatar'
+      'avatar',
+      'device'
     ])
   },
   methods: {