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

public/css/modules/base/base.css

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

public/css/modules/globals.css

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

public/css/modules/tabs/charts-tab.css

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

public/css/modules/tabs/tabs.css

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

public/css/modules/tabs/tracklist-tab.css

@@ -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;
 }

public/index.html

@@ -298,8 +298,7 @@ <h3 class="section_heading">Popular playlists</h3>
 							<section v-if="albums.length" class="home_section">
 								<h3 class="section_heading">Most streamed albums</h3>
 								<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">
 											<img class="rounded coverart" :src="release.cover_medium">
 											<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
@@ -314,13 +313,24 @@ <h3 class="section_heading">Most streamed albums</h3>
 						</div>
 
 						<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 v-else id="charts_table">
@@ -999,15 +1009,18 @@ <h1>{{ title }}</h1>
 						<div id="tracklist_tab" class="main_tabcontent fixed_footer image_header">
 							<header
 								: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"
 										v-if="release_date">{{ release_date }}</span></h2>
 							</header>
 
-							<table>
+							<table class="tracklist_table">
 								<thead>
 									<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 style="width: 32px"><input @click="toggleAll" class="selectAll" type="checkbox"></th>
 									</tr>
@@ -1018,20 +1031,21 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 											<tr v-if="track.type == 'track'">
 												<td>
 													<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>
 												</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 class="clickable" @click="artistView" :data-id="track.artist.id">
 													{{ track.artist.name }}</td>
 												<td class="clickable" v-if="type == 'Playlist'" @click="albumView" :data-id="track.album.id">
 													{{ track.album.title }}</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 v-else-if="track.type == 'disc_separator'">
 												<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">
 											<td>
 												<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>
 											</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.album.name }}</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>
 									</template>
 								</tbody>
@@ -1105,4 +1119,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 	<script src="/public/js/bundle.js"></script>
 
-</html>
+</html>

src/js/modules/components/charts-tab.js

@@ -45,16 +45,20 @@ const ChartsTab = new Vue({
 		initCharts(data) {
 			this.countries = data
 			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)
 			}
 		}
 	},