From 41185859f1c5df3acc29fb5663c2168ef75069c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20P=C3=A4ssler?= <me@pbb.lc>
Date: Thu, 23 Jul 2020 15:21:36 +0200
Subject: [PATCH] header style fixes

---
 client/js/journeysView.js | 22 ++++++++++++----------
 client/style.css          | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/client/js/journeysView.js b/client/js/journeysView.js
index e021aa2..c8fca23 100644
--- a/client/js/journeysView.js
+++ b/client/js/journeysView.js
@@ -17,16 +17,18 @@ const journeysTemplate = (data) => html`
 			<a class="back icon-back" href="#/" title="${t('back')}">${t('back')}</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>
+					<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>
 			</div>
 			<a class="back invisible" href="#/"></a>
diff --git a/client/style.css b/client/style.css
index 5e356ef..348b20c 100755
--- a/client/style.css
+++ b/client/style.css
@@ -41,6 +41,12 @@ header {
 	flex-direction: row;
 	flex-wrap: wrap;
 }
+.header-content>div {
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	flex-wrap: wrap;
+}
 
 .row {
 	display: flex;
@@ -444,6 +450,12 @@ tbody tr:hover td {
 
 
 @media (max-width: 799px) {
+	.back.invisible {
+		display: none;
+	}
+	.header-content {
+		flex-grow: 1;
+	}
 	.search {
 		padding: 10px;
 	}
@@ -938,6 +950,6 @@ form>div.history {
 	margin: 1em .4em;
 }
 
-header h3:first-child {
+header h3 {
 	margin-right: 1.5em;
 }