From 97986372fe025824f72b765b769b95946660ecd7 Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Wed, 29 Apr 2020 21:46:10 +0200
Subject: [PATCH] started re-organization of settings tab

---
 public/css/modules/base.css              |   6 +-
 public/css/modules/globals.css           |  43 ++--
 public/css/modules/home-tab.css          |   5 +
 public/css/modules/settings.css          |  45 +++-
 public/css/style.css                     |   1 +
 public/index.html                        | 248 ++++++++++++-----------
 public/js/app.js                         |  12 +-
 public/js/modules/components/home-tab.js |  23 +--
 public/js/modules/tabs.js                |  11 +-
 9 files changed, 237 insertions(+), 157 deletions(-)
 create mode 100644 public/css/modules/home-tab.css

diff --git a/public/css/modules/base.css b/public/css/modules/base.css
index bb18978..e348183 100644
--- a/public/css/modules/base.css
+++ b/public/css/modules/base.css
@@ -1,7 +1,7 @@
+/* Normalizing */
 * {
-	/* Normalizing */
-	/* margin: 0; */
-	/* padding: 0; */
+	margin: 0;
+	padding: 0;
 	box-sizing: border-box;
 }
 
diff --git a/public/css/modules/globals.css b/public/css/modules/globals.css
index ec28826..22c3e35 100644
--- a/public/css/modules/globals.css
+++ b/public/css/modules/globals.css
@@ -20,12 +20,12 @@ img.circle {
 	display: block;
 	width: 100%;
 	height: auto;
-	transition: .5s ease;
+	transition: 0.5s ease;
 	backface-visibility: hidden;
 }
 
 .cover_container .download_overlay {
-	transition: .5s ease;
+	transition: 0.5s ease;
 	opacity: 0;
 	position: absolute;
 	top: 50%;
@@ -44,7 +44,7 @@ img.circle {
 }
 
 .cover_container:hover .coverart {
-	opacity: 0.75
+	opacity: 0.75;
 }
 
 .cover_container:hover .download_overlay {
@@ -66,7 +66,8 @@ table {
 	-webkit-border-vertical-spacing: 0px;
 }
 
-table td, table th {
+table td,
+table th {
 	padding: 4px 12px 4px 5px;
 	vertical-align: middle;
 	border: 0px black solid;
@@ -80,7 +81,7 @@ table tr:nth-child(even) {
 	background-color: var(--secondary-background);
 	border: 0px black solid;
 }
-th{
+th {
 	text-align: left;
 }
 
@@ -105,7 +106,7 @@ p,
 	display: flex;
 	align-items: center;
 }
-.inline-flex .right{
+.inline-flex .right {
 	margin-left: auto;
 }
 
@@ -155,9 +156,9 @@ button.with_icon i {
 	margin-left: 8px;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="number"] {
+input[type='text'],
+input[type='password'],
+input[type='number'] {
 	width: calc(100% - 16px);
 	border: 0px solid black;
 	line-height: 36px;
@@ -168,7 +169,7 @@ input[type="number"] {
 	margin-bottom: 8px;
 }
 
-select{
+select {
 	-webkit-appearance: none;
 	appearance: none;
 	width: 100%;
@@ -191,7 +192,7 @@ input[type='checkbox'] {
 	appearance: none;
 	background-color: none;
 	border: 2px solid black;
-	opacity: .50;
+	opacity: 0.5;
 	border-radius: 2px;
 	padding: 7px;
 	margin: 3px;
@@ -230,13 +231,23 @@ input[type='checkbox']:checked {
 .tab {
 	margin: 16px 0px;
 }
-th.sortable{
+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{
+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;
 	border-radius: 28px;
@@ -245,7 +256,7 @@ th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-hei
 	color: var(--accent-text);
 	cursor: pointer;
 }
-.fab i{
+.fab i {
 	font-size: 24px;
 	padding: 16px;
 }
diff --git a/public/css/modules/home-tab.css b/public/css/modules/home-tab.css
new file mode 100644
index 0000000..daf30bf
--- /dev/null
+++ b/public/css/modules/home-tab.css
@@ -0,0 +1,5 @@
+.top-tracks-position {
+	padding: 12px;
+	text-align: center;
+	cursor: default;
+}
diff --git a/public/css/modules/settings.css b/public/css/modules/settings.css
index 34a026f..3859a40 100644
--- a/public/css/modules/settings.css
+++ b/public/css/modules/settings.css
@@ -1,4 +1,31 @@
-/* Settings */
+#settings_heading {
+	font-size: 2.5rem;
+	margin-bottom: 35px;
+}
+
+#settings_picture {
+	width: 125px;
+	height: 125px;
+}
+
+#logged_in_info {
+	height: 250px;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-evenly;
+	align-items: center;
+}
+
+#logged_in_info.hide {
+	display: none;
+}
+
+#log_info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 #open_login_prompt {
 	margin: 8px 0px;
 }
@@ -18,7 +45,15 @@
 	padding: 6px 0px;
 }
 
-#logged_in_info {
-	display: none;
-	margin-bottom: 12px;
-}
\ No newline at end of file
+.settings_group {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	border-top: 1px solid #8f8f8f; /* Need less opacity */
+	padding-top: 20px;
+	padding-bottom: 20px;
+}
+
+.settings_group > * {
+	margin-bottom: 15px;
+}
diff --git a/public/css/style.css b/public/css/style.css
index d52d085..67559f3 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -16,3 +16,4 @@
 @import './modules/download-tab.css';
 @import './modules/track-preview.css';
 @import './modules/tracklist-tab.css';
+@import './modules/home-tab.css';
diff --git a/public/index.html b/public/index.html
index 2f89ce0..5306cb9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -249,76 +249,74 @@ <h1>No Playlists found</h1>
 
 					<div id="home_tab" class="main_tabcontent">
 						<h1>Home</h1>
-            <div v-if="tracks.length">
-              <h2>Top Tracks</h2>
-              <table>
-                <tr v-for="track in tracks" 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">
-                  </td>
-                  <td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
-                  <td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
-                    {{track.artist.name}}</td>
-                  <td class="breakline clickable" @click="albumView" :data-id="track.album.id">
-                    {{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>
-                  </td>
-                </tr>
-              </table>
-            </div>
-            <div v-if="albums.length">
-              <h2>Top Albums</h2>
-              <div class="release_grid">
-                <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"
-                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-                        class="material-icons">get_app</i></div>
-                  </div>
-                  <p class="primary-text">{{ release.title }}</p>
-                  <p class="secondary-text">{{ 'by '+release.artist.name }}</p>
-                </div>
-              </div>
-            </div>
-            <div v-if="artists.length">
-              <h2>Top Artists</h2>
-              <div class="release_grid">
-                <div v-for="release in artists" class="release clickable" @click="artistView"
-                  :data-id="release.id">
-                  <div class="cover_container">
-                    <img class="circle coverart" :src="release.picture_medium">
-                    <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-                        class="material-icons">get_app</i></div>
-                  </div>
-                  <p class="primary-text">{{ release.name }}</p>
-                </div>
-              </div>
-            </div>
-            <div v-if="playlists.length">
-              <h2>Top Playlists</h2>
-              <div class="release_grid">
-                <div v-for="release in playlists" class="release clickable" @click="playlistView"
-                  :data-id="release.id">
-                  <div class="cover_container">
-                    <img class="rounded coverart" :src="release.picture_medium">
-                    <div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
-                      @click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
-                        class="material-icons">get_app</i></div>
-                  </div>
-                  <p class="primary-text">{{ release.title }}</p>
-                  <p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
-                </div>
-              </div>
-            </div>
+						<div v-if="tracks.length">
+							<h2>Top Tracks</h2>
+							<table>
+								<tr v-for="track in tracks" class="track_row">
+									<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">
+									</td>
+									<td class="breakline">{{track.title + (track.title_version ? ' '+track.title_version : '')}}</td>
+									<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
+										{{track.artist.name}}</td>
+									<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
+										{{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>
+									</td>
+								</tr>
+							</table>
+						</div>
+						<div v-if="albums.length">
+							<h2>Top Albums</h2>
+							<div class="release_grid">
+								<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"
+											@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+												class="material-icons">get_app</i></div>
+									</div>
+									<p class="primary-text">{{ release.title }}</p>
+									<p class="secondary-text">{{ 'by '+release.artist.name }}</p>
+								</div>
+							</div>
+						</div>
+						<div v-if="artists.length">
+							<h2>Top Artists</h2>
+							<div class="release_grid">
+								<div v-for="release in artists" class="release clickable" @click="artistView" :data-id="release.id">
+									<div class="cover_container">
+										<img class="circle coverart" :src="release.picture_medium">
+										<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+											@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+												class="material-icons">get_app</i></div>
+									</div>
+									<p class="primary-text">{{ release.name }}</p>
+								</div>
+							</div>
+						</div>
+						<div v-if="playlists.length">
+							<h2>Top Playlists</h2>
+							<div class="release_grid">
+								<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
+									<div class="cover_container">
+										<img class="rounded coverart" :src="release.picture_medium">
+										<div role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+											@click.stop="addToQueue" :data-link="release.link" class="download_overlay"><i
+												class="material-icons">get_app</i></div>
+									</div>
+									<p class="primary-text">{{ release.title }}</p>
+									<p class="secondary-text">{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}</p>
+								</div>
+							</div>
+						</div>
 					</div>
 
 					<div id="charts_tab" class="main_tabcontent">
@@ -381,76 +379,96 @@ <h2>{{ subtitle }}</h2>
 					</div>
 
 					<div id="settings_tab" class="main_tabcontent fixed_footer">
-						<h1>Settings</h1>
-						<div id="logged_in_info" class="inline-flex">
-							<img id="settings_picture" src="" alt="Profile Picture" class="circle"
-								style="width: 125px;height:125px; margin-right: 12px;" />
-							<div>
-								<p>You are logged in as <b id="settings_username"></b></p>
-								<button id="settings_btn_logout" @click="logout">Logout</button>
-							</div>
+						<h2 id="settings_heading">Settings</h2>
+
+						<div id="logged_in_info">
+							<img id="settings_picture" src="" alt="Profile Picture" class="circle" />
+							<p>You are logged in as <strong id="settings_username"></strong></p>
+							<button id="settings_btn_logout" @click="logout">Logout</button>
 						</div>
-						<div class="inline-flex">
-							<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
-							<button id="settings_btn_copyArl" @click="copyARLtoClipboard"><i
-									class="material-icons">assignment</i></button>
+
+						<div class="settings_group">
+							<h3>ARL</h3>
+							<div class="inline-flex">
+								<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
+								<button id="settings_btn_copyArl" @click="copyARLtoClipboard">
+									<i class="material-icons">assignment</i>
+								</button>
+							</div>
+							<a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">
+								How do I get my own ARL?
+							</a>
+							<button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button>
 						</div>
-						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
-								get my own ARL?</a></p>
-						<p><button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button></p>
-						<div id="settings_generic_tab">
-							<div class="input_group">
-								<p>Download Path</p>
-								<input type="text" v-model="settings.downloadLocation">
-							</div>
-							<div class="input_group">
-								<p>Trackname template</p>
-								<input type="text" v-model="settings.tracknameTemplate">
-							</div>
-							<div class="input_group">
-								<p>Album track template</p>
-								<input type="text" v-model="settings.albumTracknameTemplate">
-							</div>
-							<div class="input_group">
-								<p>Playlist track template</p>
-								<input type="text" v-model="settings.playlistTracknameTemplate">
-							</div>
-							<div class="input_group">
-								<p>Create folder for playlist</p>
-								<input type="checkbox" v-model="settings.createPlaylistFolder">
-							</div>
-							<div class="input_group" v-if="settings.createPlaylistFolder">
+
+						<div class="settings_group">
+							<h3>Download Path</h3>
+							<input type="text" v-model="settings.downloadLocation">
+						</div>
+
+						<div class="settings_group">
+							<h3>Templates</h3>
+
+							<p>Trackname template</p>
+							<input type="text" v-model="settings.tracknameTemplate">
+
+							<p>Album track template</p>
+							<input type="text" v-model="settings.albumTracknameTemplate">
+
+							<p>Playlist track template</p>
+							<input type="text" v-model="settings.playlistTracknameTemplate">
+						</div>
+
+						<div class="settings_group">
+							<h3>Folders</h3>
+
+
+							<label><input type="checkbox" v-model="settings.createPlaylistFolder">Create folder for playlist</label>
+
+							<div v-if="settings.createPlaylistFolder">
 								<p>Playlist folder template</p>
 								<input type="text" v-model="settings.playlistNameTemplate">
 							</div>
-							<div class="input_group">
+
+							<div>
 								<p>Create folder for artist</p>
 								<input type="checkbox" v-model="settings.createArtistFolder">
 							</div>
-							<div class="input_group" v-if="settings.createArtistFolder">
+
+							<div v-if="settings.createArtistFolder">
 								<p>Artist folder template</p>
 								<input type="text" v-model="settings.artistNameTemplate">
 							</div>
-							<div class="input_group">
+
+							<div>
 								<p>Create folder for album</p>
 								<input type="checkbox" v-model="settings.createAlbumFolder">
 							</div>
-							<div class="input_group" v-if="settings.createAlbumFolder">
+
+							<div v-if="settings.createAlbumFolder">
 								<p>Album folder template</p>
 								<input type="text" v-model="settings.albumNameTemplate">
 							</div>
-							<div class="input_group">
+
+							<div>
 								<p>Create folder for CDs</p>
 								<input type="checkbox" v-model="settings.createCDFolder">
 							</div>
-							<div class="input_group">
+
+							<div>
 								<p>Create folder structure for playlists</p>
 								<input type="checkbox" v-model="settings.createStructurePlaylist">
 							</div>
-							<div class="input_group">
+
+							<div>
 								<p>Create folder structure for singles</p>
 								<input type="checkbox" v-model="settings.createSingleFolder">
 							</div>
+						</div>
+
+						<div id="settings_generic_tab">
+
+
 							<div class="input_group">
 								<p>Pad tracks</p>
 								<input type="checkbox" v-model="settings.padTracks">
@@ -725,4 +743,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 <script type="module" src="/public/js/app.js"></script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index ad4821a..297a563 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -33,7 +33,8 @@ socket.on('logged_in', function (data) {
 					'src',
 					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
 				)
-				$('#logged_in_info').show()
+				// $('#logged_in_info').show()
+				document.getElementById('logged_in_info').classList.remove('hide')
 			}
 			break
 		case 2:
@@ -44,7 +45,8 @@ socket.on('logged_in', function (data) {
 					'src',
 					`https://e-cdns-images.dzcdn.net/images/user/${data.user.picture}/125x125-000000-80-0-0.jpg`
 				)
-				$('#logged_in_info').show()
+				// $('#logged_in_info').show()
+				document.getElementById('logged_in_info').classList.remove('hide')
 			}
 			break
 		case 0:
@@ -52,7 +54,8 @@ socket.on('logged_in', function (data) {
 			localStorage.removeItem('arl')
 			$('#login_input_arl').val('')
 			$('#open_login_prompt').show()
-			$('#logged_in_info').hide()
+			document.getElementById('logged_in_info').classList.add('hide')
+			// $('#logged_in_info').hide()
 			$('#settings_username').text('Not Logged')
 			$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 			break
@@ -64,7 +67,8 @@ socket.on('logged_out', function () {
 	localStorage.removeItem('arl')
 	$('#login_input_arl').val('')
 	$('#open_login_prompt').show()
-	$('#logged_in_info').hide()
+	document.getElementById('logged_in_info').classList.add('hide')
+	// $('#logged_in_info').hide()
 	$('#settings_username').text('Not Logged')
 	$('#settings_picture').attr('src', `https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg`)
 })
diff --git a/public/js/modules/components/home-tab.js b/public/js/modules/components/home-tab.js
index fe74134..b30abf9 100644
--- a/public/js/modules/components/home-tab.js
+++ b/public/js/modules/components/home-tab.js
@@ -8,33 +8,32 @@ import Utils from '../utils.js'
 const HomeTab = new Vue({
 	data() {
 		return {
-      tracks: [],
-      albums: [],
-      artists: [],
-      playlists: []
+			tracks: [],
+			albums: [],
+			artists: [],
+			playlists: []
 		}
 	},
 	methods: {
-    artistView,
+		artistView,
 		albumView,
 		playlistView,
 		playPausePreview: TrackPreview.playPausePreview,
 		previewMouseEnter: TrackPreview.previewMouseEnter,
 		previewMouseLeave: TrackPreview.previewMouseLeave,
-    numberWithDots: Utils.numberWithDots,
+		numberWithDots: Utils.numberWithDots,
 		convertDuration: Utils.convertDuration,
-    addToQueue: function (e) {
+		addToQueue(e) {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal: function (e) {
-			e.preventDefault()
+		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		initHome(data) {
-      this.tracks = data.tracks.data
-      this.albums = data.albums.data
-      this.artists = data.artists.data
+			this.tracks = data.tracks.data
+			this.albums = data.albums.data
+			this.artists = data.artists.data
 			this.playlists = data.playlists.data
 		}
 	},
diff --git a/public/js/modules/tabs.js b/public/js/modules/tabs.js
index ed6f316..01895b8 100644
--- a/public/js/modules/tabs.js
+++ b/public/js/modules/tabs.js
@@ -15,6 +15,9 @@ window.windows_stack = []
 /* ===== Locals ===== */
 let currentStack = {}
 
+// Exporting this function out of the default export
+// because it's used in components that are needed
+// in this file too
 export function artistView(ev) {
 	let id = ev.currentTarget.dataset.id
 	ArtistTab.reset()
@@ -22,6 +25,9 @@ export function artistView(ev) {
 	showTab('artist', id)
 }
 
+// Exporting this function out of the default export
+// because it's used in components that are needed
+// in this file too
 export function albumView(ev) {
 	let id = ev.currentTarget.dataset.id
 	TracklistTab.reset()
@@ -29,6 +35,9 @@ export function albumView(ev) {
 	showTab('album', id)
 }
 
+// Exporting this function out of the default export
+// because it's used in components that are needed
+// in this file too
 export function playlistView(ev) {
 	let id = ev.currentTarget.dataset.id
 	TracklistTab.reset()
@@ -145,8 +154,6 @@ function changeTab(sidebarEl, section, tabName) {
 		search_selected = tabName
 	}
 
-	// window[section + '_selected'] = tabName
-
 	// Not choosing .currentTarget beacuse the event
 	// is delegated
 	sidebarEl.classList.add('active')