started re-organization of settings tab

public/css/modules/base.css

@@ -1,7 +1,7 @@
-* {
 /* Normalizing */
-	/* margin: 0; */
+* {
-	/* padding: 0; */
+	margin: 0;
+	padding: 0;
 	box-sizing: border-box;
 }
 

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;
@@ -155,9 +156,9 @@ button.with_icon i {
 	margin-left: 8px;
 }
 
-input[type="text"],
+input[type='text'],
-input[type="password"],
+input[type='password'],
-input[type="number"] {
+input[type='number'] {
 	width: calc(100% - 16px);
 	border: 0px solid black;
 	line-height: 36px;
@@ -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;
@@ -234,8 +235,18 @@ 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-asc:after {
-th.sort-desc:after {content: "\25bc";font-size: 0.7em;padding-left: 3px;line-height: 0.7em;}
+	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;

public/css/modules/home-tab.css

@@ -0,0 +1,5 @@
+.top-tracks-position {
+	padding: 12px;
+	text-align: center;
+	cursor: default;
+}

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 {
+.settings_group {
-	display: none;
+	display: flex;
-	margin-bottom: 12px;
+	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;
 }

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

public/index.html

@@ -253,6 +253,7 @@ <h1>Home</h1>
 							<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"
@@ -275,8 +276,7 @@ <h2>Top Tracks</h2>
 						<div v-if="albums.length">
 							<h2>Top Albums</h2>
 							<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"
@@ -291,8 +291,7 @@ <h2>Top Albums</h2>
 						<div v-if="artists.length">
 							<h2>Top Artists</h2>
 							<div class="release_grid">
-                <div v-for="release in artists" class="release clickable" @click="artistView"
+								<div v-for="release in artists" class="release clickable" @click="artistView" :data-id="release.id">
-                  :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"
@@ -306,8 +305,7 @@ <h2>Top Artists</h2>
 						<div v-if="playlists.length">
 							<h2>Top Playlists</h2>
 							<div class="release_grid">
-                <div v-for="release in playlists" class="release clickable" @click="playlistView"
+								<div v-for="release in playlists" class="release clickable" @click="playlistView" :data-id="release.id">
-                  :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"
@@ -381,76 +379,96 @@ <h2>{{ subtitle }}</h2>
 					</div>
 
 					<div id="settings_tab" class="main_tabcontent fixed_footer">
-						<h1>Settings</h1>
+						<h2 id="settings_heading">Settings</h2>
-						<div id="logged_in_info" class="inline-flex">
+
-							<img id="settings_picture" src="" alt="Profile Picture" class="circle"
+						<div id="logged_in_info">
-								style="width: 125px;height:125px; margin-right: 12px;" />
+							<img id="settings_picture" src="" alt="Profile Picture" class="circle" />
-							<div>
+							<p>You are logged in as <strong id="settings_username"></strong></p>
-								<p>You are logged in as <b id="settings_username"></b></p>
 							<button id="settings_btn_logout" @click="logout">Logout</button>
 						</div>
-						</div>
+
+						<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
+								<button id="settings_btn_copyArl" @click="copyARLtoClipboard">
-									class="material-icons">assignment</i></button>
+									<i class="material-icons">assignment</i>
+								</button>
 							</div>
-						<p><a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">How do I
+							<a href="https://notabug.org/RemixDevs/DeezloaderRemix/wiki/Login+via+userToken" target="_blank">
-								get my own ARL?</a></p>
+								How do I get my own ARL?
-						<p><button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button></p>
+							</a>
-						<div id="settings_generic_tab">
+							<button id="settings_btn_updateArl" @click="login" style="width:100%;">Update ARL</button>
-							<div class="input_group">
+						</div>
-								<p>Download Path</p>
+
+						<div class="settings_group">
+							<h3>Download Path</h3>
 							<input type="text" v-model="settings.downloadLocation">
 						</div>
-							<div class="input_group">
+
+						<div class="settings_group">
+							<h3>Templates</h3>
+
 							<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>
+						<div class="settings_group">
-								<input type="checkbox" v-model="settings.createPlaylistFolder">
+							<h3>Folders</h3>
-							</div>
+
-							<div class="input_group" v-if="settings.createPlaylistFolder">
+
+							<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">

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`)
 })

public/js/modules/components/home-tab.js

@@ -23,12 +23,11 @@ const HomeTab = new Vue({
 		previewMouseLeave: TrackPreview.previewMouseLeave,
 		numberWithDots: Utils.numberWithDots,
 		convertDuration: Utils.convertDuration,
-    addToQueue: function (e) {
+		addToQueue(e) {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal: function (e) {
+		openQualityModal(e) {
-			e.preventDefault()
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
 		initHome(data) {

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')