ctucx.git: trainsearch

web based trip-planner, fork of https://cyberchaos.dev/yuka/trainsearch

commit e28aec85191253aabf183b739794b0aee9491bec
parent 5e430cf951748904a7a7285a92f576d2c6927ec3
Author: Katja (ctucx) <git@ctu.cx>
Date: Sun, 26 Jan 2025 17:21:56 +0100

settingsView: improve options layout/style

2 files changed, 24 insertions(+), 10 deletions(-)
M
src/settingsView.js
|
12
+++++-------
M
static/style.css
|
22
+++++++++++++++++++---
diff --git a/src/settingsView.js b/src/settingsView.js
@@ -35,13 +35,11 @@ const settingsTemplate = () => html`
 			</select>
 		</div>
 
-		<div class="row">
-			<label>${t('options')}:</label>
-			<div>
-				<label id="showPricesElement"><input type="checkbox" id="showPrices" ?checked=${settings.showPrices}> ${t('show-prices')} (${t("experimental")})<br></label>
-				<label id="showDS100Element"><input type="checkbox" id="showDS100" ?checked=${settings.showDS100}> ${t('showds100')}<br></label>
-				<label><input type="checkbox" id="combineDateTime" ?checked=${settings.combineDateTime}> ${t('combineDateTime')}</label>
-			</div>
+		<div class="column">
+			<span>${t('options')}:</span>
+			<label id="showPricesElement"><input type="checkbox" id="showPrices" ?checked=${settings.showPrices}> ${t('show-prices')} (${t("experimental")})<br></label>
+			<label id="showDS100Element"><input type="checkbox" id="showDS100" ?checked=${settings.showDS100}> ${t('showds100')}<br></label>
+			<label><input type="checkbox" id="combineDateTime" ?checked=${settings.combineDateTime}> ${t('combineDateTime')}</label>
 		</div>
 
 		<div class="row">

diff --git a/static/style.css b/static/style.css
@@ -206,18 +206,30 @@ header {
 }
 
 .settingsView {
-	.row {
-		align-items: center;
+	.row,
+	.column {
 		padding: 1em;
 		border-bottom: 1px solid rgba(0, 0, 0, .4);
 	}
 
+	.row {
+		align-items: center;
+	}
+
 	.row:last-child {
 		padding: .5em;
 		border-bottom: unset;
 	    justify-content: right;
 	}
 
+	label {
+		padding: .1em;
+	}
+
+	span {
+		padding-bottom: .25em;
+	}
+
 	select {
 		width: 65%;
 	}

@@ -568,6 +580,10 @@ input[type="text"]:focus {
 	border-bottom: 1px solid rgba(0, 0, 0, .2);
 }
 
+input[type="checkbox"] {
+	transform: scale(1.5);
+}
+
 button,
 .button,
 .selector label {

@@ -770,7 +786,7 @@ button.color:hover, .button.color:hover {
 }
 
 .icon-back {
-	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z" fill="white"/></svg>');
+	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z" fill="white"/></svg>');
 }
 
 .icon-reload {