Made download buttons actual buttons

This commit is contained in:
RemixDev 2020-09-23 17:51:16 +02:00
parent 70813bdefc
commit 4ece538746
4 changed files with 13 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -23,7 +23,7 @@
> >
<div class="cover_container"> <div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" /> <img aria-hidden="true" class="rounded coverart" :src="release.picture_medium" />
<div <button
role="button" role="button"
aria-label="download" aria-label="download"
@click.stop="addToQueue" @click.stop="addToQueue"
@ -32,7 +32,7 @@
tabindex="0" tabindex="0"
> >
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </button>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text"> <p class="secondary-text">
@ -60,7 +60,7 @@
> >
<div class="cover_container"> <div class="cover_container">
<img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" /> <img aria-hidden="true" class="rounded coverart" :src="release.cover_medium" />
<div <button
role="button" role="button"
aria-label="download" aria-label="download"
@click.stop="addToQueue" @click.stop="addToQueue"
@ -69,7 +69,7 @@
tabindex="0" tabindex="0"
> >
<i class="material-icons" :title="$t('globals.download_hint')">get_app</i> <i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
</div> </button>
</div> </div>
<p class="primary-text">{{ release.title }}</p> <p class="primary-text">{{ release.title }}</p>
<p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p> <p class="secondary-text">{{ `${$t('globals.by', { artist: release.artist.name })}` }}</p>

View File

@ -295,11 +295,15 @@ a {
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; text-align: center;
background-color: #000000;
border-radius: 50%;
min-width: 32px;
padding: 0px;
height: 44px;
border: 0px;
i { i {
background-color: #000000;
color: white; color: white;
border-radius: 50%;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
} }
@ -316,6 +320,7 @@ a {
.download_overlay { .download_overlay {
opacity: 1; opacity: 1;
border: 0px;
} }
} }
} }