Merge branch 'develop' into 'scrobbles-age'

# Conflicts:
#   src/i18n/en.json

1 files changed, 61 insertions, 53 deletions

diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index d0618dbb..1ec12d0c 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <UserCard
-        :user-id="userId"
-        :switcher="true"
-        :selected="timeline.viewing"
-        avatar-action="zoom"
-        rounded="top"
-        :has-note-editor="true"
-      />
-      <span
-        v-if="!!user.birthday"
-        class="user-birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
+      <div class="panel-body">
+        <UserCard
+          :user-id="userId"
+          :switcher="true"
+          :selected="timeline.viewing"
+          avatar-action="zoom"
+          rounded="top"
+          :has-note-editor="true"
         />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </span>
-      <div
-        v-if="user.fields_html && user.fields_html.length > 0"
-        class="user-profile-fields"
-      >
-        <dl
-          v-for="(field, index) in user.fields_html"
-          :key="index"
-          class="user-profile-field"
+        <span
+          v-if="!!user.birthday"
+          class="user-birthday"
         >
-          <dt
-            :title="user.fields_text[index].name"
-            class="user-profile-field-name"
-          >
-            <RichContent
-              :html="field.name"
-              :emoji="user.emoji"
-            />
-          </dt>
-          <dd
-            :title="user.fields_text[index].value"
-            class="user-profile-field-value"
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </span>
+        <div
+          v-if="user.fields_html && user.fields_html.length > 0"
+          class="user-profile-fields"
+        >
+          <dl
+            v-for="(field, index) in user.fields_html"
+            :key="index"
+            class="user-profile-field"
           >
-            <RichContent
-              :html="field.value"
-              :emoji="user.emoji"
-            />
-          </dd>
-        </dl>
+            <dt
+              :title="user.fields_text[index].name"
+              class="user-profile-field-name"
+            >
+              <RichContent
+                :html="field.name"
+                :emoji="user.emoji"
+              />
+            </dt>
+            <dd
+              :title="user.fields_text[index].value"
+              class="user-profile-field-value"
+            >
+              <RichContent
+                :html="field.value"
+                :emoji="user.emoji"
+              />
+            </dd>
+          </dl>
+        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -72,10 +74,14 @@
         <div
           v-if="followsTabVisible"
           key="followees"
+          class="panel-body"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId">
+          <FriendList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -84,10 +90,14 @@
         <div
           v-if="followersTabVisible"
           key="followers"
+          class="panel-body"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId">
+          <FollowerList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard
                 :user="item"
@@ -117,7 +127,7 @@
           :title="$t('user_card.favorites')"
           timeline-name="favorites"
           :timeline="favorites"
-          :user-id="userId"
+          :user-id="isUs ? undefined : userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
         />
@@ -136,7 +146,7 @@
           {{ $t('settings.profile_tab') }}
         </div>
       </div>
-      <div class="panel-body">
+      <div>
         <span v-if="error">{{ error }}</span>
         <FAIcon
           v-else
@@ -151,8 +161,6 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-profile {
   flex: 2;
   flex-basis: 500px;
@@ -182,9 +190,8 @@
     .user-profile-field {
       display: flex;
       margin: 0.25em;
-      border: 1px solid var(--border, $fallback--border);
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border: 1px solid var(--border);
+      border-radius: var(--roundness);
 
       .user-profile-field-name {
         flex: 0 1 30%;
@@ -192,7 +199,7 @@
         text-align: right;
         color: var(--lightText);
         min-width: 120px;
-        border-right: 1px solid var(--border, $fallback--border);
+        border-right: 1px solid var(--border);
       }
 
       .user-profile-field-value {
@@ -229,4 +236,5 @@
     padding: 7em;
   }
 }
+
 </style>