From 90f52faad22e885e3e29139f236a3b62d019012b Mon Sep 17 00:00:00 2001 From: RemixDev <RemixDev64@gmail.com> Date: Fri, 19 Aug 2022 20:44:55 +0200 Subject: [PATCH] Added button to download just one tab --- src/components/pages/Artist.vue | 12 +++++++++++- src/lang/en.mjs | 1 + src/styles/css/components.css | 4 ++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/pages/Artist.vue b/src/components/pages/Artist.vue index be6504b..b9f37f8 100644 --- a/src/components/pages/Artist.vue +++ b/src/components/pages/Artist.vue @@ -1,5 +1,5 @@ <template> - <div class="relative image-header"> + <div class="relative fixed-footer image-header"> <header class="flex items-center" :style="headerStyle"> <h1 class="m-0">{{ artistName }}</h1> @@ -86,6 +86,16 @@ </tr> </tbody> </table> + <footer class="bg-background-main"> + <div style="flex-grow: 1;"> + <button :data-link="downloadLink+'/discography'" class="btn btn-flat" @click.stop="sendAddToQueue(downloadLink)"> + {{ `${$t('globals.download', { thing: $t('globals.listTabs.discography') })}` }} + </button> + </div> + <button :data-link="downloadLink+'/'+currentTab" class="flex items-center btn btn-primary" @click.stop="sendAddToQueue(downloadLink+'/'+currentTab)"> + {{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${currentTab}`, 2) })}` }}<i class="ml-2 material-icons">file_download</i> + </button> + </footer> </div> </template> diff --git a/src/lang/en.mjs b/src/lang/en.mjs index 171536a..d25de0b 100644 --- a/src/lang/en.mjs +++ b/src/lang/en.mjs @@ -21,6 +21,7 @@ const en = { listTabs: { empty: '', all: 'all', + discography: 'discography', top_result: 'top result', album: 'album | albums', artist: 'artist | artists', diff --git a/src/styles/css/components.css b/src/styles/css/components.css index df1e432..3a9d44d 100644 --- a/src/styles/css/components.css +++ b/src/styles/css/components.css @@ -24,6 +24,10 @@ .btn-primary { @apply bg-primary; } + .btn-flat { + background-color: rgba(0, 0, 0, 0); + color: var(--foreground); + } .btn-primary:hover { @apply bg-blue-600 border-foreground;