This is an automated email from the ASF dual-hosted git repository. grobmeier pushed a commit to branch ms12_conversion_of_md_files in repository https://gitbox.apache.org/repos/asf/logging-log4j2.git
commit a12e3ecb8675ce3e1b8894776ef3fc1738eea7df Author: Christian Grobmeier <[email protected]> AuthorDate: Mon Mar 4 19:53:48 2024 +0100 made navigation responsive --- src/asciidoc/templates/document.html.erb | 109 ++++++++++++++++++++---------- src/site/resources/css/logging-custom.css | 80 ++++++++++++++++++++-- 2 files changed, 146 insertions(+), 43 deletions(-) diff --git a/src/asciidoc/templates/document.html.erb b/src/asciidoc/templates/document.html.erb index 655af69503..22739762a1 100644 --- a/src/asciidoc/templates/document.html.erb +++ b/src/asciidoc/templates/document.html.erb @@ -50,42 +50,51 @@ <img src="/images/log4j-logo.png" /> </div> - <nav class="main-menu"> - <ul> - <li><a href="#">About</a></li> - <li><a href="#">Downloads</a></li> - <li> - <a href="#">Learn <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> - <ul class="menu-drop-down"> - <li><a href="#">Getting Started</a></li> - <li><a href="#">Manual</a></li> - <li><a href="#">Guides</a></li> - </ul> - </li> - <li><a href="#">Release Notes</a></li> - <li><a href="#">Support</a></li> - <li><a href="#">Security</a></li> - <li><a href="#">Contribute</a></li> - </ul> - </nav> - - <nav class="secondary-menu"> - <ul> - <li> - <a href="#">Apache <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> - <ul class="menu-drop-down"> - <li><a target="_blank" href="https://www.apache.org/";>Home</a></li> - <li><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li> - <li><a target="_blank" href="https://www.apache.org/licenses/";>License</a></li> - <li><a target="_blank" href="https://www.apache.org/foundation/thanks.html";>Thanks</a></li> - <li><a target="_blank" href="https://www.apache.org/events/current-event.html";>Current Events</a></li> - <li><a target="_blank" href="https://www.apache.org/security/";>Security</a></li> - <li><a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html";>Privacy</a></li> - </ul> - </li> - <li><a href="https://logging.apache.org";>Logging</a></li> - </ul> - </nav> + <div class="menu-mobile"> + <i class="fa fa-bars" aria-hidden="true"></i> + </div> + + <div class="navs"> + <div class="menu-mobile-close"> + <i class="fa fa-window-close" aria-hidden="true"></i> + </div> + <nav class="main-menu"> + <ul> + <li><a href="#">About</a></li> + <li><a href="#">Downloads</a></li> + <li> + <a href="#">Learn <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> + <ul class="menu-drop-down"> + <li><a href="#">Getting Started</a></li> + <li><a href="#">Manual</a></li> + <li><a href="#">Guides</a></li> + </ul> + </li> + <li><a href="#">Release Notes</a></li> + <li><a href="#">Support</a></li> + <li><a href="#">Security</a></li> + <li><a href="#">Contribute</a></li> + </ul> + </nav> + + <nav class="secondary-menu"> + <ul> + <li> + <a href="#">Apache <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> + <ul class="menu-drop-down"> + <li><a target="_blank" href="https://www.apache.org/";>Home</a></li> + <li><a target="_blank" href="https://www.apache.org/foundation/sponsorship.html";>Sponsorship</a></li> + <li><a target="_blank" href="https://www.apache.org/licenses/";>License</a></li> + <li><a target="_blank" href="https://www.apache.org/foundation/thanks.html";>Thanks</a></li> + <li><a target="_blank" href="https://www.apache.org/events/current-event.html";>Current Events</a></li> + <li><a target="_blank" href="https://www.apache.org/security/";>Security</a></li> + <li><a target="_blank" href="https://privacy.apache.org/policies/privacy-policy-public.html";>Privacy</a></li> + </ul> + </li> + <li><a href="https://logging.apache.org";>Logging</a></li> + </ul> + </nav> + </div> </div> <div class="content-container"> @@ -194,6 +203,34 @@ }); }); </script> +<script> + document.addEventListener('DOMContentLoaded', function () { + var menuIcon = document.querySelector('.menu-mobile'); + var menuIconClose = document.querySelector('.menu-mobile-close'); + var menu = document.querySelector('.navs'); + + var duration = 0.7; + menuIcon.addEventListener('click', function () { + if (menu.classList.contains('menu-open')) { + gsap.to(menu, {duration: duration, ease: "power3.out", right: "-100%", onComplete: function() { + menu.classList.remove('menu-open'); + }}); + } else { + gsap.to(menu, {duration: duration, ease: "power3.out", right: "0%", onStart: function() { + menu.classList.add('menu-open'); + }}); + } + }); + + menuIconClose.addEventListener('click', function () { + if (menu.classList.contains('menu-open')) { + gsap.to(menu, {duration: duration, ease: "power3.out", right: "-100%", onComplete: function() { + menu.classList.remove('menu-open'); + }}); + } + }); + }); +</script> <script> document.addEventListener('DOMContentLoaded', function() { var menuItems = document.querySelectorAll('#header nav > ul > li'); diff --git a/src/site/resources/css/logging-custom.css b/src/site/resources/css/logging-custom.css index 24133079f0..d84e5466ec 100644 --- a/src/site/resources/css/logging-custom.css +++ b/src/site/resources/css/logging-custom.css @@ -4,7 +4,7 @@ max-width: 100%; align-items: center; z-index: 10000; - background-color: #e7e7e7; + background-color: #f9f8f8; border-bottom: 1px solid lightgrey; } @@ -38,21 +38,26 @@ #header .main-menu ul li, #header .secondary-menu ul li { - margin-right: 1.5em; + margin-right: 1.3em; +} + +#header .navs { + display: flex; + width: 100%; } -#header nav ul { +#header .navs nav ul { list-style: none; margin: 0; padding: 0; overflow: hidden; } -#header nav ul li { +#header .navs nav ul li { float: left; } -#header nav ul li a { +#header .navs nav ul li a { display: block; text-align: center; padding: 14px 16px; @@ -76,7 +81,7 @@ text-align: left; } -#header nav ul li:hover .menu-drop-down { +#header .navs nav ul li:hover .menu-drop-down { display: flex; } @@ -136,7 +141,7 @@ } -.content-container .content { +#content { width: 80vw; overflow: auto; height: 100%; @@ -148,6 +153,67 @@ background-color: #fff; } +/** Small screens < 1400px */ +@media (max-width: 1400px) { + #content { + max-width: 56em; + } + + .table-of-content { + width: 25vw; + } + + .content-container .content { + width: 75vw; + } + + .menu-mobile { + display: block; + flex-grow: 1; + cursor: pointer; + text-align: right; + font-size: 2em; + } + + .menu-mobile-close { + display: block; + text-align: right; + cursor: pointer; + padding: 1em; + font-size: 2em; + } + + #header .navs { + position: fixed; + top: 0; + right: -100%; + width: 300px; + height: 100%; + background: white; + z-index: 1000; + display: block; + } + + .main-menu ul, .secondary-menu ul { + flex-direction: column; + } +} + +/* Ensure the menu icon is visible on larger screens */ +@media screen and (min-width: 1400px) { + .menu-mobile { + display: none; + } + + .menu-mobile-close { + display: none; + } +} + + + + +
