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

Website: Prevent scrolling when mobile nav menu is open (#23992)

Browse source 
Closes: #23705

Changes:
- Updated the styles and layout of the website to prevent scrolling when
the mobile navigation menu is open.
- Updated padding on the mobile navigation menu to keep the Fleet logo
in the same place when the menu is opened.
This commit is contained in:
Eric 2024-11-21 15:09:04 -06:00 committed by GitHub
parent 43f21c0d95
commit ecc2bfb1f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,27 @@ html, body {
padding-bottom: @footer-height;
background: linear-gradient(180deg, #E8F1F6 0%, #FFFFFF 200px);
background-position: center 40px;
opacity: 1;
// Note: This element has the "show" class toggled by the mobile header nav menu button.
// We are overriding bootstrap classes here to allow us to prevent the page being scrolled while the mobile menu is open.
&.collapse {
display: block;
[purpose='mobile-nav'] {
display: none;
}
}
&.collapsing {
opacity: 0;
transition: 0s;
}
&.collapse.show {
max-height: 100vh;
overflow: hidden;
[purpose='mobile-nav'] {
display: block;
opacity: 1;
}
}
}
[purpose='header-background'] {
@ -40,7 +61,7 @@ html, body {
}
[purpose='continue-banner'] {
z-index: 199;
z-index: 198;
position: fixed;
bottom: 24px;
left: 24px;
@ -279,14 +300,14 @@ html, body {
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 200;
background-color: #ffffff;
hr {
margin-top: 4px;
margin-bottom: 8px;
}
[purpose='mobile-nav-header'] {
padding: 19px 40px;
padding: 19px 32px;
height: 80px;
}
[purpose='mobile-nav-container'] {
@ -783,6 +804,7 @@ body.detected-mobile {
@media (max-width: 375px) {
[purpose='page-header'] {
padding: 19px 16px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 16px;

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

@ -130,7 +130,7 @@
<!--STYLES END-->
</head>
<body>
<div purpose="page-wrap" class="<%= hideFooterLinks ? 'reduced-footer-links' : '' %>">
<div purpose="page-wrap" class="<%= hideFooterLinks ? 'reduced-footer-links' : '' %> collapse" id="navbarToggleExternalContent">
<%// Page header%>
<div class="header" purpose="header-container" hide-when-scrolled data-nosnippet>
<div purpose="header-background">
@ -146,7 +146,7 @@
<img class="align-self-center" alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-blue-16x14@2x.png"/>
</a>
</div>
<div purpose="mobile-nav" always-visible-when-shown class="collapse" id="navbarToggleExternalContent">
<div purpose="mobile-nav" always-visible-when-shown>
<div purpose="mobile-nav-header" class="d-flex justify-content-between align-items-center">
<a purpose="mobile-header-logo" href="/">
<img purpose="mobile-nav-logo" alt="Fleet logo" src="/images/logo-blue-118x41@2x.png" />
@ -505,7 +505,6 @@
<script src="/js/pages/try-fleet/sandbox-teleporter.page.js"></script>
<script src="/js/pages/try-fleet/waitlist.page.js"></script>
<script src="/js/pages/vanta-authorization.page.js"></script>
<script src="/js/pages/vulnerability-management.page.js"></script>
<!--SCRIPTS END-->
<% /* Display an overlay if the current browser is not supported.