evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/modules/base/base.css
View File

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

2
public/css/modules/globals.css
View File

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

4
public/css/modules/tabs/charts-tab.css Normal file
View File

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

1
public/css/modules/tabs/tabs.css
View File

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

22
public/css/modules/tabs/tracklist-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;
}

58
public/index.html
View File

@ -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"
:data-id="release.id">
<div v-for="release in albums" class="release clickable" @click="albumView" :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>
<div v-if='country == ""' id="charts_selection">
<div class="release_grid">
<div v-for="release in countries" class="release clickable" @click="getTrackList"
:data-title="release.title" :data-id="release.id">
<img class="rounded coverart" :src="release.picture_medium">
</div>
<h2 class="page_heading">Charts</h2>
<div v-if='country === ""' id="charts_selection">
<div class="release_grid charts_grid">
<!-- Ugly af -->
<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>
<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' : '')"
:data-preview="track.preview">play_arrow</i>
:class="'material-icons' + (track.preview ? ' preview_playlist_controls' : '')"
: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="inline-flex"><i v-if="track.explicit_lyrics"
class="material-icons">explicit</i>{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
<td class="track_position">{{ track.track_position }}</td>
<td>
<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' : '')"
:data-preview="track.preview_url">play_arrow</i>
:class="'material-icons' + (track.preview_url ? ' preview_playlist_controls' : '')"
: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>

42105
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
public/js/bundle.js.map
View File

File diff suppressed because one or more lines are too long

24
src/js/modules/components/charts-tab.js
View File

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