started table style refactoring

package.json

@@ -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"
 	},

public/css/modules/globals.css

@@ -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 {
+p {
-	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 {
 	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;

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

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

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

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

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

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

public/index.html

@@ -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..."
+					<input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
-						autofocus>
+						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"
+															<td class="breakline">
-																	v-for="artist in track.ARTISTS">{{artist.ART_NAME}} </span>
+																<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>
+																{{track.ALB_TITLE}}
-															<td>{{convertDuration(track.DURATION)}}</td>
+															</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
+																style="width: 56px; text-align: center;" class="clickable">
-																	class="material-icons">get_app</i></td>
+																<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
+														:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
-															@mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
+														<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
-															class="material-icons preview_controls">play_arrow</i><img class="rounded coverart"
+															class="material-icons preview_controls">
-															:src="track.album.cover_small">
+															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>
+													{{track.album.title}}
-												<td>{{convertDuration(track.duration)}}</td>
+												</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"
+												:data-preview="track.preview">
-													v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
+												<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
-													class="rounded coverart" :src="track.album.cover_small">
+													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>
+											{{track.album.title}}
-										<td>{{convertDuration(track.duration)}}</td>
+										</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"
+												:data-preview="track.preview">
-													v-if="track.preview" class="material-icons preview_controls">play_arrow</i><img
+												<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
-													class="rounded coverart" :src="track.album.cover_small">
+													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>
+											{{track.album.title}}
-										<td>{{convertDuration(track.duration)}}</td>
+										</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>
+								This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this
-								Here's the <a href="https://notabug.org/RemixDev/deemix" target="_blank">official repo</a> for the library.<br/>
+								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/>
+								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 />
 							<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"/>
+									<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>.
+								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"
+											<i v-if="checkNewRelease(release.release_date)" class="material-icons" style="color:#FF7300;">
-												style="color:#FF7300;">fiber_new</i>
+												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>
+														:data-preview="track.preview">
-													<i v-else class="material-icons disabled">play_arrow</i>
+														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>
+													{{ track.album.title }}
-												<td>{{ convertDuration(track.duration) }}</td>
+												</td>
-												<td><input class="track_checkbox" type="checkbox" v-model="track.selected"></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>