commit 41185859f1c5df3acc29fb5663c2168ef75069c4
parent 87ba60b6ebf0fd390f3780060b702dcec673b721
Author: Milan Pässler <me@pbb.lc>
Date: Thu, 23 Jul 2020 15:21:36 +0200
parent 87ba60b6ebf0fd390f3780060b702dcec673b721
Author: Milan Pässler <me@pbb.lc>
Date: Thu, 23 Jul 2020 15:21:36 +0200
header style fixes
2 files changed, 25 insertions(+), 11 deletions(-)
diff --git a/client/js/journeysView.js b/client/js/journeysView.js @@ -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>
diff --git a/client/style.css b/client/style.css @@ -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; }