Started working on album tab

This commit is contained in:
RemixDev
2020-04-18 11:17:39 +02:00
parent 83a0fb252f
commit 683cf30927
3 changed files with 70 additions and 20 deletions

View File

@@ -364,7 +364,7 @@
<div id="about_tab" class="main_tabcontent"><h1>About</h1></div>
<div id="artist_tab" class="main_tabcontent fixed_footer">
<div id="artist_tab" class="main_tabcontent fixed_footer image_header">
<header class="inline-flex" v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }}</h1>
<div class="fab right"><i class="material-icons">get_app</i></div>
@@ -385,18 +385,16 @@
</tr>
</thead>
<tbody>
<template v-for="release in showTable">
<tr>
<td class="inline-flex">
<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;"/>
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
{{release.title}}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
</td>
<td>{{release.release_date}}</td>
<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)" v-bind:data-link="release.link" class="material-icons">file_download</i></td>
</tr>
</template>
<tr v-for="release in showTable">
<td class="inline-flex clickable" v-on:click="albumView(event)" v-bind:data-id="release.id">
<img class="rounded" v-bind:src="release.cover_small" style="margin-right: 16px;"/>
<i v-if="release.explicit_lyrics" class="material-icons" data-tooltip="Explicit" style="color:#FF3B30;">explicit</i>
{{release.title}}
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">fiber_new</i>
</td>
<td>{{release.release_date}}</td>
<td><i v-on:click="addToQueue(event)" v-on:contextmenu="openQualityModal(event)" v-bind:data-link="release.link" class="material-icons">file_download</i></td>
</tr>
</tbody>
</table>
@@ -405,13 +403,33 @@
</footer>
</div>
<div id="tracklist_tab" class="main_tabcontent fixed_footer">
<header>
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
<header v-bind:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1>{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1>
<h2><span v-if="metadata">{{ metadata }}</span><span v-if="release_date">{{ release_date }}</span></h2>
</header>
<table>
<thead>
<tr>
<th v-for="data in head" v-html="data.title"></th>
</tr>
</thead>
<tbody>
<tr v-for="track in body">
<td><i class="material-icons">play_arrow</i></td>
<td>{{ track.track_position }}</td>
<td><i v-if="track.explicit_lyrics" class="material-icons">explicit</i>{{ track.title }} <span v-if="track.title_version">{{track.title_version}}</span></td>
<td>{{ track.artist.name }}</td>
<td>{{ convertDuration(track.duration) }}</td>
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td>
</tr>
</tbody>
</table>
<footer>
<button v-bind:data-link="link">Download {{ type }}</button>
<button>Download selection<i class="material-icons right">file_download</i></button>
<button onclick="backTab()">Back</button>
</footer>
</div>