started table style refactoring
This commit is contained in:
Roberto Tonino
parent
7695632a67
commit
085b819a2b
@ -9,7 +9,7 @@
|
||||
"scripts": {
|
||||
"build:js": "rollup -c",
|
||||
"watch:js": "rollup -c -w",
|
||||
"serve": "python server.py",
|
||||
"serve": "python ../server.py",
|
||||
"dev": "npm-run-all --parallel watch:js serve",
|
||||
"build": "npm-run-all build:js"
|
||||
},
|
||||
|
||||
@ -1,3 +1,78 @@
|
||||
/* Tables */
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
-webkit-border-horizontal-spacing: 0px;
|
||||
-webkit-border-vertical-spacing: 0px;
|
||||
}
|
||||
|
||||
.table td,
|
||||
.table th {
|
||||
height: 50px;
|
||||
padding: 4px 12px 4px 5px;
|
||||
vertical-align: middle;
|
||||
/* border: 0px black solid; */
|
||||
}
|
||||
|
||||
.table th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table tr:nth-child(even) {
|
||||
background-color: var(--secondary-background);
|
||||
border: 0px black solid;
|
||||
}
|
||||
|
||||
.table td img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.tracks_table td.breakline {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Tables End */
|
||||
|
||||
#loading_overlay {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -84,7 +159,7 @@ i.disabled {
|
||||
}
|
||||
|
||||
i.explicit_icon {
|
||||
color: #FF3B30;
|
||||
color: #ff3b30;
|
||||
margin-right: var(--explicit-separator);
|
||||
}
|
||||
|
||||
@ -97,33 +172,7 @@ span.tag {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
-webkit-border-horizontal-spacing: 0px;
|
||||
-webkit-border-vertical-spacing: 0px;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding: 4px 12px 4px 5px;
|
||||
vertical-align: middle;
|
||||
border: 0px black solid;
|
||||
}
|
||||
|
||||
td img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table tr:nth-child(even) {
|
||||
background-color: var(--secondary-background);
|
||||
border: 0px black solid;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p,
|
||||
.tracks_table td.breakline {
|
||||
p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@ -147,6 +196,7 @@ a:visited {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inline-flex .right {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -264,25 +314,30 @@ input[type='checkbox']:checked {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin: 16px 0px;
|
||||
}
|
||||
|
||||
th.sortable {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
th.sort-asc:after {
|
||||
content: '\25b2';
|
||||
font-size: 0.7em;
|
||||
padding-left: 3px;
|
||||
line-height: 0.7em;
|
||||
}
|
||||
|
||||
th.sort-desc:after {
|
||||
content: '\25bc';
|
||||
font-size: 0.7em;
|
||||
padding-left: 3px;
|
||||
line-height: 0.7em;
|
||||
}
|
||||
|
||||
.fab {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
@ -292,6 +347,7 @@ th.sort-desc:after {
|
||||
color: var(--accent-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fab i {
|
||||
font-size: 24px;
|
||||
padding: 16px;
|
||||
|
||||
@ -2,12 +2,6 @@
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.top-tracks-position {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.home_section {
|
||||
border-top: 1px solid var(--separator);
|
||||
padding-top: 25px;
|
||||
|
||||
@ -104,13 +104,3 @@
|
||||
grid-row-gap: 0px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.track_row > td > img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.track_row > td > a > img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
@ -1,23 +1 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -68,8 +68,8 @@
|
||||
<main id="main_content">
|
||||
<div id="middle_section">
|
||||
<header id="search">
|
||||
<input id="searchbar" autocomplete="off" type="text" name="searchbar" value="" placeholder="Search or paste a link..."
|
||||
autofocus>
|
||||
<input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
|
||||
placeholder="Search or paste a link..." autofocus>
|
||||
</header>
|
||||
<section id="content">
|
||||
<div id="container">
|
||||
@ -122,25 +122,36 @@ <h2>Start searching!</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="section == 'TRACK'">
|
||||
<table class="tracks_table">
|
||||
<table class="table tracks_table">
|
||||
<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
|
||||
<td aria-hidden="true" style="width: 48px; text-align: center;"><img class="rounded coverart"
|
||||
<td aria-hidden="true" style="width: 48px; text-align: center;">
|
||||
<img class="rounded coverart"
|
||||
:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
|
||||
</td>
|
||||
<td class="breakline inline-flex">
|
||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">explicit</i>
|
||||
<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
|
||||
explicit
|
||||
</i>
|
||||
{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}
|
||||
</td>
|
||||
<td class="breakline"><span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
|
||||
<td class="breakline">
|
||||
<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
|
||||
v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
|
||||
{{track.ALB_TITLE}}</td>
|
||||
<td>{{convertDuration(track.DURATION)}}</td>
|
||||
{{track.ALB_TITLE}}
|
||||
</td>
|
||||
<td>
|
||||
{{convertDuration(track.DURATION)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
|
||||
style="width: 56px; text-align: center;" class="clickable"><i
|
||||
class="material-icons">get_app</i></td>
|
||||
style="width: 56px; text-align: center;" class="clickable">
|
||||
<i class="material-icons">
|
||||
get_app
|
||||
</i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
@ -205,35 +216,50 @@ <h1>Loading</h1>
|
||||
<div v-else-if="results.trackTab.data.length == 0">
|
||||
<h1>No Tracks found</h1>
|
||||
</div>
|
||||
<table class="tracks_table" v-if="results.trackTab.data.length > 0">
|
||||
<table class="table tracks_table" v-if="results.trackTab.data.length > 0">
|
||||
<tr>
|
||||
<th style="width: 48px;"></th>
|
||||
<th>Title</th>
|
||||
<th>Artists</th>
|
||||
<th>Album</th>
|
||||
<th><i class="material-icons">timer</i></th>
|
||||
<th>
|
||||
<i class="material-icons">
|
||||
timer
|
||||
</i>
|
||||
</th>
|
||||
<th style="width: 56px;"></th>
|
||||
</tr>
|
||||
<tr v-for="track in results.trackTab.data" class="track_row">
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<a href="#" @click="playPausePreview"
|
||||
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview"><i
|
||||
@mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
class="material-icons preview_controls">play_arrow</i><img class="rounded coverart"
|
||||
:src="track.album.cover_small">
|
||||
:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
|
||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
class="material-icons preview_controls">
|
||||
play_arrow
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</td>
|
||||
<td class="breakline inline-flex">
|
||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
||||
<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="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||
{{track.artist.name}}</td>
|
||||
{{track.artist.name}}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||
{{track.album.title}}</td>
|
||||
<td>{{convertDuration(track.duration)}}</td>
|
||||
{{track.album.title}}
|
||||
</td>
|
||||
<td>
|
||||
{{convertDuration(track.duration)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
||||
class="clickable"><i class="material-icons">get_app</i>
|
||||
class="clickable">
|
||||
<i class="material-icons">
|
||||
get_app
|
||||
</i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -376,26 +402,36 @@ <h2 class="page_heading">Charts</h2>
|
||||
<button @click="changeCountry">Change Country</button>
|
||||
<button @contextmenu.prevent="openQualityModal" @click.stop="addToQueue"
|
||||
:data-link="'https://www.deezer.com/playlist/'+id">Download Chart</button>
|
||||
<table>
|
||||
<table class="table">
|
||||
<tr v-for="track in chart" class="track_row">
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">{{ track.position }}</td>
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
|
||||
{{ track.position }}
|
||||
</td>
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
|
||||
:data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave"
|
||||
v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
|
||||
class="rounded coverart" :src="track.album.cover_small">
|
||||
:data-preview="track.preview">
|
||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
class="material-icons preview_controls">
|
||||
play_arrow
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</td>
|
||||
<td class="breakline">
|
||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||
{{track.artist.name}}</td>
|
||||
{{track.artist.name}}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||
{{track.album.title}}</td>
|
||||
<td>{{convertDuration(track.duration)}}</td>
|
||||
{{track.album.title}}
|
||||
</td>
|
||||
<td>
|
||||
{{convertDuration(track.duration)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
||||
class="clickable"><i class="material-icons">get_app</i>
|
||||
class="clickable">
|
||||
<i class="material-icons">get_app</i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -476,26 +512,36 @@ <h1>No Favorite Artist found</h1>
|
||||
<div v-if="tracks.length == 0">
|
||||
<h1>No Favorite Tracks found</h1>
|
||||
</div>
|
||||
<table v-if="tracks.length > 0">
|
||||
<table v-if="tracks.length > 0" class="table">
|
||||
<tr v-for="track in tracks" class="track_row">
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">{{ track.position }}</td>
|
||||
<td class="top-tracks-position" :class="{ first: track.position === 1 }">
|
||||
{{ track.position }}
|
||||
</td>
|
||||
<td style="width: 48px; text-align: center;">
|
||||
<a href="#" @click="playPausePreview" :class="'rounded' + (track.preview ? ' single-cover' : '')"
|
||||
:data-preview="track.preview"><i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave"
|
||||
v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
|
||||
class="rounded coverart" :src="track.album.cover_small">
|
||||
:data-preview="track.preview">
|
||||
<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
|
||||
class="material-icons preview_controls">
|
||||
play_arrow
|
||||
</i>
|
||||
<img class="rounded coverart" :src="track.album.cover_small">
|
||||
</td>
|
||||
<td class="breakline">
|
||||
{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
|
||||
{{track.artist.name}}</td>
|
||||
{{track.artist.name}}
|
||||
</td>
|
||||
<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
|
||||
{{track.album.title}}</td>
|
||||
<td>{{convertDuration(track.duration)}}</td>
|
||||
{{track.album.title}}
|
||||
</td>
|
||||
<td>
|
||||
{{convertDuration(track.duration)}}
|
||||
</td>
|
||||
<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
|
||||
@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
|
||||
class="clickable"><i class="material-icons">get_app</i>
|
||||
class="clickable">
|
||||
<i class="material-icons">get_app</i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@ -524,7 +570,7 @@ <h2 v-else-if="type == 'album'">by <span class="clickable" @click="artistView"
|
||||
@click.stop="addToQueue" :data-link="link" class="fab right"><i class="material-icons">get_app</i>
|
||||
</div>
|
||||
</header>
|
||||
<table>
|
||||
<table class="table">
|
||||
<tr v-if="data.isrc">
|
||||
<td>ISRC</td>
|
||||
<td>{{ data.isrc }}</td>
|
||||
@ -1016,7 +1062,8 @@ <h3 class="settings-group__header settings-group__header--with-icon">
|
||||
|
||||
<div class="input_group">
|
||||
<p class="input_group_text">Preview Volume</p>
|
||||
<input type="range" @change="updateMaxVolume" min="0" max="100" step="1" class="slider" v-model.number="previewVolume.preview_max_volume">
|
||||
<input type="range" @change="updateMaxVolume" min="0" max="100" step="1" class="slider"
|
||||
v-model.number="previewVolume.preview_max_volume">
|
||||
<span>{{previewVolume.preview_max_volume}}%</span>
|
||||
</div>
|
||||
|
||||
@ -1062,17 +1109,22 @@ <h3 class="settings-group__header settings-group__header--with-icon">
|
||||
<div id="about_tab" class="main_tabcontent">
|
||||
<h1>About</h1>
|
||||
<p>
|
||||
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this library to make your own UI for deemix.</br>
|
||||
Here's the <a href="https://notabug.org/RemixDev/deemix" target="_blank">official repo</a> for the library.<br/>
|
||||
<br/>
|
||||
Stay up to date with the updates by following the <a href="https://t.me/RemixDevNews" target="_blank">news channel</a> on Telegram.<br/>
|
||||
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
|
||||
library to make your own UI for deemix.</br>
|
||||
Here's the <a href="https://notabug.org/RemixDev/deemix" target="_blank">official repo</a> for the
|
||||
library.<br />
|
||||
<br />
|
||||
Stay up to date with the updates by following the <a href="https://t.me/RemixDevNews"
|
||||
target="_blank">news channel</a> on Telegram.<br />
|
||||
</p>
|
||||
<br/>
|
||||
<br />
|
||||
<p>
|
||||
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
|
||||
<img alt="GNU General Public License" style="border-width:0" src="https://www.gnu.org/graphics/gplv3-127x51.png"/>
|
||||
</a><br/>
|
||||
This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">GNU General Public License 3.0</a>.
|
||||
<img alt="GNU General Public License" style="border-width:0"
|
||||
src="https://www.gnu.org/graphics/gplv3-127x51.png" />
|
||||
</a><br />
|
||||
This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html"
|
||||
target="_blank">GNU General Public License 3.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1092,7 +1144,7 @@ <h1>{{ title }}</h1>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="data in head" @click="data.sortKey ? sortBy(data.sortKey) : null"
|
||||
@ -1107,14 +1159,21 @@ <h1>{{ title }}</h1>
|
||||
<td class="inline-flex clickable" @click="albumView" :data-id="release.id">
|
||||
<img class="rounded coverart" :src="release.cover_small"
|
||||
style="margin-right: 16px; width: 56px; height: 56px;" />
|
||||
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
||||
<i v-if="release.explicit_lyrics" class="material-icons explicit_icon">
|
||||
explicit
|
||||
</i>
|
||||
{{release.title}}
|
||||
<i v-if="checkNewRelease(release.release_date)" class="material-icons"
|
||||
style="color:#FF7300;">fiber_new</i>
|
||||
<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
|
||||
fiber_new
|
||||
</i>
|
||||
</td>
|
||||
<td>{{release.release_date}}</td>
|
||||
<td @click.stop="addToQueue" @contextmenu.prevent="openQualityModal" :data-link="release.link"
|
||||
class="clickable"><i class="material-icons">file_download</i></td>
|
||||
class="clickable">
|
||||
<i class="material-icons">
|
||||
file_download
|
||||
</i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -1133,14 +1192,16 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
||||
v-if="release_date">{{ release_date }}</span></h2>
|
||||
</header>
|
||||
|
||||
<table class="tracklist_table">
|
||||
<table class="table tracklist_table">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<th style="width: 32px">
|
||||
<input @click="toggleAll" class="selectAll" type="checkbox">
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -1150,23 +1211,41 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
||||
<td>
|
||||
<i v-if="track.preview" @click=playPausePreview
|
||||
: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>
|
||||
:data-preview="track.preview">
|
||||
play_arrow
|
||||
</i>
|
||||
<i v-else class="material-icons disabled">
|
||||
play_arrow
|
||||
</i>
|
||||
</td>
|
||||
<td class="track_position">
|
||||
{{ track.track_position }}
|
||||
</td>
|
||||
<td class="track_position">{{ track.track_position }}</td>
|
||||
<td class="inline-flex">
|
||||
<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">explicit</i>
|
||||
<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>
|
||||
{{ 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="track_checkbox" type="checkbox" v-model="track.selected"></td>
|
||||
{{ track.album.title }}
|
||||
</td>
|
||||
<td>
|
||||
{{ convertDuration(track.duration) }}
|
||||
</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 }}
|
||||
<td colspan="6" style="opacity: 0.54;">
|
||||
<i class="material-icons">
|
||||
album
|
||||
</i>
|
||||
{{ track.number }}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@ -1239,4 +1318,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
|
||||
|
||||
<script src="/public/js/bundle.js"></script>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
42211
public/js/bundle.js
42211
public/js/bundle.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user