ctucx.git: trainsearch

overlays.js: refactor selectModal

diff --git a/src/overlays.js b/src/overlays.js
@@ -15,13 +15,15 @@ export const showAlertModal = (text) => {
 	});
 };
 
-export const showSelectModal = (content) => {
+export const showSelectModal = (items) => {
 	showDiv('overlay');
 	return new Promise(resolve => {
 		render(html`
 			<div class="modal">
 				<div class="box select">
-					${content}
+					${items.map(
+						(item) => html`<a class="button color" @click=${item.action}>${item.label}</a>`
+					)}
 					<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
 				</div>
 			</div>

diff --git a/src/searchView.js b/src/searchView.js
@@ -170,10 +170,10 @@ const journeysHistoryTemplate = (journeysHistory) => html`
 `;
 
 const journeysHistoryAction = (journeysHistory, element) => {
-	showSelectModal(html`
-		<a @click=${() => {setFromHistory(journeysHistory.length - 1 - journeysHistory.indexOf(element));hideOverlay();}}>${t('setfromto')}</a>
-		<a @click=${() => {go('/'+element.slug+'/'+settings.journeysViewMode);hideOverlay();}}>${t('journeyoverview')}</a>
-	`);
+	showSelectModal([
+		{'label': t('setfromto'),       'action': () => { setFromHistory(journeysHistory.length - 1 - journeysHistory.indexOf(element)); hideOverlay(); }},
+		{'label': t('journeyoverview'), 'action': () => { go('/'+element.slug+'/'+settings.journeysViewMode); hideOverlay(); }}
+	]);
 };
 
 export const searchView = async () => {

diff --git a/static/style.css b/static/style.css
@@ -564,26 +564,21 @@ header {
 	}
 
 	.select {
+		display: flex;
+		flex-direction: column;
+
 		a {
-			display: block;
-			text-decoration: none;
-			background-color: rgba(20, 30, 255, .7);
-			color: white;
 			width: 100%;
-			padding: 8px 20px;
-			margin-left: auto;
-			margin-top: 10px;
+			margin: 5px 0;
 			text-align: center;
-			transition: background-color 300ms;
 		}
 
 		a:first-child {
-			margin-top: 0px;
+			margin-top: unset;
 		}
 
-		a:hover {
-			background-color: rgba(70, 100, 255, .8);
-			cursor: pointer;
+		a:last-child {
+			margin-bottom: unset;
 		}
 	}