header style fixes

This commit is contained in:
Milan Pässler 2020-07-23 15:21:36 +02:00
parent 87ba60b6eb
commit 41185859f1
2 changed files with 25 additions and 11 deletions

View file

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

View file

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