ctucx.git: trainsearch

settingsView: refactor layout

diff --git a/src/settingsView.js b/src/settingsView.js
@@ -13,29 +13,43 @@ export const showSettings = async () => {
 
 const settingsTemplate = () => html`
 	<div id="settingsView">
-		<b>${t('language')}:</b><br>
-		<label><input type="radio" name="language" ?checked=${settings.language === 'en'} value="en"> ${t('en')}</label><br>
-		<label><input type="radio" name="language" ?checked=${settings.language === 'de'} value="de"> ${t('de')}</label><br>
-		<label><input type="radio" name="language" ?checked=${settings.language === 'nl'} value="nl"> ${t('nl')}</label><br>
-		<br>
-		<b>${t('endpoint')}:</b><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'db'} value="db"> DB</label><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'nahsh'} value="nahsh"> NAH.SH (${t("experimental")})</label><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'rmv'} value="rmv"> RMV (${t("experimental")})</label><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'vrn'} value="vrn"> VRN (${t("experimental")})</label><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'bvg'} value="bvg"> BVG (${t("experimental")})</label><br>
-		<label><input type="radio" name="profile" ?checked=${settings.profile === 'oebb'} value="oebb"> ÖBB (${t("experimental")})</label><br>
-		<br>
-		<b>${t('options')}:</b><br>
-		<label><input type="checkbox" ?checked=${settings.showDS100} id="showDS100"> ${t('showds100')}</label><br>
-		<label><input type="checkbox" ?checked=${settings.showPrices} id="showPrices"> ${t('show-prices')} (${t("experimental")})</label><br>
-		<br>
-		<button id="save" @click=${saveSettings}>${t('save')}</button>
-		<button style="float:right;" id="clear" @click=${clearDataStorage}>${t('clearstorage')}</button>
+		<div class="row">
+			<label for="language">${t('language')}:</label>
+			<select id="language">
+				<option value="en" ?selected=${settings.language === 'en'}>${t('en')}</option>
+				<option value="de" ?selected=${settings.language === 'de'}>${t('de')}</option>
+				<option value="nl" ?selected=${settings.language === 'nl'}>${t('nl')}</option>
+			</select>
+		</div>
+
+		<div class="row">
+			<label for="profile">${t('endpoint')}:</label>
+			<select id="profile">
+				<option value="db"    ?selected=${settings.profile === 'db'}>DB</option>
+				<option value="nahsh" ?selected=${settings.profile === 'nahsh'}>NAH.SH (${t("experimental")})</option>
+				<option value="rmv"   ?selected=${settings.profile === 'rmv'}>RMV (${t("experimental")})</option>
+				<option value="vrn"   ?selected=${settings.profile === 'vrn'}>VRN (${t("experimental")})</option>
+				<option value="bvg"   ?selected=${settings.profile === 'bvg'}>BVG (${t("experimental")})</option>
+				<option value="oebb"   ?selected=${settings.profile === 'oebb'}>ÖBB (${t("experimental")})</option>
+			</select>
+		</div>
+
+		<div class="row">
+			<label>${t('options')}:</label>
+			<div>
+				<label><input type="checkbox" ?checked=${settings.showDS100} id="showDS100"> ${t('showds100')}</label><br>
+				<label><input type="checkbox" ?checked=${settings.showPrices} id="showPrices"> ${t('show-prices')} (${t("experimental")})</label>
+			</div>
+		</div>
+
+		<div class="row">
+			<button id="clear" @click=${clearDataStorage}>${t('clearstorage')}</button>
+			<button style="float:right;" id="save" @click=${saveSettings}>${t('save')}</button>
+		</div>
 	</div>
 `;
 
-const rebuildCache = () => {
+const rebuildCach = () => {
 	registration.update();
 	location.reload();
 };

@@ -44,8 +58,8 @@ const saveSettings = async () => {
 	await modifySettings(settings => {
 		settings.showDS100  = ElementById('showDS100').checked;
 		settings.showPrices = ElementById('showPrices').checked;
-		settings.language   = document.querySelector('input[name="language"]:checked').value;
-		settings.profile    = document.querySelector('input[name="profile"]:checked').value;
+		settings.language   = ElementById('language').value;
+		settings.profile    = ElementById('profile').value;
 
 		return settings;
 	});

diff --git a/static/style.css b/static/style.css
@@ -169,8 +169,24 @@ header {
 }
 
 #settingsView {
-	margin: 1em;
-	overflow: auto;
+	.row {
+		align-items: center;
+		padding: 1em;
+		border-bottom: 1px solid rgba(0, 0, 0, .4);
+	}
+
+	.row:last-child {
+		border-bottom: unset;
+	}
+
+	select {
+		width: 65%;
+	}
+
+	select,
+	.row div {
+		margin-left: auto;
+	}
 }
 
 #searchView {	

@@ -645,7 +661,6 @@ button {
 	width: max-content;
 	padding: 8px 20px;
 	margin-left: auto;
-	margin-top: 10px;
 	transition: background-color 300ms;
 	border: none;
 }

@@ -856,7 +871,7 @@ button:not(:last-child) {
 	}
 
 	.modal .dialog {
-		width: 600px;
+		width: 400px;
 	}
 }