mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 00:49:03 +00:00
Website: update header navigation menu (#30480)
Closes: https://github.com/fleetdm/confidential/issues/11172 Closes: https://github.com/fleetdm/confidential/issues/11258 Changes: - Reordered the website's header navigation menu, and changed the community dropdown to "more" - Updated the currentSection value of pages that are linked to in the "more" dropdown. - Updated the hover and active styles of header links - Updated the "Share your story" link.
This commit is contained in:
Eric
GitHub
parent
d78a76010e
commit
3e5c3ad11a
4 changed files with 49 additions and 41 deletions
|
|
@ -315,15 +315,16 @@ a.text-danger:hover, a.text-danger:focus {
|
|||
}
|
||||
.dropdown-item {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
line-height: 21px;
|
||||
padding: 8px 16px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.dropdown-item:hover {
|
||||
background-color: unset;
|
||||
color: #6a67fe;
|
||||
border-radius: 4px;
|
||||
background: #F9FAFC;
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
.dropdown-item:before {
|
||||
content: none;
|
||||
|
|
|
|||
38
website/assets/styles/layout.less
vendored
38
website/assets/styles/layout.less
vendored
|
|
@ -447,22 +447,21 @@ html, body {
|
|||
|
||||
[purpose='glass-header-btn'] {
|
||||
color: #FFFFFF;
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 16px;
|
||||
box-shadow: 1px 1px 2px rgba(25, 33, 71, 0.24);
|
||||
border-radius: 4px;
|
||||
padding: 16px 12px;
|
||||
border-radius: 8px;
|
||||
background-color: @core-vibrant-red;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[purpose='header-nav-btn'][aria-expanded='true'] {
|
||||
font-weight: 700;
|
||||
// font-weight: 700;
|
||||
outline: none;
|
||||
color: @core-fleet-black-75;
|
||||
color: @core-fleet-black;
|
||||
}
|
||||
[purpose='header-nav-btn']:before {
|
||||
display: block;
|
||||
|
|
@ -479,8 +478,7 @@ html, body {
|
|||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: @core-fleet-black-75;
|
||||
font-weight: 700;
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -489,18 +487,22 @@ html, body {
|
|||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 6px 16px;
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
margin-right: 24px;
|
||||
}
|
||||
[purpose='header-nav-btn']:hover {
|
||||
font-weight: 700;
|
||||
// font-weight: 700;
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
outline-color: none;
|
||||
}
|
||||
.current-section {
|
||||
font-weight: 700;
|
||||
// font-weight: 700;
|
||||
color: @core-fleet-black;
|
||||
svg {
|
||||
path {
|
||||
fill: #6a67fe;
|
||||
|
|
@ -508,13 +510,14 @@ html, body {
|
|||
}
|
||||
}
|
||||
[purpose='gh-button'] {
|
||||
padding: 0px 20px;
|
||||
min-width: 140px;
|
||||
width: 140px;
|
||||
min-width: 98.5px;
|
||||
width: 98.5px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
[purpose='header-dropdown'] {
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.10);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
a {
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
|
@ -528,6 +531,9 @@ html, body {
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 16px;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
7
website/config/routes.js
vendored
7
website/config/routes.js
vendored
|
|
@ -27,6 +27,7 @@ module.exports.routes = {
|
|||
pageTitleForMeta: 'Contact us',
|
||||
pageDescriptionForMeta: 'Get in touch with our team.',
|
||||
hideFooterLinks: true,
|
||||
currentSection: 'community',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -410,7 +411,7 @@ module.exports.routes = {
|
|||
locals: {
|
||||
pageTitleForMeta: 'Support',
|
||||
pageDescriptionForMeta: 'Ask a question, chat with engineers, or get in touch with the Fleet team.',
|
||||
currentSection: 'documentation',
|
||||
currentSection: 'community',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -457,7 +458,8 @@ module.exports.routes = {
|
|||
action: 'view-testimonials',
|
||||
locals: {
|
||||
pageTitleForMeta: 'What people are saying',
|
||||
pageDescriptionForMeta: 'See what people are saying about Fleet.'
|
||||
pageDescriptionForMeta: 'See what people are saying about Fleet.',
|
||||
currentSection: 'community',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -478,6 +480,7 @@ module.exports.routes = {
|
|||
locals: {
|
||||
pageTitleForMeta: 'Meetups',
|
||||
pageDescriptionForMeta: 'See upcoming meetup locations.',
|
||||
currentSection: 'community',
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
38
website/views/layouts/layout.ejs
vendored
38
website/views/layouts/layout.ejs
vendored
|
|
@ -169,20 +169,19 @@
|
|||
<hr>
|
||||
<a purpose="mobile-dropdown-link" class="d-flex align-items-center" href="/docs">Docs</a>
|
||||
<hr>
|
||||
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Stories</a>
|
||||
<a purpose="mobile-dropdown-link" href="/pricing" class="d-flex align-items-center">Pricing</a>
|
||||
<hr>
|
||||
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">More</a>
|
||||
<div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="announcements" href="/announcements">News</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="testimonials" href="/testimonials">Case studies</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="support" href="/support">Ask around</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="meetups" href="/meetups">Meetups</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
|
||||
<span class="mt-2 mb-2">COMPANY</span>
|
||||
<div purpose="indented-mobile-links">
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="handbook" href="/handbook">The handbook</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="testimonials" href="/testimonials">Testimonials</a>
|
||||
</div>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/blob/main/handbook/company/testimonials.yml">Share your story</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="handbook" href="/handbook">The handbook</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="handbook" href="/new-license">Get your license</a>
|
||||
<a purpose="mobile-dropdown-link" data-dropdown-option="handbook" href="/contact">Schedule a demo</a>
|
||||
</div>
|
||||
<hr>
|
||||
<a purpose="mobile-dropdown-link" href="/pricing" class="d-flex align-items-center">Pricing</a>
|
||||
<% if(_.has(me, 'id')) {%>
|
||||
<hr>
|
||||
<a purpose="mobile-dropdown-link" href="/logout" class="d-flex mt-2 text-decoration-none">Log out</a>
|
||||
|
|
@ -204,7 +203,7 @@
|
|||
<%/* Desktop Navigation bar */%>
|
||||
<div purpose="header-nav" class="d-none d-lg-flex align-items-center justify-content-around">
|
||||
<div purpose="dropdown-button" class="btn-group">
|
||||
<a purpose="header-nav-btn" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" href="/device-management" >Multi platform</a>
|
||||
<a purpose="header-nav-btn" button-text="Multi platform" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" href="/device-management">Multi platform</a>
|
||||
<div purpose="header-dropdown" class="dropdown-menu">
|
||||
<a class="dropdown-item" data-dropdown-option="device-management" href="/device-management">Device management <small>+ MDM</small></a>
|
||||
<a class="dropdown-item" data-dropdown-option="orchestration" href="/orchestration">Orchestration <small>+ monitoring</small></a>
|
||||
|
|
@ -212,23 +211,22 @@
|
|||
<a class="dropdown-item" data-dropdown-option="integrations" href="/integrations">Integrations</a>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="dropdown-button" class="btn-group" style="width: 74px;">
|
||||
<a purpose="header-nav-btn" button-text="Documentation" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'documentation' ? 'current-section' : '' %>" href="/docs">Docs</a>
|
||||
</div>
|
||||
<div purpose="dropdown-button" class="btn-group" style="width: 89px;">
|
||||
<a purpose="header-nav-btn" button-text="Community" href="/testimonials" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" >Stories</a>
|
||||
<a purpose="header-nav-btn" button-text="Docs" class="<%= typeof currentSection !== 'undefined' && currentSection === 'documentation' ? 'current-section' : '' %>" style="width: 55px;" href="/docs">Docs</a>
|
||||
<a purpose="header-nav-btn" button-text="Pricing" href="/pricing" class=" align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'pricing' ? 'current-section' : '' %>" style="width: 72px; text-decoration: none; line-height: 23px;">Pricing</a>
|
||||
<div purpose="dropdown-button" class="btn-group" >
|
||||
<a purpose="header-nav-btn" button-text="More" href="/testimonials" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" >More</a>
|
||||
<div purpose="header-dropdown" class="dropdown-menu">
|
||||
<a class="dropdown-item" data-dropdown-option="announcements" href="/announcements">News</a>
|
||||
<a class="dropdown-item" data-dropdown-option="testimonials" href="/testimonials">Case studies</a>
|
||||
<a class="dropdown-item" data-dropdown-option="support" href="/support">Ask around</a>
|
||||
<a class="dropdown-item" data-dropdown-option="meetups" href="/meetups">Meetups</a>
|
||||
<a class="dropdown-item" data-dropdown-option="contact" href="/contact">Schedule a demo</a><!-- «« included here in the desktop hover nav because unlike the mobile nav (which has 'Take a tour' as a primary CTA), there is no option to do that on desktop from other pages otherwise -->
|
||||
<a class="dropdown-item" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/edit/main/handbook/company/testimonials.yml">Share your story</a>
|
||||
<span class="muted dropdown-header">COMPANY</span>
|
||||
<a class="dropdown-item" data-dropdown-option="share-your-story" target="_blank" href="https://github.com/fleetdm/fleet/blob/main/handbook/company/testimonials.yml">Share your story</a>
|
||||
<hr>
|
||||
<a class="dropdown-item" data-dropdown-option="handbook" href="/handbook">The handbook</a>
|
||||
<a class="dropdown-item" data-dropdown-option="testimonials" href="/testimonials">Testimonials</a>
|
||||
<a class="dropdown-item" data-dropdown-option="handbook" href="/new-license">Get your license</a>
|
||||
<a class="dropdown-item" data-dropdown-option="contact" href="/contact">Schedule a demo</a><!-- «« included here in the desktop hover nav because unlike the mobile nav (which has 'Take a tour' as a primary CTA), there is no option to do that on desktop from other pages otherwise -->
|
||||
</div>
|
||||
</div>
|
||||
<a purpose="header-nav-btn" button-text="Pricing" href="/pricing" class=" align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'pricing' ? 'current-section' : '' %>" style="text-decoration: none; line-height: 23px;">Pricing</a>
|
||||
<span purpose="gh-button" class="d-flex align-items-center">
|
||||
<iframe src="//ghbtns.com/github-btn.html?user=fleetdm&repo=fleet&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
|
||||
|
|
|
|||
Loading…
Reference in a new issue