zotan/oeffisearch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

make journey(s)view ultrawide friendly

Browse source
This commit is contained in:
Milan Pässler 2020-07-22 23:23:28 +02:00
parent a14e2b8b31
commit 00deb68b01
3 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
client/js/journeyView.js
View file

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

25
client/js/journeysView.js
View file

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

37
client/style.css
View file

@ -27,9 +27,19 @@ a {
header { header {
position: relative; position: relative;
color: white; color: white;
padding: 0 0 0 9vw;
background-color: #555; background-color: #555;
bottom-border: 1px solid rgba(255, 255, 255, .3); 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 { .row {
@ -49,23 +59,15 @@ header {
cursor: pointer; cursor: pointer;
} }
.back { .back.invisible {
cursor: pointer; visibility: hidden;
position: absolute;
left: 17px;
top: 17px;
width: 32px;
height: 32px;
user-select: none;
} }
.back,
.reload { .reload {
cursor: pointer; cursor: pointer;
position: absolute;
right: 17px;
top: 17px;
width: 32px; width: 32px;
height: 32px; height: 32px;
margin: 12px;
user-select: none; user-select: none;
} }
@ -111,6 +113,7 @@ table {
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
min-width: 390px; min-width: 390px;
max-width: 1000px;
} }
div.card { div.card {
overflow-x: auto; overflow-x: auto;
@ -445,10 +448,6 @@ tbody tr:hover td {
padding: 10px; padding: 10px;
} }
header {
padding: 0 0 0 50px;
}
.back { .back {
left: 10px; left: 10px;
} }
@ -501,10 +500,6 @@ tbody tr:hover td {
width: 40%; width: 40%;
} }
header {
padding: 0 10vw;
}
td p { td p {
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;