From 476bf0afe1c890b0f08587b3942981c8c591c7be Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Thu, 31 Jan 2019 17:00:31 +0200
Subject: Fix media timeline attachments being small by adding an option to not
 render background tabs in tab switcher

---
 src/components/user_profile/user_profile.vue | 48 ++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 7 deletions(-)

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

diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f9b964ce..e53ce4cc 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -1,12 +1,28 @@
 <template>
 <div>
   <div v-if="user.id" class="user-profile panel panel-default">
-    <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
-    <tab-switcher>
-      <Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/>
+    <user-card-content
+      :user="user"
+      :switcher="true"
+      :selected="timeline.viewing"
+    />
+    <tab-switcher :renderOnlyFocused="true">
+      <Timeline
+        :label="$t('user_card.statuses')"
+        :embedded="true"
+        :title="$t('user_profile.timeline_title')"
+        :timeline="timeline"
+        :timeline-name="'user'"
+        :user-id="fetchBy"
+      />
       <div :label="$t('user_card.followees')">
         <div v-if="friends">
-          <user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
+          <user-card
+            v-for="friend in friends"
+            :key="friend.id"
+            :user="friend"
+            :showFollows="true"
+          />
         </div>
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
@@ -14,14 +30,32 @@
       </div>
       <div :label="$t('user_card.followers')">
         <div v-if="followers">
-          <user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
+          <user-card
+            v-for="follower in followers"
+            :key="follower.id"
+            :user="follower"
+            :showFollows="false"
+          />
         </div>
         <div class="userlist-placeholder" v-else>
           <i class="icon-spin3 animate-spin"></i>
         </div>
       </div>
-      <Timeline :label="$t('user_card.media')" :embedded="true" :title="$t('user_card.media')" timeline-name="media" :timeline="media" :user-id="fetchBy" />
-      <Timeline v-if="isUs" :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_card.favorites')" timeline-name="favorites" :timeline="favorites"/>
+      <Timeline
+        :label="$t('user_card.media')"
+        :embedded="true" :title="$t('user_card.media')"
+        timeline-name="media"
+        :timeline="media"
+        :user-id="fetchBy"
+      />
+      <Timeline
+        v-if="isUs"
+        :label="$t('user_card.favorites')"
+        :embedded="true"
+        :title="$t('user_card.favorites')"
+        timeline-name="favorites"
+        :timeline="favorites"
+      />
     </tab-switcher>
   </div>
   <div v-else class="panel user-profile-placeholder">
-- 
cgit v1.2.3-70-g09d2