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
The following commit(s) were added to refs/heads/ms12_conversion_of_md_files by
this push:
new 50317a2516 made navigation responsive
50317a2516 is described below
commit 50317a251651c93584af6bd5e50951e3192ffcc5
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;
+ }
+}
+
+
+
+
+
