Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Update fleetdm.com navigation (#4402)

Browse source 
* fix btn-primary styles

* add dropdown navigation and styles

* remove classes

* move modified bootstrap classes to bootstrap-overrides, add hover event to dropdown menus
This commit is contained in:
eashaw 2022-03-01 13:47:36 -06:00 committed by GitHub
parent 8af5fa7a5a
commit a0b377e544
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 240 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
website/assets/styles/bootstrap-overrides.less vendored
View file

@ -101,13 +101,13 @@ a.text-danger:hover, a.text-danger:focus {
}
&.disabled, &:disabled {
color: #fff;
background-color: darken(#ff5c83, 10%), 0.25;
border-color: darken(#ff5c83, 10%), 0.25;
background-color: darken(#ff5c83, 10%);
border-color: darken(#ff5c83, 10%);
}
&:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active, .show > &.dropdown-toggle {
color: #fff;
background-color: darken(#ff5c83, 10%), 0.25;
border-color: darken(#ff5c83, 10%), 0.25;
background-color: darken(#ff5c83, 10%);
border-color: darken(#ff5c83, 10%);
}
&:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus {
box-shadow: 0 0 0.25rem 0.2rem #ff5c83;
@ -169,7 +169,54 @@ a.text-danger:hover, a.text-danger:focus {
pointer-events: none;
font-weight: @bold;
}
[purpose='page-header'] {
.collapsing {
opacity: 0;
transition: 0s;
}
.collapse.show {
opacity: 1;
pointer-events: auto;
z-index: 3;
overflow-y: scroll;
}
.collapse {
opacity: 0;
}
.dropdown-menu {
left: 0px;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-header {
padding-left: 16px;
padding-right: 16px;
padding-top: 16px;
color: @core-fleet-black-25;
font-size: 11px;
line-height: 20px;
font-weight: bold;
}
.dropdown-divider {
margin: 4px 16px 0px 16px;
}
.dropdown-item {
font-size: 14px;
line-height: 20px;
padding: 8px 16px;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.dropdown-item:hover {
background-color: unset;
color: #6a67fe;
}
.dropdown-item:before {
content: none;
}
}
.form-control {
height: 54px;
padding: 8px 16px;

253
website/assets/styles/layout.less vendored
View file

@ -16,39 +16,9 @@ html, body {
padding-bottom: @footer-height;
}
[purpose='page-header'].homepage-header {
position: absolute;
left: 0;
right: 0;
.dropdown:hover > .dropdown-menu {
display: block;
}
.header-btn {
color: #ffffff;
cursor: unset;
font-family: @navigation-font;
font-weight: @bold;
border: 0;
}
.header-link {
color: #ffffff;
font-weight: @bold;
svg {
path {
fill: #ffffff;
}
}
}
.header-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
}
}
}
.mobile-menu {
[purpose='page-header'] {
// Mobile navigation menu
[purpose='mobile-nav'] {
position: fixed;
top: 0;
left: 0;
@ -56,73 +26,106 @@ html, body {
bottom: 0;
pointer-events: none;
background-color: #ffffff;
}
.collapsing {
opacity: 0;
transition: 0s;
}
.collapse.show {
opacity: 1;
pointer-events: auto;
z-index: 3;
}
.collapse {
opacity: 0;
}
.mobile-menu-item {
color: #192147;
border-radius: 4px;
text-decoration: none;
}
.mobile-menu-item:hover {
background-color: #f1f0ff;
font-weight: @bold;
}
.mobile-menu-item:active {
background-color: #f1f0ff;
font-weight: @bold;
}
.menu-link {
color: #192147;
font-weight: @bold;
svg {
path {
fill: #192147;
a:not(.btn) {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 4px;
font-weight: 700;
color: #212529;
cursor: pointer;
}
hr {
margin-top: 4px;
margin-bottom: 8px;
}
[purpose='mobile-dropdown-toggle'] {
font-weight: 700;
color: @core-fleet-black;
margin-bottom: 0px;
&[aria-expanded='true'] {
color: #6a67fe;
outline: none;
margin-bottom: 4px;
}
}
[purpose='mobile-dropdown'] {
span {
display: inline-flex;
font-weight: bold;
font-size: 12px;
line-height: 24px;
color: @core-fleet-black-50;
margin-bottom: 4px;
}
a {
display: inline-flex;
width: 100%;
padding: 8px 24px 8px 0px;
font-weight: 400;
color: #212529;
white-space: nowrap;
background-color: transparent;
}
a:hover {
color: #6a67fe;
text-decoration: none;
}
}
}
.menu-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
// Header navigation links
[purpose='header-nav'] {
[aria-expanded='true'] {
color: #6a67fe;
outline: none;
}
a:hover {
color: #6a67fe;
text-decoration: none;
}
a:focus {
outline-color: none;
}
[purpose='header-dropdown'] {
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
border-radius: 8px;
a {
color: @core-fleet-black;
font-weight: 400;
line-height: 20px;
}
a:hover {
color: #6a67fe;
text-decoration: none;
}
}
}
}
[purpose='page-header'].header {
} // Homepage header styles
&.homepage-header {
position: absolute;
left: 0;
right: 0;
[purpose='header-btn'] {
color: #ffffff;
cursor: unset;
font-family: @navigation-font;
font-weight: @bold;
border: 0;
}
[purpose='header-nav'] {
a {
color: #ffffff;
font-weight: @bold;
cursor: pointer;
}
}
} // Non-homepage header styles
&.header {
left: 0;
right: 0;
border-bottom: 1px solid #e2e4ea;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.dropdown:hover > .dropdown-menu {
display: block;
}
.header-btn {
color: #192147;
cursor: unset;
font-family: @navigation-font;
font-weight: @bold;
}
// .header-btn[aria-expanded='true'] {
// color: #6a67fe;
// }
.header-link {
color: #192147;
font-weight: @bold;
}
.current-page {
color: #6a67fe;
svg {
@ -131,68 +134,22 @@ html, body {
}
}
}
.header-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
}
}
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-color: #ffffff;
}
.collapsing {
opacity: 0;
}
.collapse.show {
opacity: 1;
pointer-events: auto;
z-index: 3;
}
.collapse {
opacity: 0;
}
.mobile-menu-item {
[purpose='header-btn'] {
color: #192147;
border-radius: 4px;
text-decoration: none;
}
.mobile-menu-item:hover {
background-color: #f1f0ff;
cursor: unset;
font-family: @navigation-font;
font-weight: @bold;
}
.mobile-menu-item:active {
background-color: #f1f0ff;
font-weight: @bold;
}
.menu-link {
color: #192147;
font-weight: @bold;
svg {
path {
fill: #192147;
}
}
}
.menu-link:hover {
color: #6a67fe;
svg {
path {
fill: #6a67fe;
}
[purpose='header-nav'] {
a {
color: #192147;
font-weight: @bold;
cursor: pointer;
}
}
}
// Footer styles
[purpose='page-footer'] {
color: white;
height: @footer-height;
@ -241,12 +198,6 @@ body.detected-mobile {
// …
}
.dropdown:hover > .btn.btn-link {
color: #6a67fe;
}
@media (max-width: 767px) {
[purpose='page-wrap'] {
padding-bottom: 264px;

117
website/views/layouts/layout.ejs vendored
View file

@ -74,7 +74,7 @@
<% } %>
</a>
<div class="d-flex d-lg-none">
<button style="font-size: 16px; text-decoration: none;" class="header-btn btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<button purpose="header-btn" style="font-size: 16px; text-decoration: none;" class="btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span class="mr-2">Menu</span>
<% /* The hamburger icon on the homepage is white */ %>
<% if (isHomepage) { %>
@ -84,49 +84,92 @@
<% } %>
</button>
</div>
<div class="mobile-menu collapse px-4 px-sm-5" id="navbarToggleExternalContent">
<%/* Mobile Navigation menu */%>
<div purpose="mobile-nav" class="collapse px-4 px-sm-5" id="navbarToggleExternalContent">
<div class="d-flex justify-content-between">
<a href="/">
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;" class="mt-3"/>
</a>
<button style="font-size: 16px; text-decoration: none;" class="header-btn btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<button style="font-size: 16px; text-decoration: none;" class="btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<img alt="An 'X' icon indicating that this can be interacted with to close the navigation menu." src="/images/icon-close-16x16@2x.png" style="width: 16px;" />
</button>
</div>
<div class="pt-2">
<a href="/platform" class="menu-link d-flex align-items-center px-3 py-2 mb-4" style="text-decoration: none; font-weight: 700;">Platform</a>
<a href="/docs" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Docs</a>
<a href="/queries" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Queries</a>
<a href="/pricing" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Pricing</a>
<div id="mobileDropdowns" class="py-2">
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleUseCases" aria-haspopup="true" aria-expanded="false">Use cases</a>
<div class="d-block">
<div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
<a href="/platform">How it works</a>
<span>SUCCESS STORIES</span>
<a class="pl-3" href="https://blog.fleetdm.com/fleet-user-stories-e492a08cebfc">Wayfair</a>
<a class="pl-3" href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10">Schrödinger</a>
<a class="pl-3" href="https://blog.fleetdm.com/fleet-user-stories-e5dc300b9e1c">F100 security & networking co.</a>
</div>
</div>
<hr>
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleDocumentation" aria-haspopup="true" aria-expanded="false">Documentation</a>
<div class="d-block">
<div id="mobileNavbarToggleDocumentation" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a href="/docs">Docs</a>
<a href="https://github.com/fleetdm/fleet/releases">Releases</a>
<a href="/queries">Query library</a>
<span>GUIDES</span>
<a class="pl-3" href="https://blog.fleetdm.com/deploying-fleet-on-aws-with-terraform-a58a908e8d40">Deploy on AWS with Terraform</a>
<a class="pl-3" href="https://blog.fleetdm.com/deploying-fleet-on-render-2d743aed213f">Deploy on Render</a>
</div>
</div>
<hr>
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Community</a>
<div class="d-block">
<div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a href="/docs/contributing">Contribute</a>
<a href="/blog">Blog</a>
<a href="/logos">Logos & artwork</a>
</div>
</div>
<hr>
<a href="/pricing" class="d-flex align-items-center mb-2 pb-3" style="text-decoration: none; font-weight: 700;">Pricing</a>
<a style="padding: 4px 16px; line-height: 24px; width: 100px" class="btn btn-sm btn-primary align-items-center d-flex " href="/get-started">Try it out</a>
<!-- <a href="/blog" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Blog</a> -->
<!-- <a href="/company/contact" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style=" text-decoration: none; color: #192147; font-weight: 700;">Contact</a> -->
<!-- <a target="_blank" href="https://github.com/fleetdm/fleet" class="menu-link d-flex align-items-center px-3 py-2" style=" text-decoration: none; font-weight: 700;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
</svg>
<span class="ml-2">GitHub</span>
</a> -->
</div>
</div>
<div class="d-none d-lg-flex">
<a href="/platform" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'platform' ? 'current-page' : '' %>" style="text-decoration: none; line-height: 23px;">Platform</a>
<a href="/docs" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'docs' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Docs</a>
<a href="/queries" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'queries' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Queries</a>
<a href="/pricing" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'pricing' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Pricing</a>
<!-- <a target="_blank" href="/blog" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Blog</a> -->
<!-- <a href="/company/contact" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Contact</a> -->
<!-- <a target="_blank" href="https://github.com/fleetdm/fleet" class="header-link d-flex align-items-center px-3 py-2" style=" text-decoration: none;line-height: 23px;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
</svg>
<span style="line-height: 24px;" class="ml-2 mr-4">GitHub</span>
</a> -->
<span class="header-link d-flex align-items-center mr-4 text-decoration-none">
<%/* Desktop Navigation bar */%>
<div purpose="header-nav" class="d-none d-lg-flex align-items-center">
<div purpose="dropdown-button" class="btn-group">
<a class="dropdown-toggle d-flex align-items-center py-2 px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Use cases</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/platform">How it works</a>
<div class="dropdown-divider"></div>
<h6 class="muted dropdown-header">SUCCESS STORIES</h6>
<a class="dropdown-item mb-1" href="https://blog.fleetdm.com/fleet-user-stories-e492a08cebfc">Wayfair</a>
<a class="dropdown-item mb-1" href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10">Schrödinger</a>
<a class="dropdown-item" href="https://blog.fleetdm.com/fleet-user-stories-e5dc300b9e1c">F100 security & networking co.</a>
</div>
</div>
<div purpose="dropdown-button" class="btn-group">
<a class="dropdown-toggle d-flex align-items-center py-2 px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documentation</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/docs">Docs</a>
<a class="dropdown-item mb-1" href="https://github.com/fleetdm/fleet/releases">Releases</a>
<a class="dropdown-item mb-1" href="/queries">Query library</a>
<div class="dropdown-divider"></div>
<span class="muted dropdown-header">GUIDES</span>
<a class="dropdown-item mb-1" href="https://blog.fleetdm.com/deploying-fleet-on-aws-with-terraform-a58a908e8d40">Deploy on AWS with Terraform</a>
<a class="dropdown-item" href="https://blog.fleetdm.com/deploying-fleet-on-render-2d743aed213f">Deploy on Render</a>
</div>
</div>
<div purpose="dropdown-button" class="btn-group">
<a class="dropdown-toggle d-flex align-items-center py-2 px-3" data-toggle="dropdown">Community</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/docs/contributing">Contribute</a>
<a class="dropdown-item mb-1" href="/blog">Blog</a>
<a class="dropdown-item" href="/logos">Logos & artwork</a>
</div>
</div>
<a href="/pricing" class="d-flex align-items-center py-2 px-3" style="text-decoration: none; line-height: 23px;">Pricing</a>
<span class="d-flex align-items-center px-3">
<iframe src="//ghbtns.com/github-btn.html?user=fleetdm&amp;repo=fleet&amp;type=watch&amp;count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</span>
<a style="padding: 4px 16px; line-height: 24px;" class="btn btn-sm btn-primary align-items-center d-flex" href="/get-started">Try it out</a>
<a style="padding: 4px 16px; line-height: 24px; color: #FFFFFF" class="btn btn-sm btn-primary align-items-center d-flex" href="/get-started">Try it out</a>
</div>
</div>
</div>
@ -355,6 +398,18 @@
$(function() {
$('[data-hide-until-rendered]').removeClass('invisible'); // Note: invisible is a bootstrap 4 class
});
<%/* Adding hover events to header dropdown menus*/%>
$(function(){
$('[purpose=dropdown-button]').hover(
function() {
$(this).children('.dropdown-menu').addClass('show');
$(this).children('.dropdown-toggle').attr('aria-expanded', true);
},
function() {
$(this).children('.dropdown-menu').removeClass('show');
$(this).children('.dropdown-toggle').attr('aria-expanded', false);
});
});
</script>
</body>