katja's git: oeffisearch

journeyView: improve header style

diff --git a/src/journeyView.js b/src/journeyView.js
@@ -67,18 +67,28 @@ class JourneyView extends BaseView {
 					<div class="container">
 						<a class="icon-reload ${this.isUpdating ? 'spinning' : ''} ${!this.isOffline ? '' : 'invisible'}" title="${t("reload")}" @click=${this.refreshJourney}></a>
 						${this.viewState !== null ? html`
-							<h3>${formatPoint(this.viewState.legs[0].origin)} → ${formatPoint(this.viewState.legs[this.viewState.legs.length - 1].destination)}</h3>
-							<p><b>
-								${t('duration')}: ${formatDuration(this.viewState.duration)} |
-								${t('changes')}: ${this.viewState.changes-1} |
-								${t('date')}: ${this.viewState.legs[0].plannedDeparture.formatDate()}
+							<h3>
+								<span>${formatPoint(this.viewState.legs[0].origin)}</span>
+								<span>${formatPoint(this.viewState.legs[this.viewState.legs.length - 1].destination)}</span>
+							</h3>
+							<p>
+								<span>${t('duration')}: ${formatDuration(this.viewState.duration)}</span>
+								<span>${t('changes')}: ${this.viewState.changes-1}</span>
+								<span>${t('date')}: ${this.viewState.legs[0].plannedDeparture.formatDate()}</span>
 								${this.settingsState.showPrices && this.viewState.price ? 
-									html` | ${t('price')}: <span>${formatPrice(this.viewState.price)}</span>`
+									html`<span> ${t('price')}: ${formatPrice(this.viewState.price)}</span>`
 								: nothing}
-							</b></p>
+							</p>
 						` : html`
-							<h3>... → ...</h3>
-							<p><b>${t('duration')}: ... | ${t('changes')}: ... | ${t('date')}: ...</b></p>
+							<h3>
+								<span>...</span>
+								<span>...</span>
+							</h3>
+							<p>
+								<span>${t('duration')}: ...</span>
+								<span>${t('changes')}: ...</span>
+								<span>${t('date')}: ...</span>
+							</p>
 						`}
 					</div>
 					<a class="icon-dots" title="${t("more")}" @click=${this.moreModal}></a>

diff --git a/src/styles/journeyView.css b/src/styles/journeyView.css
@@ -1,3 +1,19 @@
+header {
+	h3 {
+		span:not(:last-child):after {
+			content: " → ";
+		}
+	}
+
+	p {
+		font-weight: bold;
+
+		span:not(:last-child):after {
+			content: " | ";
+		}
+	}
+}
+
 .card {
 	.flex-center {
 		flex-wrap: wrap;

@@ -36,6 +52,23 @@ p.transfer {
 	text-align: center;
 }
 
+a[class^="icon-"] {
+	margin: 0 .3em;
+}
+
+@media (max-width: 799px) {
+	header {
+		p > span {
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		p > span:after {
+			content: unset !important;
+		}
+	}
+}
+
 p.change::before {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M9 3 5 6.99h3V14h2V6.99h3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99z" fill="white"/></svg>');
 }

@@ -48,10 +81,6 @@ p.transfer::before {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="m21.71 11.29-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41M14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5z" fill="white"/></svg>');
 }
 
-a[class^="icon-"] {
-	margin: 0 .3em;
-}
-
 .icon-hint {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M5 3h14a2 2 0 0 1 2 2v14c0 .53-.21 1.04-.59 1.41-.37.38-.88.59-1.41.59H5c-.53 0-1.04-.21-1.41-.59C3.21 20.04 3 19.53 3 19V5c0-1.11.89-2 2-2m6 6h2V7h-2zm3 8v-2h-1v-4h-3v2h1v2h-1v2z"/></svg>');
 }