Refactor: ds-space out, general markup clean

webapp/components/features/FollowList/FollowList.spec.js

@@ -67,14 +67,14 @@ describe('FollowList.vue', () => {
       describe('without connections', () => {
         it('displays the followingNobody message', () => {
           const wrapper = Wrapper({ user: noConnectionsUser })
-          expect(wrapper.find('.no-connections').text()).toBe(
+          expect(wrapper.find('.nobody-message').text()).toBe(
             `${noConnectionsUser.name} ${wrapper.vm.$t(`profile.network.followingNobody`)}`,
           )
         })
 
         it('displays the followedByNobody message', () => {
           const wrapper = Wrapper({ user: noConnectionsUser, type: 'followedBy' })
-          expect(wrapper.find('.no-connections').text()).toBe(
+          expect(wrapper.find('.nobody-message').text()).toBe(
             `${noConnectionsUser.name} ${wrapper.vm.$t(`profile.network.followedByNobody`)}`,
           )
         })
@@ -118,9 +118,9 @@ describe('FollowList.vue', () => {
           )
         })
 
-        it('renders the user-teaser in an overflow-container', () => {
+        it('renders the user-teasers in an overflow-container', () => {
-          expect(followingWrapper.find('.overflow-container').is('div')).toBe(true)
+          expect(followingWrapper.find('.--overflow').is('div')).toBe(true)
-          expect(followedByWrapper.find('.overflow-container').is('div')).toBe(true)
+          expect(followedByWrapper.find('.--overflow').is('div')).toBe(true)
         })
 
         it('renders a filter text input', () => {

webapp/components/features/FollowList/FollowList.vue

@@ -1,23 +1,24 @@
 <template>
   <base-card class="follow-list">
-    <ds-space v-if="connections && connections.length" margin="x-small">
+    <template v-if="connections && connections.length">
-      <ds-text tag="h5" color="soft">
+      <ds-text tag="h5" color="soft" class="spacer-x-small">
         {{ userName | truncate(15) }} {{ $t(`profile.network.${type}`) }}
       </ds-text>
-    </ds-space>
+      <div :class="connectionsClass">
-    <template v-else>
+        <user-teaser
-      <p class="no-connections">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
+          v-for="connection in filteredConnections"
-    </template>
+          class="spacer-x-small"
-    <template v-if="connections && connections.length <= 7">
+          :user="connection"
-      <ds-space v-for="connection in connections" :key="connection.id" margin="x-small">
+          :key="connection.id"
-        <user-teaser :user="connection" />
+        />
-      </ds-space>
+      </div>
-      <ds-space v-if="allConnectionsCount - connections.length" margin="small">
       <base-button
+        v-if="allConnectionsCount - connections.length"
         @click="$emit('fetchAllConnections', type)"
         :loading="loading"
         size="small"
         color="softer"
+        class="spacer-x-small"
       >
         {{
           $t('profile.network.andMore', {
@@ -25,25 +26,18 @@
           })
         }}
       </base-button>
-      </ds-space>
-    </template>
-    <template v-else-if="connections.length > 7">
-      <div class="overflow-container">
-        <ds-space v-for="connection in filteredConnections" :key="connection.id" margin="x-small">
-          <user-teaser :user="connection" />
-        </ds-space>
-      </div>
-      <ds-space margin="x-small">
       <ds-input
+        v-if="connections.length > 7"
         @input.native="setFilter"
         :placeholder="filter"
         v-focus="true"
         size="small"
         icon="filter"
         :name="`${type}Filter`"
+        class="spacer-x-small"
       />
-      </ds-space>
     </template>
+    <p v-else class="nobody-message">{{ userName }} {{ $t(`profile.network.${type}Nobody`) }}</p>
   </base-card>
 </template>
 
@@ -76,6 +70,10 @@ export default {
     connections() {
       return this.user[this.type]
     },
+    connectionsClass() {
+      const overflow = this.connections.length > 7 ? ' --overflow' : ''
+      return `connections${overflow}`
+    },
     filteredConnections() {
       if (!this.filter) {
         return this.connections
@@ -111,19 +109,25 @@ export default {
 
 <style lang="scss">
 .follow-list {
+  display: flex;
+  flex-direction: column;
   position: relative;
-  max-height: ($size-avatar-small + $space-x-small * 2) * 8;
+  //max-height: ($size-avatar-small + $space-x-small * 2) * 8;
   width: auto;
 
-  > .no-connections {
+  .connections.--overflow {
-    text-align: center;
-    color: $text-color-soft;
-  }
-
-  > .overflow-container {
     height: ($size-avatar-base + $space-x-small * 2) * 5;
     margin-top: -$space-x-small;
     overflow-y: auto;
   }
+
+  .nobody-message {
+    text-align: center;
+    color: $text-color-soft;
+  }
+
+  .spacer-x-small {
+    margin: $space-x-small 0;
+  }
 }
 </style>