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">
<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>

25
client/js/journeysView.js
View file

@ -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`

37
client/style.css
View file

@ -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;