ctucx.git: trainsearch

clean up searchView styles

diff --git a/src/searchView.js b/src/searchView.js
@@ -41,11 +41,12 @@ const searchTemplate = (journeysHistory) => html`
 			<div class="suggestions" id="toSuggestions"></div>
 
 			<div class="row">
-				<label class="switch">
-					<input type="checkbox" id="isarr" name="isarr" ?checked=${isArrValue}>
-					<span class="slider ${t('lang_short')}"></span>
-					<label for="isarr"> <br></label>
-				</label>
+				<div class="selector">
+					<input type="radio" id="departure" name="deparr" ?checked=${!isArrValue}>
+					<label for="departure">${t('departure')}</label>
+					<input type="radio" id="arrival" name="deparr" ?checked=${isArrValue}>
+					<label for="arrival">${t('arrival')}</label>
+				</div>
 
 				<label for="date">${t('date')}:</label>
 				<input type="date" name="date" id="date" value="${dateValue}" placeholder="${t('date')}" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" @keydown=${onKeypressSubmit} required>

@@ -56,7 +57,7 @@ const searchTemplate = (journeysHistory) => html`
 
 			<div class="row">
 				<span class="hidden">${t('products')}:</span>
-				<div class="selector">
+				<div class="selector rectangular">
 					${settings.advancedSelection ? html`
 					<input type="checkbox" id="nationalExpress" name="nationalExpress" checked>
 					<label class="icon-ice" for="nationalExpress" title="${t('iceonly')}">${t('iceonly')}<br></label>

@@ -99,7 +100,7 @@ const searchTemplate = (journeysHistory) => html`
 				</div>
 
 				<span class="hidden">${t('accessibility')}:</span>
-				<div class="selector">
+				<div class="selector rectangular">
 					<input type="radio" id="accessibilityNone" name="accessibility" value="none" ?checked=${settings.accessibility === 'none'}>
 					<label class="icon-walk-fast" for="accessibilityNone" title="${t('access_none')}">${t('access_none')}<br></label>
 

@@ -110,7 +111,7 @@ const searchTemplate = (journeysHistory) => html`
 					<label class="icon-weelchair" for="accessibilityComplete" title="${t('access_full')}">${t('access_full')}<br></label>
 				</div>
 
-				<div class="selector">
+				<div class="selector rectangular">
 					<div class="btn icon-swap" title="${t('swap')}" @click=${swapFromTo}></div>
 					<div class="btn icon-settings" title="${t('settings')}" @click=${showSettings}></div>
 				</div>

diff --git a/static/style.css b/static/style.css
@@ -154,14 +154,11 @@ tbody tr:hover td {
 }
 
 @supports (display: flex) {
-	.btn.go,
 	input[type="date"],
 	input[type="time"],
-	input[type="text"],
-	.switch {
+	input[type="text"] {
 		cursor: pointer;
 		box-sizing: border-box;
-		width: 100%;
 		padding: .3em .5em;
 		font-size: 1.5em;
 		padding: 7px;

@@ -182,16 +179,26 @@ tbody tr:hover td {
 		border-bottom: 1px solid rgba(0, 0, 0, .2);
 	}
 
-	.btn.go,
 	.btn,
 	.selector label {
 		cursor: pointer;
 		background-color: white;
-		width: 32px;
-		padding: 3px;
-		height: 32px;
 		display: inline-block;
 		user-select: none;
+		color: black;
+		padding: 0 10px;
+	}
+	.selector.rectangular {
+		margin-bottom: 8px;
+	}
+	.selector.rectangular label,
+	.selector.rectangular .btn {
+		height: 32px;
+		font-weight: bold;
+		font-size: 0;
+		width: 32px;
+		padding: 3px;
+		overflow: hidden;
 	}
 	.selector div:not(:last-child),
 	.selector label:not(:last-child) {

@@ -200,15 +207,11 @@ tbody tr:hover td {
 
 	.selector {
 		margin-top: 8px;
-		margin-bottom: 8px;
 		margin-right: auto;
 		display: flex;
-		overflow: hidden;
 	}
 
 	.selector > label {
-		width: 32px;
-		height: 32px;
 		user-select: none;
 	}
 

@@ -223,72 +226,6 @@ tbody tr:hover td {
 	.selector input:checked + label {
 		background: #fff;
 	}
-
-	.switch {
-		position: relative;
-		display: inline-block;
-		width: 84px;
-		padding: 0 !important;
-		overflow: hidden;
-		flex-shrink: 0;
-	}
-
-	.switch input {
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
-	.slider {
-		position: absolute;
-		cursor: pointer;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: #bbb;
-		height: 100%;
-	}
-
-	.slider:before {
-		position: absolute;
-		font-size: 13px;
-		padding-top: calc(25% - 7px);
-		line-height: 100%;
-		text-align: center;
-		height: 100%;
-		width: 42px;
-		background-color: white;
-		transition: .2s;
-	}
-
-	.switch input:checked + .slider:before {
-		transform: translateX(42px);
-	}
-
-	.slider.de:before {
-		content: "AB";
-	}
-
-	.switch input:checked + .slider.de:before {
-		content: "AN";
-	}
-
-	.slider.en:before {
-		content: "DEP";
-	}
-
-	.switch input:checked + .slider.en:before {
-		content: "ARR";
-	}
-
-	.slider.nl:before {
-		content: "VTR";
-	}
-
-	.switch input:checked + .slider.nl:before {
-		content: "AAN";
-	}
 }
 
 @media (min-width: 576px) {

@@ -351,9 +288,11 @@ tbody tr:hover td {
 }
 
 .search .btn.go {
+	height: 32px;
+	margin: 8px 0;
 	display: flex;
 	justify-content: center;
-	width: 110px;
+	align-items: center;
 	font-size: 20px;
 }
 

@@ -490,7 +429,7 @@ tbody tr:hover td {
 	}
 
 	.search #date {
-		width: initial;
+		width: 30%;
 	}
 
 	.search #time {

@@ -527,10 +466,11 @@ tbody tr:hover td {
 
 	.search #date {
 		margin-right: 8px;
+		width: 50%;
 	}
 
 	.search #time {
-		width: 40%;
+		width: 30%;
 	}
 
 	td p {

@@ -557,7 +497,7 @@ tbody tr:hover td {
 	display: none !important;
 }
 
-label[for=from], label[for=via], label[for=to], label[for=isarr], label[for="date"], label[for=time] {
+label[for=from], label[for=via], label[for=to], label[for="date"], label[for=time] {
 	display: none;
 }
 

@@ -852,8 +792,6 @@ form>div.history {
 }
 
 .selector label {
-	font-weight: bold;
-	font-size: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;

@@ -863,6 +801,7 @@ form>div.history {
 	color: black;
 	text-align: center;
 	line-height: .9rem;
+	margin-top: 3px;
 }
 
 .selector label.icon-ice,