iShit, mobile and other fixes

client/js/journeyView.js

@@ -60,6 +60,7 @@ const legTemplate = (element) => {
 		` : element.isChange ? html`
 			<p class="change">${t('changeinfo', [formatDuration(element.duration)])}</p>
 		` : html`
+			<div class="card">
 			<table>
 				<thead>
 					<tr>
@@ -87,6 +88,7 @@ const legTemplate = (element) => {
 					`)}
 				</tbody>
 			</table>
+			</div>
 		`}
 	`;
 };

client/js/journeysView.js

@@ -26,6 +26,7 @@ const journeysTemplate = (data) => html`
 		` : html`
 			<a class="loadMore icon-arrow2 flipped" title="{{LABEL_EARLIER}}" @click=${() => moreJourneys(data.reqId, 'earlier')}"></a>
 
+			<div class="card">
 			<table>
 				<thead>
 					<tr>
@@ -41,6 +42,7 @@ const journeysTemplate = (data) => html`
 					${Object.keys(data.journeys).sort((a, b) => a - b).map(key => journeyOverviewTemplate(data, key))}
 				</tbody>
 			</table>
+			</div>
 
 			<a class="loadMore icon-arrow2" title="{{LABEL_LATER}}" @click=${() => moreJourneys(data.reqId, "later")}></a>
 		`}

client/style.css

@@ -86,7 +86,6 @@ header {
 
 .loadMore {
 	cursor: pointer;
-	border-radius: 100%;
 	height: 72px;
 	width: 72px;
 	margin: 0 auto;
@@ -107,9 +106,13 @@ header {
 table {
 	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
 	width: 100%;
+	background-color: #fff;
+	min-width: 390px;
 }
-
-table, tr {
+div.card {
+	overflow-x: auto;
+}
+tr {
 	background-color: #fff;
 	margin: 0 0 15px 0;
 }
@@ -154,6 +157,10 @@ tbody tr:hover td {
 		background-color: white;
 		color: black;
 		margin-top: 8px;
+		border-radius: 0;
+	}
+	input[type="time"] {
+		flex-grow: 1;
 	}
 	input[type="text"] {
 		border: 1px solid transparent;
@@ -262,6 +269,15 @@ tbody tr:hover td {
 	}
 }
 
+@media (min-width: 576px) {
+
+}
+@media (max-width: 575px) {
+	.selector:nth-child(2) {
+		flex-basis: 100%;
+	}
+}
+
 .journey,
 .journeys {
 	display: flex;
@@ -310,7 +326,6 @@ tbody tr:hover td {
 
 .search .btn.go {
 	font-size: 1.5em;
-	margin-left: 5px;
 	display: flex;
 	justify-content: center;
 	width: 110px;
@@ -332,10 +347,6 @@ tbody tr:hover td {
 	min-height: 100vh;
 }
 
-.journeys table {
-	margin: 15px auto;
-}
-
 .journeys table a,
 .journey table a,
 .journey table span {
@@ -451,9 +462,19 @@ tbody tr:hover td {
 		width: 100%;
 		flex-shrink: 0;
 	}
+	.loadMore.flipped {
+		margin-top: 15px;
+	}
+	.loadMore {
+		width: 48px;
+	}
 }
 
 @media (min-width: 800px) {
+	.journeys table {
+		margin: 15px auto;
+	}
+
 	#content {
 		justify-content: center;
 	}