Refine profile and follow list

webapp/components/features/ProfileList/FollowList.vue

@@ -11,7 +11,9 @@
 </template>
 
 <script>
-import ProfileList from '~/components/features/ProfileList/ProfileList'
+import ProfileList, { profileListVisibleCount } from '~/components/features/ProfileList/ProfileList'
+
+export const followListVisibleCount = profileListVisibleCount
 
 export default {
   name: 'FollowerList',

webapp/components/features/ProfileList/ProfileList.vue

@@ -1,10 +1,10 @@
 <template>
   <base-card class="profile-list">
-    <template v-if="profiles && profiles.length">
+    <template v-if="profiles.length">
       <h5 class="title spacer-x-small">
         {{ title }}
       </h5>
-      <ul :class="connectionsClass">
+      <ul :class="profilesClass">
         <li
           v-for="connection in filteredConnections"
           :key="connection.id"
@@ -13,6 +13,15 @@
           <user-teaser :user="connection" />
         </li>
       </ul>
+      <ds-input
+        v-if="isMoreAsVisible"
+        :name="uniqueName"
+        :placeholder="filter"
+        class="spacer-x-small"
+        icon="filter"
+        size="small"
+        @input.native="setFilter"
+      />
       <base-button
         v-if="hasMore"
         :loading="loading"
@@ -26,15 +35,6 @@
           })
         }}
       </base-button>
-      <ds-input
-        v-if="!hasMore"
-        :name="uniqueName"
-        :placeholder="filter"
-        class="spacer-x-small"
-        icon="filter"
-        size="small"
-        @input.native="setFilter"
-      />
     </template>
     <p v-else-if="titleNobody" class="nobody-message">{{ titleNobody }}</p>
   </base-card>
@@ -44,6 +44,8 @@
 import { escape } from 'xregexp/xregexp-all.js'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
+export const profileListVisibleCount = 7
+
 export default {
   name: 'ProfileList',
   components: {
@@ -55,11 +57,11 @@ export default {
     titleNobody: { type: String, default: null },
     allProfilesCount: { type: Number, required: true },
     profiles: { type: Array, required: true },
-    type: { type: String, default: 'following' },
     loading: { type: Boolean, default: false },
   },
   data() {
     return {
+      profileListVisibleCount,
       filter: null,
     }
   },
@@ -67,8 +69,11 @@ export default {
     hasMore() {
       return this.allProfilesCount > this.profiles.length
     },
-    connectionsClass() {
-      return `profiles${this.hasMore ? '' : ' --overflow'}`
+    isMoreAsVisible() {
+      return this.profiles.length > this.profileListVisibleCount
+    },
+    profilesClass() {
+      return `profiles${this.isMoreAsVisible ? ' --overflow' : ''}`
     },
     filteredConnections() {
       if (!this.filter) {

webapp/pages/group/_id/_slug.vue

@@ -100,6 +100,7 @@
         <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
           {{ $t('profile.network.title') }}
         </ds-heading>
+        <!-- Group members list -->
         <profile-list
           :uniqueName="`groupMembersFilter`"
           :title="$t('group.membersListTitle')"

webapp/pages/profile/_id/_slug.vue

@@ -175,7 +175,8 @@ import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
-import FollowList from '~/components/features/ProfileList/FollowList'
+import FollowList, { followListVisibleCount } from '~/components/features/ProfileList/FollowList'
+
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import AvatarUploader from '~/components/Uploader/AvatarUploader'
@@ -231,8 +232,8 @@ export default {
       tabActive: 'post',
       filter,
       followedByCountStartValue: 0,
-      followedByCount: 7,
-      followingCount: 7,
+      followedByCount: followListVisibleCount,
+      followingCount: followListVisibleCount,
       updateUserMutation: updateUserMutation(),
     }
   },