diff --git a/changes/changelog.d/184.bugfix b/changes/changelog.d/184.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..354b691db2cf62d5191b7cafa84e779c685d347e --- /dev/null +++ b/changes/changelog.d/184.bugfix @@ -0,0 +1 @@ +Fixed small UI glitches/bugs in federation tabs (#184) diff --git a/front/src/App.vue b/front/src/App.vue index e8cac74761c84e5d26ea354fb400b61f3543e0f4..a213374284fd072b22513fa63f15b52b56458259 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -97,6 +97,12 @@ html, body { } } +.ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + .ui.small.text.container { max-width: 500px !important; } diff --git a/front/src/components/federation/LibraryCard.vue b/front/src/components/federation/LibraryCard.vue index 757561fb352be6300ae376780239f6e5fbbda612..a16c80f7eebb611cf3e1617a9fa4dcb6c25aac9d 100644 --- a/front/src/components/federation/LibraryCard.vue +++ b/front/src/components/federation/LibraryCard.vue @@ -1,8 +1,12 @@ <template> <div class="ui card"> <div class="content"> - <div class="header"> - {{ displayName }} + <div class="header ellipsis"> + <router-link + :title="displayName" + :to="{name: 'federation.libraries.detail', params: {id: library.uuid }}"> + {{ displayName }} + </router-link> </div> </div> <div class="content"> diff --git a/front/src/components/federation/LibraryForm.vue b/front/src/components/federation/LibraryForm.vue index 7e1d5c49f4a70c67fa64db3fefeae91b75dc28fb..7547c3718faebaecee8187bb2314d09ca62718a6 100644 --- a/front/src/components/federation/LibraryForm.vue +++ b/front/src/components/federation/LibraryForm.vue @@ -72,7 +72,7 @@ export default { this.isLoading = true self.errors = [] self.result = null - axios.get('/federation/libraries/fetch/', {params: {account: this.libraryUsername}}).then((response) => { + axios.get('/federation/libraries/fetch/', {params: {account: this.libraryUsername.trim()}}).then((response) => { self.result = response.data self.result.display_name = self.libraryUsername self.isLoading = false diff --git a/front/src/components/federation/LibraryTrackTable.vue b/front/src/components/federation/LibraryTrackTable.vue index 925ef3889668d5fbae39cf434fa8db390d0f4d06..d8ee48bf2b8e93f0ab9c22494ecee2883f5e859f 100644 --- a/front/src/components/federation/LibraryTrackTable.vue +++ b/front/src/components/federation/LibraryTrackTable.vue @@ -89,7 +89,7 @@ <router-link v-if="importBatch" :to="{name: 'library.import.batches.detail', params: {id: importBatch.id }}"> - <i18next path="Import #{%id%} launched" :id="importBatch.id"/> + {{ $t('Import #{% id %} launched', {id: importBatch.id}) }} </router-link> </th> <th></th> diff --git a/front/src/views/federation/LibraryDetail.vue b/front/src/views/federation/LibraryDetail.vue index bd2e63c4d9c4644c66d625bd8218dcdbf864ef85..64f2cc7c6534bd73c94bde57b485755038d92758 100644 --- a/front/src/views/federation/LibraryDetail.vue +++ b/front/src/views/federation/LibraryDetail.vue @@ -84,7 +84,12 @@ <tr> <td>{{ $t('Library size') }}</td> <td> - {{ $t('{%count%} tracks', { count: object.tracks_count }) }} + <template v-if="object.tracks_count"> + {{ $t('{%count%} tracks', { count: object.tracks_count }) }} + </template> + <template v-else> + {{ $t('Unkwnown') }} + </template> </td> <td></td> </tr> diff --git a/front/src/views/federation/LibraryList.vue b/front/src/views/federation/LibraryList.vue index 7b0b259412a3665bb4c4c04f1ce62444872439dc..cc833d3a3d226d4c1e78b667860ff20423f5964d 100644 --- a/front/src/views/federation/LibraryList.vue +++ b/front/src/views/federation/LibraryList.vue @@ -13,7 +13,7 @@ <div class="fields"> <div class="field"> <label>{{ $t('Search') }}</label> - <input type="text" v-model="query" placeholder="Enter an library domain name..."/> + <input class="search" type="text" v-model="query" placeholder="Enter an library domain name..."/> </div> <div class="field"> <label>{{ $t('Ordering') }}</label> @@ -115,6 +115,7 @@ export default { }, mounted () { $('.ui.dropdown').dropdown() + $(this.$el).find('.field .search').focus() }, methods: { updateQueryString: _.debounce(function () {