vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add new global nav header

Browse source 
Fixes #1151
This commit is contained in:
Joseph Schorr 2016-01-20 18:03:21 -05:00
parent 3fdadb51b7
commit 8318546447
8 changed files with 233 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

49
static/css/core-ui.css
View file

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

48
static/css/directives/ui/header-bar.css
View file

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

15
static/css/quay.css
View file

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

2
static/directives/header-bar.html
View file

@ -1,5 +1,5 @@
<span class="header-bar-parent">
<div class="header-bar-element">
<div class="header-bar-element" ng-class="Features.BILLING ? 'dark' : 'light'">
<div class="header-bar-content" ng-class="searchVisible ? 'search-visible' : ''">
<!-- Quay -->
<div class="navbar-header">

28
static/img/quay-horizontal-whiteblue-nobackground.svg Normal file
View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 348.1 97.6" style="enable-background:new 0 0 348.1 97.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#40B4E5;}
</style>
<title>quay</title>
<path class="st0" d="M179.3,95.3c-1.6,0.8-3.3,1.3-5.1,1.6c-2.4,0.5-4.8,0.7-7.2,0.7c-7.4,0-13.7-1.7-18.8-5.1c-5-3.3-9-8-11.4-13.4
c-3.6-0.7-7-2.1-10.1-4.1c-3.1-2-5.7-4.6-7.8-7.6c-2.2-3.3-3.9-6.9-4.9-10.7c-1.2-4.4-1.8-8.9-1.7-13.5c-0.1-5.2,0.7-10.3,2.3-15.3
c1.4-4.2,3.6-8,6.5-11.3c2.8-3,6.2-5.4,10-7c8.3-3.2,17.5-3.2,25.9,0c3.8,1.6,7.2,3.9,10,7c2.9,3.3,5.1,7.1,6.5,11.3
c1.6,4.9,2.4,10,2.3,15.2c0,9.4-2,17.2-6,23.3c-3.7,5.9-9.5,10.1-16.2,12c1.6,2.4,3.9,4.2,6.6,5.1c2.8,1,5.7,1.5,8.7,1.5
c1.4,0,2.8-0.1,4.2-0.4c1.2-0.2,2.4-0.5,3.5-0.9L179.3,95.3z M128.3,43.2c0,7.5,1.4,13.3,4.2,17.5c4,6.3,12.4,8.1,18.6,4.1
c1.6-1.1,3-2.4,4.1-4.1c2.8-4.1,4.2-10,4.2-17.5c0-7-1.4-12.5-4.2-16.4c-4.4-6.3-13.1-7.8-19.4-3.4c-1.3,0.9-2.5,2.1-3.4,3.4
C129.7,30.7,128.4,36.2,128.3,43.2L128.3,43.2z"/>
<path class="st0" d="M182.7,8.6h15.9v39.1c0,6.9,1,11.7,3.1,14.4c2.1,2.7,5.1,4.1,9,4.1c3.9,0,7-1.4,9.1-4.1s3.2-7.5,3.2-14.4V8.5
h15.2v37.5c0,11.7-2.3,20.3-7,25.6s-11.5,8-20.5,8c-9.1,0-16-2.7-20.8-8c-4.8-5.3-7.2-13.9-7.2-25.6L182.7,8.6L182.7,8.6z"/>
<path class="st0" d="M280.3,61.8H259l-4.3,16.6h-16.1l21.9-69.9h19l21.9,69.9h-16.8L280.3,61.8z M277.1,49.5l-1.6-6.4
c-1-3.5-2-7.2-2.9-11.1s-1.9-7.7-2.8-11.4h-0.4c-0.9,3.7-1.7,7.5-2.6,11.4s-1.8,7.6-2.8,11.1l-1.7,6.4H277.1z"/>
<path class="st0" d="M311.2,53.6l-21.1-45H307l6.2,16.1c1,2.7,1.9,5.2,2.8,7.7s1.8,5,2.9,7.7h0.4c1-2.7,2-5.3,3-7.8s2-5,3-7.7
l6.3-16.1h16.5L327,53.6v24.9h-15.8L311.2,53.6L311.2,53.6z"/>
<polygon class="st1" points="75.1,0 96,44.1 75.1,88.2 57.4,88.2 78.2,44.1 57.4,0 "/>
<polygon class="st0" points="57.4,88.2 36.5,44.1 57.4,0 75.1,0 54.3,44.1 75.1,88.2 "/>
<polygon class="st1" points="48,19.9 38.6,0 20.9,0 39.1,38.6 "/>
<polygon class="st1" points="39.1,49.6 20.9,88.2 38.6,88.2 48,68.4 "/>
<polygon class="st0" points="20.9,88.2 0,44.1 20.9,0 38.6,0 17.8,44.1 38.6,88.2 "/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
static/img/quay-horizontal-whiteoutline.svg Normal file
View file

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.09 97.57"><defs><style>.cls-1{fill:#003764;}.cls-2{fill:#fff;}</style></defs><title>quay</title><rect class="cls-1" width="348.09" height="97.57"/><path class="cls-2" d="M178.18,95.33a20.89,20.89,0,0,1-5.09,1.61,36.5,36.5,0,0,1-7.24.65q-11.15,0-18.82-5.14A31.66,31.66,0,0,1,135.6,79a29.79,29.79,0,0,1-10.14-4.13,27.88,27.88,0,0,1-7.78-7.56,35.26,35.26,0,0,1-4.94-10.67A49.31,49.31,0,0,1,111,43.23a46.85,46.85,0,0,1,2.3-15.28,31.62,31.62,0,0,1,6.49-11.26,27.84,27.84,0,0,1,10-7,35.81,35.81,0,0,1,25.85,0,27.57,27.57,0,0,1,10,7A32.21,32.21,0,0,1,172.2,28a46.52,46.52,0,0,1,2.31,15.17q0,14.16-6,23.27a28.08,28.08,0,0,1-16.19,12A12.93,12.93,0,0,0,159,83.59,26.38,26.38,0,0,0,167.66,85a22.8,22.8,0,0,0,4.24-.38,23.47,23.47,0,0,0,3.49-.91Zm-51-52.1q0,11.26,4.19,17.48a13.5,13.5,0,0,0,22.74,0q4.18-6.22,4.18-17.48,0-10.51-4.19-16.41a13.9,13.9,0,0,0-22.74,0Q127.22,32.71,127.22,43.23Z"/><path class="cls-2" d="M181.58,8.57h15.87V47.71q0,10.29,3.11,14.37t9,4.07q5.9,0,9.11-4.08t3.21-14.37V8.56h15.23V46.09q0,17.59-7,25.63t-20.54,8q-13.62,0-20.81-8T181.59,46.1V8.57Z"/><path class="cls-2" d="M279.19,61.84H257.85l-4.28,16.62H237.48L259.33,8.55h19l21.9,69.92H283.48ZM276,49.51l-1.61-6.43q-1.5-5.25-2.9-11.15t-2.79-11.37h-0.43Q267,26.13,265.61,32t-2.84,11.1l-1.71,6.43H276Z"/><path class="cls-2" d="M310.07,53.57l-21.14-45h16.94l6.23,16.08q1.5,4,2.84,7.67t2.84,7.77h0.43q1.5-4.07,2.95-7.78t2.95-7.67l6.32-16.09h16.52l-21.11,45V78.45H310.08V53.57Z"/><path class="cls-2" d="M96.21,44.24L75.3,0H57.51L48.24,19.65,38.81,0,20.91,0,0,44.24,20.91,88.46h18l9.3-19.77,9.35,19.77H75.29L96.08,44.52ZM47.52,21.17L39.66,37.79,30.21,18,38,1.46ZM17.8,44.24L29.49,19.51l9.45,19.8-2.33,4.93L38.85,49,29.41,68.8ZM38.06,87.11L30.13,70.33,39.57,50.5l7.87,16.65ZM54.41,44.24L66.08,19.55,77.7,44.24,66.06,68.89ZM74.59,86.93L66.78,70.42,79.14,44.24,66.8,18,74.59,1.54l20.18,42.7Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

3
static/js/directives/ui/header-bar.js
View file

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