From 6561e7df0ae32cdc87b9b4cd9446587ebd60b43e Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 30 Mar 2018 16:58:48 +0900
Subject: [PATCH] refs #116 Set background-image in account profile

---
 .../TimelineSpace/Contents/SideBar.vue        |  4 ++
 .../Contents/SideBar/AccountProfile.vue       | 39 +++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar.vue b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
index c7b93d6c..266b8db8 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@@ -46,6 +46,10 @@ export default {
     border-top: solid 1px #dcdfe6;
     border-bottom: solid 1px #dcdfe6;
     text-align: right;
+
+    .el-icon-close {
+      cursor: pointer;
+    }
   }
 }
 </style>
diff --git a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
index 14b53314..14aaf1ec 100644
--- a/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar/AccountProfile.vue
@@ -1,5 +1,6 @@
 <template>
-  <div id="account_profile">
+<div id="account_profile">
+  <div class="header-background" v-bind:style="{ backgroundImage: 'url(' + account.header + ')' }">
     <div class="header">
       <div class="icon">
         <img :src="account.avatar" />
@@ -12,21 +13,22 @@
       </div>
       <div class="note" v-html="account.note"></div>
     </div>
-    <el-row class="basic-info">
-      <el-col :span="8"class="info">
-        <div class="title">Posts</div>
-        <div class="count">{{ account.statuses_count }}</div>
-      </el-col>
-      <el-col :span="8"class="info">
-        <div class="title">Following</div>
-        <div class="count">{{ account.following_count }}</div>
-      </el-col>
-      <el-col :span="8"class="info">
-        <div class="title">Followers</div>
-        <div class="count">{{ account.followers_count }}</div>
-      </el-col>
-    </el-row>
   </div>
+  <el-row class="basic-info">
+    <el-col :span="8"class="info">
+      <div class="title">Posts</div>
+      <div class="count">{{ account.statuses_count }}</div>
+    </el-col>
+    <el-col :span="8"class="info">
+      <div class="title">Following</div>
+      <div class="count">{{ account.following_count }}</div>
+    </el-col>
+    <el-col :span="8"class="info">
+      <div class="title">Followers</div>
+      <div class="count">{{ account.followers_count }}</div>
+    </el-col>
+  </el-row>
+</div>
 </template>
 
 <script>
@@ -52,8 +54,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.header-background {
+  background-position: 50% 50%;
+  background-size: cover;
+}
+
 .header {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.7);
   text-align: center;
   padding: 12px;
   box-sizing: border-box;