fixed charts tab style, improved tracklist tab style, minor changes

This commit is contained in:
robtonino 2020-05-12 20:42:01 +02:00
parent a3dc910b91
commit 959bd89d85
9 changed files with 84 additions and 42136 deletions

View File

@ -24,6 +24,8 @@ html {
--toast-secondary: #ffffff22; --toast-secondary: #ffffff22;
--toast-text: #ffffffde; --toast-text: #ffffffde;
--separator: #8f8f8f; --separator: #8f8f8f;
--explicit-separator: 0.3125em;
} }
html[data-theme='dark'] { html[data-theme='dark'] {

View File

@ -122,7 +122,7 @@ p,
word-break: break-word; word-break: break-word;
} }
a { a:visited {
color: dodgerblue; color: dodgerblue;
} }

View File

@ -0,0 +1,4 @@
.charts_grid .release .coverart {
width: 156px;
height: 156px;
}

View File

@ -1,3 +1,4 @@
@import './charts-tab.css';
@import './download-tab.css'; @import './download-tab.css';
@import './favorites-tab.css'; @import './favorites-tab.css';
@import './home-tab.css'; @import './home-tab.css';

View File

@ -1,3 +1,23 @@
.trackCheckbox { .tracklist_table td {
height: 50px;
vertical-align: middle;
}
.tracklist_table .explicit_icon {
vertical-align: middle;
margin-right: var(--explicit-separator);
}
.tracklist_table .track_position_head,
.tracklist_table .track_position {
width: 10px;
text-align: center;
}
.explicit_tracklist {
margin-left: var(--explicit-separator);
}
.track_checkbox {
cursor: pointer; cursor: pointer;
} }

View File

@ -298,8 +298,7 @@ <h3 class="section_heading">Popular playlists</h3>
<section v-if="albums.length" class="home_section"> <section v-if="albums.length" class="home_section">
<h3 class="section_heading">Most streamed albums</h3> <h3 class="section_heading">Most streamed albums</h3>
<div class="release_grid"> <div class="release_grid">
<div v-for="release in albums" class="release clickable" @click="albumView" <div v-for="release in albums" class="release clickable" @click="albumView" :data-id="release.id">
:data-id="release.id">
<div class="cover_container"> <div class="cover_container">
<img class="rounded coverart" :src="release.cover_medium"> <img class="rounded coverart" :src="release.cover_medium">
<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal" <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@ -314,13 +313,24 @@ <h3 class="section_heading">Most streamed albums</h3>
</div> </div>
<div id="charts_tab" class="main_tabcontent"> <div id="charts_tab" class="main_tabcontent">
<h1>Charts</h1> <h2 class="page_heading">Charts</h2>
<div v-if='country == ""' id="charts_selection"> <div v-if='country === ""' id="charts_selection">
<div class="release_grid"> <div class="release_grid charts_grid">
<div v-for="release in countries" class="release clickable" @click="getTrackList"
:data-title="release.title" :data-id="release.id"> <!-- Ugly af -->
<img class="rounded coverart" :src="release.picture_medium"> <template v-for="release in countries">
</div> <div v-if="release.title === 'Worldwide'" class="release clickable" @click="getTrackList"
:data-title="release.title" :data-id="release.id" :key="release.id">
<img class="rounded coverart" :src="release.picture_medium">
</div>
</template>
<template v-for="release in countries">
<div v-if="release.title !== 'Worldwide'" class="release clickable" @click="getTrackList"
:data-title="release.title" :data-id="release.id" :key="release.id">
<img class="rounded coverart" :src="release.picture_medium">
</div>
</template>
</div> </div>
</div> </div>
<div v-else id="charts_table"> <div v-else id="charts_table">
@ -999,15 +1009,18 @@ <h1>{{ title }}</h1>
<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header"> <div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
<header <header
:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }"> :style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
<h1 class="inline-flex">{{ title }} <i v-if="explicit" class="material-icons">explicit</i></h1> <h1 class="inline-flex">{{ title }} <i v-if="explicit"
class="material-icons explicit_tracklist">explicit</i></h1>
<h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right" <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right"
v-if="release_date">{{ release_date }}</span></h2> v-if="release_date">{{ release_date }}</span></h2>
</header> </header>
<table> <table class="tracklist_table">
<thead> <thead>
<tr> <tr>
<th v-for="data in head" v-html="data.title" :style="{ 'width': data.width ? data.width : 'auto'}"> <th v-for="data in head" v-html="data.title"
:class="{ track_position_head: data.title.trim() === '#' }"
:style="{ 'width': data.width ? data.width : 'auto'}">
</th> </th>
<th style="width: 32px"><input @click="toggleAll" class="selectAll" type="checkbox"></th> <th style="width: 32px"><input @click="toggleAll" class="selectAll" type="checkbox"></th>
</tr> </tr>
@ -1018,20 +1031,21 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<tr v-if="track.type == 'track'"> <tr v-if="track.type == 'track'">
<td> <td>
<i v-if="track.preview" @click=playPausePreview <i v-if="track.preview" @click=playPausePreview
:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')" :class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
:data-preview="track.preview">play_arrow</i> :data-preview="track.preview">play_arrow</i>
<i v-else class="material-icons disabled">play_arrow</i> <i v-else class="material-icons disabled">play_arrow</i>
</td> </td>
<td>{{ track.track_position }}</td> <td class="track_position">{{ track.track_position }}</td>
<td class="inline-flex"><i v-if="track.explicit_lyrics" <td>
class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} <i v-if="track.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
</td> </td>
<td class="clickable" @click="artistView" :data-id="track.artist.id"> <td class="clickable" @click="artistView" :data-id="track.artist.id">
{{ track.artist.name }}</td> {{ track.artist.name }}</td>
<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id"> <td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
{{ track.album.title }}</td> {{ track.album.title }}</td>
<td>{{ convertDuration(track.duration) }}</td> <td>{{ convertDuration(track.duration) }}</td>
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td> <td><input class="track_checkbox" type="checkbox" v-model="track.selected"></td>
</tr> </tr>
<tr v-else-if="track.type == 'disc_separator'"> <tr v-else-if="track.type == 'disc_separator'">
<td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }} <td colspan="6" style="opacity: 0.54;"><i class="material-icons">album</i>{{ track.number }}
@ -1043,8 +1057,8 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<tr v-for="(track, i) in body"> <tr v-for="(track, i) in body">
<td> <td>
<i v-if="track.preview_url" @click=playPausePreview <i v-if="track.preview_url" @click=playPausePreview
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')" :class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
:data-preview="track.preview_url">play_arrow</i> :data-preview="track.preview_url">play_arrow</i>
<i v-else class="material-icons disabled">play_arrow</i> <i v-else class="material-icons disabled">play_arrow</i>
</td> </td>
<td>{{ i+1 }}</td> <td>{{ i+1 }}</td>
@ -1054,7 +1068,7 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<td>{{ track.artists[0].name }}</td> <td>{{ track.artists[0].name }}</td>
<td>{{ track.album.name }}</td> <td>{{ track.album.name }}</td>
<td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td> <td>{{ convertDuration(Math.floor(track.duration_ms/1000)) }}</td>
<td><input class="trackCheckbox" type="checkbox" v-model="track.selected"></td> <td><input class="track_checkbox" type="checkbox" v-model="track.selected"></td>
</tr> </tr>
</template> </template>
</tbody> </tbody>
@ -1105,4 +1119,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
<script src="/public/js/bundle.js"></script> <script src="/public/js/bundle.js"></script>
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -45,16 +45,20 @@ const ChartsTab = new Vue({
initCharts(data) { initCharts(data) {
this.countries = data this.countries = data
this.country = localStorage.getItem('chart') || '' this.country = localStorage.getItem('chart') || ''
if (this.country) {
let i = 0 if (!this.country) return
for (i; i < this.countries.length; i++) if (this.countries[i].title == this.country) break
if (i != this.countries.length) { let i = 0
this.id = this.countries[i].id for (; i < this.countries.length; i++) {
socket.emit('getChartTracks', this.id) if (this.countries[i].title == this.country) break
} else { }
this.country = ''
localStorage.setItem('chart', this.country) if (i !== this.countries.length) {
} this.id = this.countries[i].id
socket.emit('getChartTracks', this.id)
} else {
this.country = ''
localStorage.setItem('chart', this.country)
} }
} }
}, },