diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue index 3e5cc6282ec8ac89cba9c13b70d8ba08a722a065..6f2b2ae87d6eaba4d5d5a3a89da9d5d77098c07c 100644 --- a/front/src/components/playlists/PlaylistModal.vue +++ b/front/src/components/playlists/PlaylistModal.vue @@ -1,24 +1,23 @@ <template> <modal @update:show="update" :show="$store.state.playlists.showModal"> <div class="header"> - <translate translate-context="Popup/Playlist/Title/Verb">Manage playlists</translate> - </div> - <div class="scrolling content"> - <div class="description"> - <template v-if="track"> - <h4 class="ui header"><translate translate-context="Popup/Playlist/Title">Current track</translate></h4> - <span + <template v-if="track"> + <h2 class="ui header"> + <translate translate-context="Popup/Playlist/Title/Verb">Add to playlist</translate> + <div + class="ui sub header" translate-context="Popup/Playlist/Paragraph" v-translate="{artist: track.artist.name, title: track.title}" :translate-params="{artist: track.artist.name, title: track.title}"> "%{ title }", by %{ artist } - </span> - <div class="ui divider"></div> - </template> - - <playlist-form :key="formKey"></playlist-form> - <div class="ui divider"></div> - </div> + </div> + </h2> + </template> + <translate v-else translate-context="Popup/Playlist/Title/Verb">Manage playlists</translate> + </div> + <div class="scrolling content"> + <playlist-form :key="formKey"></playlist-form> + <div class="ui divider"></div> <div v-if="playlists.length > 0"> <div v-if="showDuplicateTrackAddConfirmation" class="ui warning message"> <p translate-context="Popup/Playlist/Paragraph"