From 1337e42b2d728297525e682451602877620c4f80 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Feb 2019 22:50:34 -0500
Subject: [PATCH] Add third slot area to BasicUserCard

---
 .../basic_user_card/basic_user_card.vue       | 34 +++++++++++++------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index bd7a325e..e10a3749 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -7,19 +7,24 @@
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
     <div class="user-card-collapsed-content" v-else>
-      <div class="user-card-primary-area">
-        <div :title="user.name" class="user-name">
-          <span v-if="user.name_html" v-html="user.name_html"></span>
-          <span v-else>{{ user.name }}</span>
+      <div class="user-card-primary-secondary-wrapper">
+        <div class="user-card-primary-area">
+          <div :title="user.name" class="user-name">
+            <span v-if="user.name_html" v-html="user.name_html"></span>
+            <span v-else>{{ user.name }}</span>
+          </div>
+          <div>
+            <router-link class='user-screen-name' :to="userProfileLink(user)">
+              @{{user.screen_name}}
+            </router-link>
+          </div>
         </div>
-        <div>
-          <router-link class='user-screen-name' :to="userProfileLink(user)">
-            @{{user.screen_name}}
-          </router-link>
+        <div class="user-card-secondary-area">
+          <slot name="secondary-area"></slot>
         </div>
       </div>
-      <div class="user-card-secondary-area">
-        <slot name="secondary-area"></slot>
+      <div class="user-card-third-area">
+        <slot name="third-area"></slot>
       </div>
     </div>
   </div>
@@ -46,6 +51,9 @@
     margin-left: 0.7em;
     text-align: left;
     flex: 1;
+  }
+
+  &-primary-secondary-wrapper {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
@@ -67,9 +75,13 @@
     flex: none;
   }
 
+  &-third-area {
+    margin-top: .2em;
+  }
+
   &-expanded-content {
     flex: 1;
-    margin: 0.2em 0 0 0.7em;
+    margin-left: 0.7em;
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
     border-style: solid;