diff --git a/client/js/journeyView.js b/client/js/journeyView.js
index ce11df5..8d0da64 100644
--- a/client/js/journeyView.js
+++ b/client/js/journeyView.js
@@ -60,6 +60,7 @@ const legTemplate = (element) => {
` : element.isChange ? html`
${t('changeinfo', [formatDuration(element.duration)])}
` : html`
+
@@ -87,6 +88,7 @@ const legTemplate = (element) => {
`)}
+
`}
`;
};
diff --git a/client/js/journeysView.js b/client/js/journeysView.js
index ac74438..9b788e9 100644
--- a/client/js/journeysView.js
+++ b/client/js/journeysView.js
@@ -26,6 +26,7 @@ const journeysTemplate = (data) => html`
` : html`
moreJourneys(data.reqId, 'earlier')}">
+
@@ -41,6 +42,7 @@ const journeysTemplate = (data) => html`
${Object.keys(data.journeys).sort((a, b) => a - b).map(key => journeyOverviewTemplate(data, key))}
+
moreJourneys(data.reqId, "later")}>
`}
diff --git a/client/style.css b/client/style.css
index 11f1eb0..780b64e 100755
--- a/client/style.css
+++ b/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;
}