diff --git a/package.json b/package.json index 43fdd2d..35515b2 100644 --- a/package.json +++ b/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" diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue index 6918c72..56f70de 100644 --- a/src/components/InstanceCard.vue +++ b/src/components/InstanceCard.vue @@ -7,8 +7,8 @@
{{ instance.host }}
-
- {{ instance.shortDescription }} +
+ {{ truncatedDescription }}
@@ -72,7 +72,7 @@
-
{{ getLanguages(instance.languages) }}
+
{{ languages }}
@@ -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 () { - return {} + computed: { + 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}` } diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue index b296d95..46b5f39 100644 --- a/src/components/InstancesList.vue +++ b/src/components/InstancesList.vue @@ -381,8 +381,7 @@ const params = { start: 0, count: 250, - healthy: true, - search: 'peertube2' + healthy: true } if (this.wantTo === 'create-account') params.signup = true