From c5519fa587925d7c6aabde1375d859ea0865dad8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 26 Feb 2019 11:00:25 -0500
Subject: Improve mobile layout of user card

---
 src/components/basic_user_card/basic_user_card.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

(limited to 'src/components/basic_user_card/basic_user_card.vue')

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index af4ffc08..0563360a 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -13,9 +13,12 @@
             <span v-if="user.name_html" v-html="user.name_html"></span>
             <span v-else>{{ user.name }}</span>
           </div>
-          <router-link :to="userProfileLink(user)">
-            @{{user.screen_name}}
-          </router-link>
+          <div>
+            <router-link :to="userProfileLink(user)">
+              @{{user.screen_name}}
+            </router-link>
+          </div>
+          <slot name="primary-area"></slot>
         </div>
         <div class="user-card-secondary-area">
           <slot name="secondary-area"></slot>
@@ -49,6 +52,7 @@
     margin-left: 0.7em;
     text-align: left;
     flex: 1;
+    min-width: 0;
   }
 
   &-primary-secondary-wrapper {
@@ -59,6 +63,8 @@
 
   &-primary-area {
     flex: 1;
+    margin-right: 1em;
+    min-width: 0;
   }
 
   &-user-name {
@@ -100,5 +106,15 @@
       margin-bottom: 0;
     }
   }
+
+  @media (min-width: 320px) and (max-width: 480px) {
+    &-primary-secondary-wrapper {
+      flex-direction: column;
+    }
+
+    &-primary-area {
+      margin-right: 0;
+    }
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2