diff --git a/changes/changelog.d/766.enhancement b/changes/changelog.d/766.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..7aca9fb1c041d8119f52db134b24ecc306920945 --- /dev/null +++ b/changes/changelog.d/766.enhancement @@ -0,0 +1 @@ +Added title on hover for truncated content (#766) diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue index 3a5bf2db8a3ddbee831bbbdf5d88c7fc1d018b3f..8c44d6041b33415423eff0fe857ebebcc83838bf 100644 --- a/front/src/components/Sidebar.vue +++ b/front/src/components/Sidebar.vue @@ -135,9 +135,11 @@ <img class="ui mini image" v-else src="../assets/audio/default-cover.png"> </td> <td colspan="4"> - <button class="title reset ellipsis" :aria-label="labels.selectTrack"> + <button class="title reset ellipsis" :title="track.title" :aria-label="labels.selectTrack"> <strong>{{ track.title }}</strong><br /> - {{ track.artist.name }} + <span> + {{ track.artist.name }} + </span> </button> </td> <td> diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue index 8cc9dcf6c5bfe7a95fd90ff86c977e309edc566d..258b0f9d1a67e51b2f4e7349bd45c83feb7c08f2 100644 --- a/front/src/components/audio/album/Card.vue +++ b/front/src/components/audio/album/Card.vue @@ -10,7 +10,7 @@ </div> <div class="meta"> <span> - <router-link tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}"> + <router-link :title="album.artist.name" tag="span" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}"> <span v-translate="{artist: album.artist.name}" :translate-params="{artist: album.artist.name}">By %{ artist }</span> </router-link> </span><span class="time" v-if="album.release_date">– {{ album.release_date | year }}</span> @@ -24,7 +24,7 @@ </td> <td class="content-cell" colspan="5"> <track-favorite-icon :track="track"></track-favorite-icon> - <router-link class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}"> + <router-link :title="track.title" class="track discrete link" :to="{name: 'library.tracks.detail', params: {id: track.id }}"> <template v-if="track.position"> {{ track.position }}. </template> diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue index 1876c42c01f1d62bb567f6600ea872b19bf105f6..d255928547da237b2074b6fb64a82717dc9dd2a5 100644 --- a/front/src/components/audio/artist/Card.vue +++ b/front/src/components/audio/artist/Card.vue @@ -15,7 +15,7 @@ <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png"> </td> <td colspan="4"> - <router-link class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}"> + <router-link :title="album.title" class="discrete link" :to="{name: 'library.albums.detail', params: {id: album.id }}"> <strong>{{ album.title }}</strong> </router-link><br /> {{ album.tracks_count }} tracks diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue index d3b7dc734b91b528561c764873de1a75e53b9317..e391977f32cf70cb80adbfbccef029b752a4084e 100644 --- a/front/src/components/audio/track/Row.vue +++ b/front/src/components/audio/track/Row.vue @@ -8,7 +8,7 @@ <img class="ui mini image" v-else src="../../../assets/audio/default-cover.png"> </td> <td colspan="6"> - <router-link class="track" :to="{name: 'library.tracks.detail', params: {id: track.id }}"> + <router-link class="track" :title="track.title" :to="{name: 'library.tracks.detail', params: {id: track.id }}"> <template v-if="displayPosition && track.position"> {{ track.position }}. </template> @@ -16,21 +16,21 @@ </router-link> </td> <td colspan="4"> - <router-link v-if="track.artist.id === albumArtist.id" class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"> + <router-link v-if="track.artist.id === albumArtist.id" :title="track.artist.name" class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"> {{ track.artist.name }} </router-link> <template v-else> - <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: albumArtist.id }}"> + <router-link class="artist discrete link" :title="albumArtist.name" :to="{name: 'library.artists.detail', params: {id: albumArtist.id }}"> {{ albumArtist.name }} </router-link> / - <router-link class="artist discrete link" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"> + <router-link class="artist discrete link" :title="track.artist.name" :to="{name: 'library.artists.detail', params: {id: track.artist.id }}"> {{ track.artist.name }} </router-link> </template> </td> <td colspan="4"> - <router-link class="album discrete link" :to="{name: 'library.albums.detail', params: {id: track.album.id }}"> + <router-link class="album discrete link" :title="track.album.title" :to="{name: 'library.albums.detail', params: {id: track.album.id }}"> {{ track.album.title }} </router-link> </td> diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue index 7c4dbbf38a0633a32b25dbfc7dabe46d25102a93..7d44f0e191d5a55afaf645e5fa5181dfd329f5f5 100644 --- a/front/src/components/playlists/PlaylistModal.vue +++ b/front/src/components/playlists/PlaylistModal.vue @@ -42,7 +42,7 @@ class="ui icon basic small button" :to="{name: 'library.playlists.detail', params: {id: playlist.id }, query: {mode: 'edit'}}"><i class="ui pencil icon"></i></router-link> </td> - <td> + <td :title="playlist.name"> <router-link :to="{name: 'library.playlists.detail', params: {id: playlist.id }}">{{ playlist.name }}</router-link></td> <td><human-date :date="playlist.modification_date"></human-date></td> <td>{{ playlist.tracks_count }}</td>