diff --git a/package.json b/package.json index 60e5ca02..90bf48cf 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "whatwg-fetch": "^2.0.3" }, "devDependencies": { + "@babel/polyfill": "^7.0.0", + "@vue/test-utils": "^1.0.0-beta.26", "autoprefixer": "^6.4.0", "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", diff --git a/src/App.scss b/src/App.scss index 7f33cd51..9c8e2ad3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -237,13 +237,11 @@ i[class*=icon-] { flex-wrap: wrap; .nav-icon { - font-size: 1.1em; margin-left: 0.4em; } &.right { justify-content: flex-end; - padding-right: 20px; } } @@ -251,7 +249,8 @@ i[class*=icon-] { flex: 1 } -nav { +.nav-bar { + padding: 0; width: 100%; align-items: center; position: fixed; @@ -295,10 +294,13 @@ nav { } .inner-nav { + margin: auto; + box-sizing: border-box; + padding-left: 10px; + padding-right: 10px; display: flex; align-items: center; flex-basis: 970px; - margin: auto; height: 50px; a, a i { @@ -466,7 +468,7 @@ nav { &.hidden { opacity: 0; - max-width: 20px; + max-width: 5px; } } } @@ -606,22 +608,8 @@ nav { } } -@media all and (max-width: 959px) { - .mobile-hidden { - display: none; - } - - .panel-switcher { - display: flex; - } - - .container { - padding: 0 0 0 0; - } - - .panel { - margin: 0.5em 0 0.5em 0; - } +.item.right { + text-align: right; } .visibility-tray { @@ -650,3 +638,31 @@ nav { border-radius: $fallback--inputRadius; border-radius: var(--inputRadius, $fallback--inputRadius); } + +@media all and (max-width: 959px) { + .mobile-hidden { + display: none; + } + + .panel-switcher { + display: flex; + } + + .container { + padding: 0; + } + + .panel { + margin: 0.5em 0 0.5em 0; + } + + .button-icon { + font-size: 1.2em; + } + + .status .status-actions { + div { + max-width: 4em; + } + } +} diff --git a/src/App.vue b/src/App.vue index a3a7ecf6..4d4680e2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,6 @@