ctucx.git: oeffisearch

make journey(s)view ultrawide friendly

diff --git a/client/js/journeyView.js b/client/js/journeyView.js
@@ -136,8 +136,10 @@ const journeyTemplate = (data, requestId, journeyId) => {
 		<div class="journey">
 			<header>
 				<a class="back icon-back" href="#/${requestId}"></a>
-				<h2>${parseName(departure.point)} → ${parseName(arrival.point)}</h2>
-				<p><b>${t('duration')}: ${formatDuration(duration)} | ${t('changes')}: ${changes-1} |  ${t('date')}: ${parseDateTime(departure.plannedTime, 'date')}</b></p>
+				<div class="header-content">
+					<h3>${parseName(departure.point)} → ${parseName(arrival.point)}</h3>
+					<p><b>${t('duration')}: ${formatDuration(duration)} | ${t('changes')}: ${changes-1} |  ${t('date')}: ${parseDateTime(departure.plannedTime, 'date')}</b></p>
+				</div>
 				<a class="reload icon-reload" title="{{LABEL_RELOAD}}" @click=${() => reloadJourney(requestId, journeyId)}>{{LABEL_RELOAD}}</a>
 			</header>
 

diff --git a/client/js/journeysView.js b/client/js/journeysView.js
@@ -15,18 +15,21 @@ const journeysTemplate = (data) => html`
 	<div class="journeys">
 		<header id="header">
 			<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</a>
-			<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
-			<h3>${t('to')}: ${parseName(data.params.toPoint)}</h3>
-			<div class="mode-changers">
-				<a @click=${changeMode('table')} class="${dataStorage.settings.journeysViewMode !== 'canvas' ? 'active' : ''}">
-					<div class="icon-table"></div>
-					<span>Table</span>
-				</a>
-				<a @click=${changeMode('canvas')} class="${dataStorage.settings.journeysViewMode === 'canvas' ? 'active' : ''}">
-					<div class="icon-canvas"></div>
-					<span>Canvas</span>
-				</a>
+			<div class="header-content">
+				<h3>${t('from')}: ${parseName(data.params.fromPoint)}</h3>
+				<h3>${t('to')}: ${parseName(data.params.toPoint)}</h3>
+				<div class="mode-changers">
+					<a @click=${changeMode('table')} class="${dataStorage.settings.journeysViewMode !== 'canvas' ? 'active' : ''}">
+						<div class="icon-table"></div>
+						<span>Table</span>
+					</a>
+					<a @click=${changeMode('canvas')} class="${dataStorage.settings.journeysViewMode === 'canvas' ? 'active' : ''}">
+						<div class="icon-canvas"></div>
+						<span>Canvas</span>
+					</a>
+				</div>
 			</div>
+			<a class="back invisible" href="#/"></a>
 		</header>
 
 		${dataStorage.settings.journeysViewMode === 'canvas' ? html`

diff --git 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;