From 71bd0961af9d4b34a393f43247fbd5897fd12d35 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Fri, 27 Apr 2018 21:50:25 +0200
Subject: [PATCH] Fixed #184: small UI glitches/bugs in federation tabs
---
changes/changelog.d/184.bugfix | 1 +
front/src/App.vue | 6 ++++++
front/src/components/federation/LibraryCard.vue | 8 ++++++--
front/src/components/federation/LibraryForm.vue | 2 +-
front/src/components/federation/LibraryTrackTable.vue | 2 +-
front/src/views/federation/LibraryDetail.vue | 7 ++++++-
front/src/views/federation/LibraryList.vue | 3 ++-
7 files changed, 23 insertions(+), 6 deletions(-)
create mode 100644 changes/changelog.d/184.bugfix
diff --git a/changes/changelog.d/184.bugfix b/changes/changelog.d/184.bugfix
new file mode 100644
index 00000000..354b691d
--- /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 e8cac747..a2133742 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 757561fb..a16c80f7 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 7e1d5c49..7547c371 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 925ef388..d8ee48bf 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 bd2e63c4..64f2cc7c 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 7b0b2594..cc833d3a 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 () {
--
GitLab