From 8318546447718c668570f11b5724148b4a92ea37 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Wed, 20 Jan 2016 18:03:21 -0500 Subject: [PATCH] Add new global nav header Fixes #1151 --- static/css/core-ui.css | 49 ++++++++ static/css/directives/ui/header-bar.css | 48 +++++++- static/css/quay.css | 15 --- static/directives/header-bar.html | 2 +- ...quay-horizontal-whiteblue-nobackground.svg | 28 +++++ static/img/quay-horizontal-whiteoutline.svg | 1 + static/js/directives/ui/header-bar.js | 3 +- templates/base.html | 105 ++++++++++++++++++ 8 files changed, 233 insertions(+), 18 deletions(-) create mode 100644 static/img/quay-horizontal-whiteblue-nobackground.svg create mode 100644 static/img/quay-horizontal-whiteoutline.svg diff --git a/static/css/core-ui.css b/static/css/core-ui.css index 8bca84034..f1a7499d6 100644 --- a/static/css/core-ui.css +++ b/static/css/core-ui.css @@ -1,3 +1,52 @@ +/* Global Brand Bar */ +.co-m-global-nav { + background: white; + height: 30px; + line-height: 36px; + position: relative; + z-index: 90; +} + +.co-m-global-nav svg { + width: auto !important; +} + +.co-m-global-nav .co-m-global-nav-left { + text-align: left; + padding-left: 28px; +} + +.co-m-global-nav .co-m-global-nav-right { + text-align: right; + font-size: 16px; + line-height: 30px; + padding-right: 25px; +} + +.co-m-global-nav .co-m-global-nav-item { + padding: 0 20px 0 15px; + border-right: 1px solid #eee; + display: inline-block; + height: 16px; + line-height: 16px; +} + +.co-m-global-nav .co-m-global-nav-item:first-of-type { + padding-left: 0; +} + +.co-m-global-nav .co-m-global-nav-item:last-of-type { + padding-right: 0; + border-right: 0; +} + +/* Tweaks for small screens */ +@media screen and (max-width: 767px) { + .co-m-global-nav { + display: none; /* hide the whole thing */ + } +} + a:active { outline: none !important; } diff --git a/static/css/directives/ui/header-bar.css b/static/css/directives/ui/header-bar.css index 7fa08bf22..e2f1a1e2a 100644 --- a/static/css/directives/ui/header-bar.css +++ b/static/css/directives/ui/header-bar.css @@ -29,6 +29,21 @@ nav.navbar-default .navbar-nav>li>a.active { background: rgba(255, 255, 255, 0.4) !important; } +#quay-logo { + margin-left: 10px; + margin-top: 6px; + height: 30px; + width: 100px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + display: inline-block; +} + +#quay-logo.hosted-logo { + width: 150px; +} + .header-bar-element .header-bar-content.search-visible { box-shadow: 0px 1px 4px #ccc; } @@ -42,11 +57,29 @@ nav.navbar-default .navbar-nav>li>a.active { background: white; } +.header-bar-element.dark .header-bar-content { + background-color: rgba(11, 57, 90, 0.9); + box-shadow: none !important; + color: white; +} + +.header-bar-element.dark .navbar-nav>li>a { + color: white; +} + +.header-bar-element.dark .navbar-nav>li>a:hover, +.header-bar-element.dark .navbar-default .navbar-nav>li>a:focus, +.header-bar-element.dark .navbar-nav>li>a.active { + background-color: rgba(0,0,0,.25); + text-shadow:1px 1px 12px rgba(0,0,0,0.60); /* Increase opacity and spread */ + color: white !important; +} + .header-bar-element .search-box { position: absolute; left: 0px; right: 0px; - top: -50px; + top: -60px; z-index: 4; height: 56px; transition: top 0.3s cubic-bezier(.23,.88,.72,.98); @@ -203,6 +236,14 @@ nav.navbar-default .navbar-nav>li>a.active { margin-right: 20px; } +.header-bar-element.dark .user-tools .user-tool { + color: white; +} + +.header-bar-element.dark .user-tools .caret { + color: white; +} + .user-tools.with-menu { margin-right: 6px; } @@ -224,6 +265,11 @@ nav.navbar-default .navbar-nav>li>a.active { color: #333; } +.header-bar-element.dark .user-tools i.user-tool:hover { + cursor: pointer; + color: #78CDF1; +} + .user-tools .new-menu { background: transparent !important; } diff --git a/static/css/quay.css b/static/css/quay.css index 904c45aeb..8b66cac87 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -82,21 +82,6 @@ border-bottom-left-radius: 0px; } -#quay-logo { - margin-left: 10px; - margin-top: 1px; - height: 36px; - width: 100px; - background-repeat: no-repeat; - background-size: contain; - background-position: center; - display: inline-block; -} - -#quay-logo.hosted-logo { - width: 150px; -} - #padding-container { padding: 20px; padding-top: 20px; diff --git a/static/directives/header-bar.html b/static/directives/header-bar.html index ebcb33c52..71a9ba20b 100644 --- a/static/directives/header-bar.html +++ b/static/directives/header-bar.html @@ -1,5 +1,5 @@ -
+
diff --git a/static/img/quay-horizontal-whiteblue-nobackground.svg b/static/img/quay-horizontal-whiteblue-nobackground.svg new file mode 100644 index 000000000..8ca399cec --- /dev/null +++ b/static/img/quay-horizontal-whiteblue-nobackground.svg @@ -0,0 +1,28 @@ + + + + +quay + + + + + + + + + + diff --git a/static/img/quay-horizontal-whiteoutline.svg b/static/img/quay-horizontal-whiteoutline.svg new file mode 100644 index 000000000..65e293791 --- /dev/null +++ b/static/img/quay-horizontal-whiteoutline.svg @@ -0,0 +1 @@ +quay \ No newline at end of file diff --git a/static/js/directives/ui/header-bar.js b/static/js/directives/ui/header-bar.js index 7fde5851d..7435190b6 100644 --- a/static/js/directives/ui/header-bar.js +++ b/static/js/directives/ui/header-bar.js @@ -52,6 +52,7 @@ angular.module('quay').directive('headerBar', function () { }; $scope.Config = Config; + $scope.Features = Features; $scope.notificationService = NotificationService; $scope.searchingAllowed = false; $scope.searchVisible = false; @@ -161,7 +162,7 @@ angular.module('quay').directive('headerBar', function () { $scope.getEnterpriseLogo = function() { if (!Config.ENTERPRISE_LOGO_URL) { if (Features.BILLING) { - return '/static/img/QuayByCoreOS_horizontal_color.svg'; + return '/static/img/quay-horizontal-whiteblue-nobackground.svg'; } else { return '/static/img/QuayEnterprise_horizontal_color.svg' } diff --git a/templates/base.html b/templates/base.html index 184c2454e..6cd9673ff 100644 --- a/templates/base.html +++ b/templates/base.html @@ -88,6 +88,111 @@ mixpanel.init("{{ mixpanel_key }}", { track_pageview : false, debug: {{ is_debug