diff --git a/client/js/journeyView.js b/client/js/journeyView.js index 9ab0c0b..f00101a 100644 --- a/client/js/journeyView.js +++ b/client/js/journeyView.js @@ -136,8 +136,10 @@ const journeyTemplate = (data, requestId, journeyId) => {
-

${parseName(departure.point)} → ${parseName(arrival.point)}

-

${t('duration')}: ${formatDuration(duration)} | ${t('changes')}: ${changes-1} | ${t('date')}: ${parseDateTime(departure.plannedTime, 'date')}

+
+

${parseName(departure.point)} → ${parseName(arrival.point)}

+

${t('duration')}: ${formatDuration(duration)} | ${t('changes')}: ${changes-1} | ${t('date')}: ${parseDateTime(departure.plannedTime, 'date')}

+
reloadJourney(requestId, journeyId)}>{{LABEL_RELOAD}}
diff --git a/client/js/journeysView.js b/client/js/journeysView.js index 01d67b6..e021aa2 100644 --- a/client/js/journeysView.js +++ b/client/js/journeysView.js @@ -15,18 +15,21 @@ const journeysTemplate = (data) => html`
${dataStorage.settings.journeysViewMode === 'canvas' ? html` diff --git a/client/style.css b/client/style.css index 253a638..d6ecd25 100755 --- a/client/style.css +++ b/client/style.css @@ -27,9 +27,19 @@ a { header { position: relative; color: white; - padding: 0 0 0 9vw; background-color: #555; bottom-border: 1px solid rgba(255, 255, 255, .3); + display: flex; + flex-direction: row; + justify-content: center; +} + +.header-content { + max-width: 1000px; + width: 80vw; + display: flex; + flex-direction: row; + flex-wrap: wrap; } .row { @@ -49,23 +59,15 @@ header { cursor: pointer; } -.back { - cursor: pointer; - position: absolute; - left: 17px; - top: 17px; - width: 32px; - height: 32px; - user-select: none; +.back.invisible { + visibility: hidden; } - +.back, .reload { cursor: pointer; - position: absolute; - right: 17px; - top: 17px; width: 32px; height: 32px; + margin: 12px; user-select: none; } @@ -111,6 +113,7 @@ table { width: 100%; background-color: #fff; min-width: 390px; + max-width: 1000px; } div.card { overflow-x: auto; @@ -445,10 +448,6 @@ tbody tr:hover td { padding: 10px; } - header { - padding: 0 0 0 50px; - } - .back { left: 10px; } @@ -501,10 +500,6 @@ tbody tr:hover td { width: 40%; } - header { - padding: 0 10vw; - } - td p { display: inline; margin-right: 5px;