commit 7693e454b098380c20e9f311208dbb4e728c7949
parent bba529ff52160d5a8c7045f6814b5b823a7aa747
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 19 Apr 2025 17:15:36 +0200
parent bba529ff52160d5a8c7045f6814b5b823a7aa747
Author: Katja (ctucx) <git@ctu.cx>
Date: Sat, 19 Apr 2025 17:15:36 +0200
styles: cleanup
16 files changed, 187 insertions(+), 186 deletions(-)
M
|
111
+++++++++++++++++++++++++++++++++++++++----------------------------------------
M
|
139
++++++++++++++++++++++++++++++++++++++++---------------------------------------
diff --git a/src/baseView.js b/src/baseView.js @@ -105,7 +105,7 @@ export class BaseView extends LitElement { return [ this.renderView(), - !this.overlayState.visible ? nothing : html`<div class="overlay" @click=${this.overlayHandler}>${overlayContent}</div>` + !this.overlayState.visible ? nothing : html`<div class="overlay flex-center" @click=${this.overlayHandler}>${overlayContent}</div>` ]; } }
diff --git a/src/departuresView.js b/src/departuresView.js @@ -100,16 +100,18 @@ class DeparturesView extends BaseView { this.viewState !== null ? html` <div class="container"> - <div class="table" style="grid-template-columns: 1fr 3.5fr 1fr"> + <div class="table" style="grid-template-columns: 1fr .5fr 3.5fr 1fr"> <div class="row head"> <span>Time</span> <span></span> + <span></span> <span>${t('platform')}</span> </div> ${(this.viewState.departures || []).map(departure => html` <a class="row" href="#/t/${this.profile}/${departure.tripId}"> <span class="${departure.cancelled ? 'cancelled' : nothing}">${timeTemplate(departure)}</span> - <span style="justify-content:unset" class="${departure.cancelled ? 'cancelled' : nothing}">${departure.line.name}${departure.direction ? html` → ${departure.direction}` : nothing}</span> + <span class="direction ${departure.cancelled ? 'cancelled' : ''}">${departure.line.name}</span> + <span class="direction ${departure.cancelled ? 'cancelled' : ''}">${departure.direction ? html` → ${departure.direction}` : nothing}</span> ${departure.cancelled ? html` <span class="cancelled-text">${t('cancelled-ride')}</span> ` : html`
diff --git a/src/journeyView.js b/src/journeyView.js @@ -114,14 +114,14 @@ class JourneyView extends BaseView { } else { return html` <div class="card"> - <div class="head flex-center nowrap"> + <div class="head flex-center nowrap train-info"> <a href="#/t/${this.profile}/${leg.tripId}">${formatLineDisplayName(leg.line)}${!leg.direction ? nothing : html` → ${leg.direction}`}</a> ${!leg.cancelled ? nothing : html`<b class="cancelled-text">${t('cancelled-ride')}</b>`} ${leg.remarks.length === 0 ? nothing : html` <a class="${leg.remarksIcon}" @click=${() => remarksModal(this, leg.remarks)}></a> `} </div> - <div class="head flex-center"> + <div class="head flex-center train-info"> ${formatLineAdditionalName(leg.line) === null ? nothing : html`<span>Trip: ${formatLineAdditionalName(leg.line)}</span>`} ${!leg.line.trainType ? nothing : html`<span>${t('trainType')}: ${leg.line.trainType}</span>`} ${(!leg.arrival && !leg.departure) ? nothing : html`<span>${t('duration')}: ${formatDuration(leg.arrival - leg.departure)}</span>`} @@ -131,14 +131,14 @@ class JourneyView extends BaseView { <div class="row head"> <span>${t('arrival')}</span> <span>${t('departure')}</span> - <span>${t('station')}</span> + <span class="station">${t('station')}</span> <span>${t('platform')}</span> </div> ${(leg.stopovers || []).map(stop => html` <div class="row"> <span>${timeTemplate(stop, 'arrival')}</span> <span>${timeTemplate(stop, 'departure')}</span> - <span>${stopTemplate(this.profile, stop.stop)}</span> + <span class="station">${stopTemplate(this.profile, stop.stop)}</span> <span>${platformTemplate(stop)}</span> </div> `)}
diff --git a/src/journeysView.js b/src/journeysView.js @@ -76,7 +76,7 @@ export class JourneysView extends JourneysCanvas { if (previous.get('mode') === 'canvas' && this.mode !== 'canvas') this.disconnectCanvas(); } - if (this.mode === 'canvas') { + if (this.mode === 'canvas') { this.connectCanvas(); if (previous.has('viewState') && this.viewState !== null) { this.renderCanvas(); @@ -116,7 +116,7 @@ export class JourneysView extends JourneysCanvas { this.settingsState.journeysViewMode === 'table' ? html` <div class="container"> ${!this.viewState.earlierRef ? nothing : html` - <a class="arrowButton icon-arrow2 flipped flex-center" title="${t('label_earlier')}" @click=${() => this.moreJourneys('earlier')}></a> + <a class="arrowButton icon-arrow flipped flex-center" title="${t('label_earlier')}" @click=${() => this.moreJourneys('earlier')}></a> `} <div class="table" style="grid-template-columns: repeat(${this.settingsState.showPrices && this.viewState.profile === 'db' ? '6' : '5'}, 1fr) .3fr"> @@ -135,7 +135,7 @@ export class JourneysView extends JourneysCanvas { </div> ${!this.viewState.laterRef ? nothing : html` - <a class="arrowButton icon-arrow2 flex-center" title="${t('label_later')}" @click=${() => this.moreJourneys('later')}></a> + <a class="arrowButton icon-arrow flex-center" title="${t('label_later')}" @click=${() => this.moreJourneys('later')}></a> `} </div> <footer-component></footer-component> @@ -161,7 +161,7 @@ export class JourneysView extends JourneysCanvas { ${this.settingsState.showPrices && this.viewState.profile === 'db' ? html` <span>${formatPrice(journey.price)}</span> ` : nothing} - <span><i class="icon-arrow1"></i></span> + <span><i class="icon-arrow" style="transform:rotate(-90deg)"></i></span> </a> `; }
diff --git a/src/searchView.js b/src/searchView.js @@ -121,11 +121,11 @@ class SearchView extends BaseView { autocomplete="off" ?required=${name !== 'via'}> ${name !== 'from' ? nothing : html` - <div class="button icon-arrow2 ${this.settingsState.showVia ? 'flipped' : ''}" title="${t('via')}" + <div class="button icon-arrow ${this.settingsState.showVia ? 'flipped' : ''}" tabindex="0" title="${t('via')}" @click=${this.settingsState.toggleShowVia}></div> `} ${name !== 'via' ? nothing : html`<div class="button invisible"></div>`} - ${name !== 'to' ? nothing : html`<div class="button icon-swap" title="${t('swap')}" @click=${this.swapFromTo}></div>`} + ${name !== 'to' ? nothing : html`<div class="button icon-swap" tabindex="0" title="${t('swap')}" @click=${this.swapFromTo}></div>`} </div> <div class="suggestions ${this.location[name].suggestionsVisible ? '' : 'hidden'}"> @@ -141,12 +141,12 @@ class SearchView extends BaseView { <div class="flex-row"> <div class="selector"> <input type="radio" id="departure" name="isArrival" value="0" @change=${this.changeHandler} .checked=${!this.isArrival}> - <label for="departure">${t('departure')}</label> + <label for="departure" tabindex="0">${t('departure')}</label> <input type="radio" id="arrival" name="isArrival" value="1" @change=${this.changeHandler} .checked=${this.isArrival}> - <label for="arrival">${t('arrival')}</label> + <label for="arrival" tabindex="0">${t('arrival')}</label> </div> - <div class="button now" title="${t('titleSetDateTimeNow')}" @click=${this.resetDate}>${t('now')}</div> + <div class="button now" tabindex="0" title="${t('titleSetDateTimeNow')}" @click=${this.resetDate}>${t('now')}</div> ${!this.settingsState.combineDateTime ? html` <input type="time" name="time" title="${t('time')}" class="flex-grow" @change=${this.changeHandler} .value=${this.date.formatTime()} required> <input type="date" name="date" title="${t('date')}" class="flex-grow" @change=${this.changeHandler} .value=${this.date.formatISODate()} required> @@ -182,7 +182,7 @@ class SearchView extends BaseView { </div> ${this.history.length !== 0 ? html` - <div id="historyButton" class="arrowButton icon-arrow2 ${!this.showHistory ? '' : 'flipped'}" title="History" @click=${this.toggleHistory}></div> + <div id="historyButton" class="arrowButton icon-arrow ${!this.showHistory ? '' : 'flipped'}" title="History" @click=${this.toggleHistory}></div> ` : nothing} </form>
diff --git a/src/styles/buttonInput.css b/src/styles/buttonInput.css @@ -1,66 +1,86 @@ -input, button, .button, -.selector { - margin: 4px; -} - -input[type="datetime-local"], -input[type="date"], -input[type="time"], -input[type="text"] { +.selector label, +.arrowButton, +input { cursor: pointer; - box-sizing: border-box; - padding: .3em .5em; - font-size: 1.5em; - padding: 7px; border: none; - outline: none; - background-color: white; - color: black; border-radius: 0; } -input[type="checkbox"] { - transform: scale(1.5); +input[type="number"] { + outline: none; + border: 1px solid gray; + border-radius: 5px; +} + +button:focus, +.button:focus, +.selector label:focus, +.arrowButton:focus, +input:not([type="checkbox"]):focus { + outline: .1em solid gray; } button, .button, +.arrowButton, .selector label { + user-select: none; +} + +button, +.button, +.selector label, +input { background-color: white; +} + + +input[type="datetime-local"], +input[type="date"], +input[type="time"], +input[type="text"] { + box-sizing: border-box; + padding: .26em; + font-size: 1.5em; color: black; - cursor: pointer; - user-select: none; } -button, .button { +button, +.button, +.selector label { + display: flex; + justify-content: center; + align-items: center; width: max-content; - padding: 8px 20px; + color: black; + padding: .5em 1em; transition: background-color 300ms; - border: none; } -button:hover, .button:hover { +button:hover, +.button:hover { background-color: #d3d3d3; } -button.color, .button.color { +button.color, +.button.color { background-color: #43a047; color: white; } -button.color:hover, .button.color:hover { +button.color:hover, +.button.color:hover { background-color: #388e3c; } .arrowButton { - cursor: pointer; - user-select: none; - height: 72px; - width: 72px; + height: 4.5em; + width: 4.5em; margin: 0 auto; transition: transform 150ms; + /* to make icon white */ filter: invert(); } @@ -76,15 +96,7 @@ button.color:hover, .button.color:hover { } input:checked + label { - background: white - } - - label { - display: flex; - justify-content: center; - align-items: center; - user-select: none; - padding: 0 10px; + background: white; } label:after { @@ -102,23 +114,9 @@ button.color:hover, .button.color:hover { } .selector.rectangular label { - height: 32px; - width: 32px; + height: 2em; + width: 2em; padding: 3px; font-weight: bold; overflow: hidden; -} - -@media (max-width: 650px) { - button[type="submit"]{ - flex-basis: 100%; - justify-content: center; - } -} - -@media (max-width: 799px) { - .arrowButton { - width: 48px; - height: 48px; - } -} +}+ \ No newline at end of file
diff --git a/src/styles/departuresView.css b/src/styles/departuresView.css @@ -1,3 +1,7 @@ +.direction { + justify-content: unset !important; +} + @media (min-width: 800px) { .table { margin: 50px auto;
diff --git a/src/styles/header.css b/src/styles/header.css @@ -12,7 +12,6 @@ border-bottom: 1px solid rgba(255, 255, 255, .3); .container { - max-width: 1000px; width: 80vw; margin: 0; } @@ -21,15 +20,7 @@ margin-right: 1.5em; } - .icon-reload { - float: right; - } - - .icon-back, - .icon-reload, - .icon-share, - .icon-dots, - .icon-bahnexpert { + [class^="icon-"]:not(.mode-changers *) { cursor: pointer; width: 32px; height: 32px; @@ -37,6 +28,10 @@ user-select: none; } + .icon-reload { + float: right; + } + .mode-changers { margin-top: auto; margin-left: auto;
diff --git a/src/styles/icons.css b/src/styles/icons.css @@ -6,15 +6,7 @@ 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="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" fill="white"/></svg>'); } -.icon-other { - 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 17h-2v-2h2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25"/></svg>'); -} - -.icon-arrow1 { - 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="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>'); -} - -.icon-arrow2 { +.icon-arrow { 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="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>'); }
diff --git a/src/styles/journeyView.css b/src/styles/journeyView.css @@ -15,7 +15,7 @@ header { } .card { - .flex-center { + .train-info { flex-wrap: wrap; background-color: rgb(238, 238, 238); padding: .5em .2em; @@ -42,7 +42,6 @@ p { p::before { filter: drop-shadow( 0 0 5px rgba(0, 0, 0, .6) ); margin-right: 4px; - vertical-align: sub; } p.change, @@ -56,6 +55,12 @@ a[class^="icon-"] { margin: 0 .3em; } +@media (max-width: 650px) { + .station { + justify-content: unset !important; + } +} + @media (max-width: 799px) { header { p > span {
diff --git a/src/styles/journeysView.css b/src/styles/journeysView.css @@ -22,6 +22,8 @@ @media (max-width: 799px) { .arrowButton { + width: 48px; + height: 48px; margin: 15px auto; } }
diff --git a/src/styles/overlays.css b/src/styles/overlays.css @@ -8,35 +8,22 @@ background-color: rgba(0, 0, 0, .7); z-index: 100; backdrop-filter: blur(10px); - - .content { - z-index: 1050; - margin: auto; - width: max-content; - -webkit-overflow-scrolling: touch; - } } .modal { - z-index: 1050; - margin: auto; + z-index: 200; background-color: white; width: max-content; padding: 15px; - -webkit-overflow-scrolling: touch; } .modal.select { a { width: 100%; - margin: 5px 0; + margin-bottom: 10px; text-align: center; } - a:first-child { - margin-top: unset; - } - a:last-child { margin-bottom: unset; } @@ -84,7 +71,7 @@ } } -@media (min-width: 800px) { +@media (min-width: 651px) { .modal.dialog { width: 600px; }
diff --git a/src/styles/searchView.css b/src/styles/searchView.css @@ -14,7 +14,7 @@ } } -.title::before { +.title:before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>'); width: 50px; height: 50px; @@ -22,10 +22,14 @@ } form { - color: white; + button, + .button, + .selector, + input { + margin: 4px; + } - .button.icon-arrow1, - .button.icon-arrow2, + .button.icon-arrow, .button.icon-plus, .button.icon-minus, .button.icon-swap { @@ -33,10 +37,6 @@ form { } .button.now { - display: flex; - justify-content: center; - align-items: center; - user-select: none; padding: 0 10px; } @@ -45,28 +45,58 @@ form { height: 32px; } - .filler { - flex: auto; - } - .button.icon-settings { width: 32px; padding: 3px; } button[type="submit"]{ - display: flex; - align-items: center; font-size: 20px; padding: 8px; } - button[type="submit"]::after { + button[type="submit"]:after { width: 24px; height: 24px; margin-left: 5px; content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="green"/></svg>'); } + + .selector { + .icon-ice, + .icon-ic, + .icon-icice, + .icon-dzug, + .icon-regional { + font-style: italic; + } + + .icon-tram:after, + .con-bus:after, + .icon-ferry:after, + .icon-taxi:after { + font-size: 0.6rem; + } + + .icon-ice:after { content: 'ICE'; } + .icon-ic:after { content: 'IC'; } + .icon-icl:after { content: 'ICL'; } + .icon-icice:after { content: 'IC ICE'; } + .icon-dzug:after { content: 'D'; } + .icon-regional:after { content: 'NV'; } + .icon-re:after { content: 'RE'; } + .icon-o:after { content: 'Ø'; } + .icon-suburban:after { content: 'S'; } + .icon-subway:after { content: 'U'; } + .icon-tram:after { content: 'Tram'; } + .icon-bus:after { content: 'Bus'; } + .icon-ferry:after { content: 'Ferry'; } + .icon-taxi:after { content: 'Taxi'; } + } +} + +.filler { + flex: auto; } .suggestions { @@ -138,63 +168,11 @@ form { display: block; } - .icon-arrow1 { + .icon-arrow { width: 25px; } } -.selector { - .icon-ice, - .icon-ic, - .icon-icice, - .icon-dzug, - .icon-regional { - font-style: italic; - } - - .icon-tram:after, - .con-bus:after, - .icon-ferry:after, - .icon-taxi:after { - font-size: 0.6rem; - } - - .icon-ice:after { content: 'ICE'; } - .icon-ic:after { content: 'IC'; } - .icon-icl:after { content: 'ICL'; } - .icon-icice:after { content: 'IC ICE'; } - .icon-dzug:after { content: 'D'; } - .icon-regional:after { content: 'NV'; } - .icon-re:after { content: 'RE'; } - .icon-o:after { content: 'Ø'; } - .icon-suburban:after { content: 'S'; } - .icon-subway:after { content: 'U'; } - .icon-tram:after { content: 'Tram'; } - .icon-bus:after { content: 'Bus'; } - .icon-ferry:after { content: 'Ferry'; } - .icon-taxi:after { content: 'Taxi'; } -} - -@media (max-width: 650px) { - .filler { - flex: unset !important; - } -} - -@media (max-width: 799px) { - .container { - padding: 10px; - } -} - -@media (min-width: 800px) { - form, .history { - width: 80vw; - max-width: 700px; - color: white; - } -} - .icon-plus { 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="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg>'); } @@ -222,3 +200,28 @@ form { .icon-settings { 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="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"/></svg>'); } + +@media (max-width: 650px) { + .filler { + flex: unset !important; + } + + button[type="submit"]{ + flex-basis: 100%; + justify-content: center; + } +} + +@media (max-width: 799px) { + .container { + padding: 10px; + } +} + +@media (min-width: 800px) { + form, .history { + width: 80vw; + max-width: 700px; + color: white; + } +}
diff --git a/src/styles/settingsView.css b/src/styles/settingsView.css @@ -1,5 +1,6 @@ .flex-row, .flex-column { + justify-content: space-between; padding: 1em; border-bottom: 1px solid rgba(0, 0, 0, .4); } @@ -7,7 +8,6 @@ .flex-row:last-child { padding: .5em; border-bottom: unset; - justify-content: right; } label { @@ -18,12 +18,24 @@ span { padding-bottom: .25em; } -select, input[type=number]{ +select, +input[type=number] { margin: 0; - margin-left: auto; width: 65%; } +input[type="checkbox"] { + transform: scale(1.5); +} + +@media (max-width: 650px) { + select, + input[type=number] { + margin: 0; + width: 100%; + } +} + .icon-trashcan { 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 3v1H4v2h1v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1V4h-5V3zM7 6h10v13H7zm2 2v9h2V8zm4 0v9h2V8z" fill="white"/></svg>'); }
diff --git a/src/styles/table.css b/src/styles/table.css @@ -18,8 +18,8 @@ span { display: flex; - align-items: center; justify-content: center; + align-items: center; padding: .35em .2em; border-bottom: 1px solid rgba(0, 0, 0, 0.3); }
diff --git a/src/tripView.js b/src/tripView.js @@ -116,7 +116,7 @@ class TripView extends BaseView { this.viewState !== null ? html` <div class="container"> <div class="card"> - <div class="head flex-center nowrap"> + <div class="head flex-center nowrap train-info"> ${!this.viewState.trip.bahnExpertUrl ? nothing : html`<a href="${this.viewState.trip.bahnExpertUrl}">`} ${formatLineDisplayName(this.viewState.trip.line)}${this.viewState.trip.direction ? html` → ${this.viewState.trip.direction}` : ''} ${!this.viewState.trip.bahnExpertUrl ? nothing : html`</a>`} @@ -128,7 +128,7 @@ class TripView extends BaseView { `} </div> - <div class="head flex-center"> + <div class="head flex-center train-info"> ${formatLineAdditionalName(this.viewState.trip.line) !== "" ? nothing : html` <span>Trip: ${formatLineAdditionalName(this.viewState.trip.line)}</span> `} @@ -149,14 +149,14 @@ class TripView extends BaseView { <div class="row head"> <span>${t('arrival')}</span> <span>${t('departure')}</span> - <span>${t('station')}</span> + <span class="station">${t('station')}</span> <span>${t('platform')}</span> </div> ${(this.viewState.trip.stopovers || []).map(stop => html` <div class="row ${!stop.cancelled ? '' : 'cancelled'}"> <span>${timeTemplate(stop, 'arrival')}</span> <span>${timeTemplate(stop, 'departure')}</span> - <span>${stopTemplate(this.profile, stop.stop)}</span> + <span class="station">${stopTemplate(this.profile, stop.stop)}</span> <span>${platformTemplate(stop)}</span> </div> `)}