Fix instance cards with some instances

package.json

@@ -26,6 +26,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "lodash": "^4.17.15",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"

src/components/InstanceCard.vue

@@ -7,8 +7,8 @@
         <div class="host">{{ instance.host }}</div>
       </div>
 
-      <div class="description">
+      <div class="description" :title="instance.shortDescription">
-        {{ instance.shortDescription }}
+        {{ truncatedDescription }}
       </div>
 
       <div class="upload-limits" v-if="isVideoMaker">
@@ -72,7 +72,7 @@
           <icon-languages></icon-languages>
         </div>
 
-        <div>{{ getLanguages(instance.languages) }}</div>
+        <div>{{ languages }}</div>
       </div>
 
       <div class="nsfw">
@@ -119,11 +119,12 @@
 
   .label {
     color: $grey;
+    letter-spacing: -0.5px;
   }
 
   .left {
     margin-right: 40px;
-    width: 490px;
+    width: 480px;
 
     .name-host {
       display: flex;
@@ -155,6 +156,7 @@
     }
 
     .tags {
+      display: flex;
       margin-top: auto;
     }
   }
@@ -168,10 +170,6 @@
 
     .nsfw {
       display: flex;
-
-      .label {
-        color: $grey;
-      }
     }
 
     .link {
@@ -188,6 +186,7 @@
   import IconFollowing from './icons/IconFollowing'
   import IconLanguages from './icons/IconLanguages'
   import IconQuota from './icons/IconQuota'
+  import truncate from 'lodash/truncate'
 
   export default {
     components: {
@@ -205,8 +204,19 @@
       isVideoMaker: Boolean
     },
 
-    data () {
+    computed: {
-      return {}
+      truncatedDescription () {
+        const t = this.instance.shortDescription
+
+        return truncate(t, { separator: /,? /, length: 200 })
+      },
+
+      languages () {
+        return this.instance.languages
+          .map(l => this.translatedLanguages[l])
+          .filter(l => !!l)
+          .join(', ')
+      }
     },
 
     methods: {
@@ -227,10 +237,6 @@
         return calc + format.type
       },
 
-      getLanguages (languages) {
-        return languages.map(l => this.translatedLanguages[l]).join(', ')
-      },
-
       getUrl (instance) {
         return `https://${instance.host}`
       }

src/components/InstancesList.vue

@@ -381,8 +381,7 @@
         const params = {
           start: 0,
           count: 250,
-          healthy: true,
+          healthy: true
-          search: 'peertube2'
         }
 
         if (this.wantTo === 'create-account') params.signup = true