diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 6b30fb5..5dfadf5 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -22,6 +22,7 @@ import SettingsModal from './modals/SettingsModal' import ExportModal from './modals/ExportModal' import SourcesModal from './modals/SourcesModal' import OpenModal from './modals/OpenModal' +import pkgJson from '../../package.json' import style from '../libs/style' @@ -136,7 +137,9 @@ export default class Toolbar extends React.Component { className="maputnik-toolbar-logo" > Maputnik -

Maputnik

+

Maputnik + v{pkgJson.version} +

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index 6ec5109..6bd315c 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -76,6 +76,7 @@ position: fixed; align-items: center; justify-content: center; + z-index: 9; @include flex-row; } diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 3e4ed2c..cf71aa3 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -36,12 +36,24 @@ cursor: pointer; color: $color-white; text-decoration: none; + line-height: 20px; + + h1 { + position: relative; + } &:hover { background-color: $color-midgray; } } +.maputnik-toolbar-version { + position: absolute; + font-size: 10px; + bottom: -2px; + margin-left: 4px; +} + .maputnik-toolbar-action { @extend .maputnik-toolbar-link; } @@ -56,7 +68,7 @@ } .maputnik-toolbar-logo { - flex: 0 0 140px; + flex: 0 0 170px; } .maputnik-toolbar__inner {