From d5b782fda908971e7b7f6e2805babaa7d10c2d91 Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Tue, 5 May 2020 21:53:13 +0200
Subject: [PATCH] updated styles of settings tab

---
 public/css/modules/settings.css |   4 +
 public/index.html               | 200 +++++++++++++++++++-------------
 2 files changed, 122 insertions(+), 82 deletions(-)

diff --git a/public/css/modules/settings.css b/public/css/modules/settings.css
index 0fdae25..35c6a1e 100644
--- a/public/css/modules/settings.css
+++ b/public/css/modules/settings.css
@@ -65,3 +65,7 @@
 .input_group .input_group_text {
 	margin-bottom: 7px;
 }
+
+.with_checkbox + .input_group {
+	margin-top: 10px;
+}
diff --git a/public/index.html b/public/index.html
index ec77708..2e3e909 100644
--- a/public/index.html
+++ b/public/index.html
@@ -617,112 +617,136 @@ <h3>Folders</h3>
 
 						<div class="settings_group">
 							<h3>Track titles</h3>
-							<div>
-								<p>Pad tracks</p>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.padTracks">
-							</div>
-							<div>
-								<p>Overwrite padding size</p>
+								<span class="checkbox_text">Pad tracks</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">Overwrite padding size</p>
 								<input type="number" v-model="settings.paddingSize">
 							</div>
-							<div>
-								<p>Illegal Character replacer</p>
-								<input type="text" v-model="settings.illegalCharacterReplacer">
+
+							<div class="input_group">
+								<p class="input_group_text">Illegal Character replacer</p>
+								<input type="number" v-model="settings.illegalCharacterReplacer">
 							</div>
 						</div>
 
 						<div class="settings_group">
 							<h3>Downloads</h3>
-							<div>
-								<p>Concurrent Downloads</p>
-								<input type="number" v-model.number="settings.queueConcurrency">
+
+							<div class="input_group">
+								<p class="input_group_text">Concurrent Downloads</p>
+								<input type="number" v-model="settings.queueConcurrency">
 							</div>
-							<div>
-								<p>Preferred Bitrate</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Preferred Bitrate</p>
 								<select v-model="settings.maxBitrate">
 									<option value="9">FLAC 1411kbps</option>
 									<option value="3">MP3 320kbps</option>
 									<option value="1">MP3 128kbps</option>
 								</select>
 							</div>
-							<div>
-								<p>Bitrate fallback</p>
-								<input type="checkbox" v-model="settings.fallbackBitrate">
-							</div>
-							<div>
-								<p>Search fallback</p>
-								<input type="checkbox" v-model="settings.fallbackSearch">
-							</div>
 
-							<div>
-								<p>Create log file for errors</p>
+							<label class="with_checkbox">
+								<input type="checkbox" v-model="settings.fallbackBitrate">
+								<span class="checkbox_text">Bitrate fallback</span>
+							</label>
+
+							<label class="with_checkbox">
+								<input type="checkbox" v-model="settings.fallbackSearch">
+								<span class="checkbox_text">Search fallback</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.logErrors">
-							</div>
-							<div>
-								<p>Create log file for searched tracks</p>
+								<span class="checkbox_text">Create log file for errors</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.logSearched">
-							</div>
-							<div>
-								<p>Create playlist file</p>
+								<span class="checkbox_text">Create log file for searched tracks</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.createM3U8File">
-							</div>
-							<div>
-								<p>Create .lyr files (Sync Lyrics)</p>
+								<span class="checkbox_text">Create playlist file</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.syncedLyrics">
-							</div>
+								<span class="checkbox_text">Create .lyr files (Sync Lyrics)</span>
+							</label>
 						</div>
 
 						<div class="settings_group">
 							<h3>Album covers</h3>
-							<div>
-								<p>Save covers</p>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.saveArtwork">
-							</div>
-							<div>
-								<p>Cover name template</p>
+								<span class="checkbox_text">Save covers</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">Cover name template</p>
 								<input type="text" v-model="settings.coverImageTemplate">
 							</div>
-							<div>
-								<p>Save artist image</p>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.saveArtworkArtist">
-							</div>
-							<div>
-								<p>Artist image name template</p>
+								<span class="checkbox_text">Save artist image</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">Artist image name template</p>
 								<input type="text" v-model="settings.artistImageTemplate">
 							</div>
-							<div>
-								<p>Local artwork size</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Local artwork size</p>
 								<input type="number" min="100" max="1800" step="100" v-model.number="settings.localArtworkSize">
 							</div>
-							<div>
-								<p>Embedded artwork size</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Embedded artwork size</p>
 								<input type="number" min="100" max="1800" step="100" v-model.number="settings.embeddedArtworkSize">
 							</div>
-							<div>
-								<p>Save images as png</p>
+
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.PNGcovers">
-							</div>
-							<div>
-								<p>JPEG image quality</p>
+								<span class="checkbox_text">Save images as png</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">JPEG image quality</p>
 								<input type="number" min="1" max="100" v-model.number="settings.jpegImageQuality">
 							</div>
 						</div>
 
 						<div class="settings_group">
-							<div>
-								<p>Save playlists as compilation</p>
+							<h3>Other</h3>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.tags.savePlaylistAsCompilation">
-							</div>
-							<div>
-								<p>Use null separator</p>
+								<span class="checkbox_text">Save playlists as compilation</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.tags.useNullSeparator">
-							</div>
-							<div>
-								<p>Save ID3v1 as well</p>
+								<span class="checkbox_text">Use null separator</span>
+							</label>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.tags.saveID3v1">
-							</div>
-							<div>
-								<p>How would you like to separate your artists?</p>
+								<span class="checkbox_text">Save ID3v1 as well</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">How would you like to separate your artists?</p>
 								<select v-model="settings.tags.multitagSeparator">
 									<option value="default">Using standard specification</option>
 									<option value="andFeat">Using & and feat.</option>
@@ -735,12 +759,14 @@ <h3>Album covers</h3>
 									<option value="; ">Using "; "</option>
 								</select>
 							</div>
-							<div>
-								<p>Remove album version from track title</p>
+
+							<label class="with_checkbox">
 								<input type="checkbox" v-model="settings.removeAlbumVersion">
-							</div>
-							<div>
-								<p>Date format for FLAC files</p>
+								<span class="checkbox_text">Remove album version from track title</span>
+							</label>
+
+							<div class="input_group">
+								<p class="input_group_text">Date format for FLAC files</p>
 								<select v-model="settings.dateFormat">
 									<option value="Y-M-D">YYYY-MM-DD</option>
 									<option value="Y-D-M">YYYY-DD-MM</option>
@@ -749,16 +775,18 @@ <h3>Album covers</h3>
 									<option value="Y">YYYY</option>
 								</select>
 							</div>
-							<div>
-								<p>What should I do with featured artists</p>
+
+							<div class="input_group">
+								<p class="input_group_text">What should I do with featured artists?</p>
 								<select v-model="settings.featuredToTitle">
 									<option value="0">Nothing</option>
 									<option value="1">Remove it from the title</option>
 									<option value="2">Move it to the title</option>
 								</select>
 							</div>
-							<div>
-								<p>Title casing</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Title casing</p>
 								<select v-model="settings.titleCasing">
 									<option value="nothing">Keep unchanged</option>
 									<option value="lower">lowercase</option>
@@ -767,8 +795,9 @@ <h3>Album covers</h3>
 									<option value="sentence">Like a sentence</option>
 								</select>
 							</div>
-							<div>
-								<p>Artist casing</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Artist casing</p>
 								<select v-model="settings.artistCasing">
 									<option value="nothing">Keep unchanged</option>
 									<option value="lower">lowercase</option>
@@ -777,12 +806,14 @@ <h3>Album covers</h3>
 									<option value="sentence">Like a sentence</option>
 								</select>
 							</div>
-							<div>
-								<p>Command to execute after download</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Command to execute after download</p>
 								<p class="secondary-text">Leave blank for no action</p>
 								<input type="text" v-model="settings.executeCommand">
 							</div>
 						</div>
+
 						<div class="settings_group">
 							<h3>Which tags to save</h3>
 							<label class="with_checkbox">
@@ -878,21 +909,26 @@ <h3>Which tags to save</h3>
 								<span class="checkbox_text">Involved People</span>
 							</label>
 						</div>
+
 						<div class="settings_group">
 							<h3>Spotify Features</h3>
-							<div>
-								<p>Spotify clientID</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Spotify clientID</p>
 								<input type="text" v-model="spotifyFeatures.clientId">
 							</div>
-							<div>
-								<p>Spotify Client Secret</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Spotify Client Secret</p>
 								<input type="password" v-model="spotifyFeatures.clientSecret">
 							</div>
-							<div>
-								<p>Spotify username</p>
+
+							<div class="input_group">
+								<p class="input_group_text">Spotify username</p>
 								<input type="text" v-model="spotifyUser">
 							</div>
 						</div>
+
 						<footer>
 							<button @click="resetSettings">Reset to Default</button>
 							<button @click="saveSettings">Save</button>