You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by zr...@apache.org on 2020/03/26 15:12:55 UTC
[camel-website] branch master updated: CAMEL-14695: Improve Mobile
Main-Menu
This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new 29a65b2 CAMEL-14695: Improve Mobile Main-Menu
29a65b2 is described below
commit 29a65b2b0faa934c46a86168f155fdaca4e38e8f
Author: Aashna Jena <32...@users.noreply.github.com>
AuthorDate: Thu Mar 26 20:42:47 2020 +0530
CAMEL-14695: Improve Mobile Main-Menu
* made menu full-length, added drop downs for sub-menus
* made changes for device width
* use toggle and is-active
---
antora-ui-camel/src/css/header.css | 114 ++++++++++++++++++++++++-----
antora-ui-camel/src/js/04-mobile-navbar.js | 7 ++
2 files changed, 103 insertions(+), 18 deletions(-)
diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index b9d3659..c84e004 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -152,10 +152,40 @@ body {
}
@media screen and (max-width: 1023px) and (min-width: 480px) {
- .navbar-brand .navbar-item {
- display: flex;
- align-items: flex-start;
- flex-flow: column;
+ .navbar-menu.is-active {
+ display: block;
+ position: absolute;
+ height: 100vh;
+ box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
+ overflow-y: auto;
+ top: 4rem;
+ left: 0;
+ right: 0;
+ margin-left: 50%;
+ padding: 1rem 2rem;
+ }
+
+ .navbar-dropdown {
+ background-color: var(--navbar-menu-background);
+ top: 100%;
+ left: 0;
+ min-width: 100%;
+ }
+
+ .has-dropdown:not(.is-active) > .navbar-dropdown {
+ display: none;
+ }
+
+ .has-dropdown:not(.is-active) > .navbar-link::after {
+ transform: rotate(-45deg);
+ }
+
+ .has-dropdown.is-active > .navbar-dropdown {
+ display: block;
+ }
+
+ .has-dropdown.is-active > .navbar-link::after {
+ transform: rotate(135deg);
}
.navbar-item.navbar-topics,
@@ -167,7 +197,9 @@ body {
font-weight: bold;
}
- .navbar-dropdown .navbar-item:hover {
+ .navbar-dropdown .navbar-item:hover,
+ a.navbar-item.navbar-topics:hover,
+ a.navbar-link.navbar-topics:hover {
text-decoration: underline;
text-decoration-color: var(--navbar-hover-font-color);
}
@@ -177,33 +209,61 @@ body {
padding: 0.5rem 0;
}
- .navbar-menu.is-active {
- display: block;
- position: absolute;
- height: calc(90vh - 6rem);
- box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
- overflow-y: auto;
- top: 4rem;
- left: auto;
- right: 0;
- }
-
.navbar-menu a.navbar-item:hover,
.navbar-menu .navbar-link:hover {
background-color: var(--navbar-menu-hover-background);
}
+
+ .navbar-link::after {
+ border-width: 0 0 2px 2px;
+ border-style: solid;
+ content: " ";
+ display: block;
+ height: 0.5em;
+ position: absolute;
+ pointer-events: none;
+ transform: rotate(-45deg);
+ width: 0.5em;
+ right: 0;
+ top: 40%;
+ }
}
@media screen and (max-width: 479px) {
.navbar-menu.is-active {
display: block;
position: absolute;
- height: calc(100vh - 4rem);
+ height: 100vh;
box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
overflow-y: auto;
top: 4rem;
left: 0;
right: 0;
+ padding: 1rem 2rem;
+ }
+
+ .navbar-dropdown {
+ background-color: var(--navbar-menu-background);
+ display: none;
+ top: 100%;
+ left: 0;
+ min-width: 100%;
+ }
+
+ .has-dropdown:not(.is-active) > .navbar-dropdown {
+ display: none;
+ }
+
+ .has-dropdown:not(.is-active) > .navbar-link::after {
+ transform: rotate(-45deg);
+ }
+
+ .has-dropdown.is-active > .navbar-dropdown {
+ display: block;
+ }
+
+ .has-dropdown.is-active > .navbar-link::after {
+ transform: rotate(135deg);
}
.navbar-item.navbar-topics,
@@ -215,7 +275,9 @@ body {
font-weight: bold;
}
- .navbar-dropdown .navbar-item:hover {
+ .navbar-dropdown .navbar-item:hover,
+ a.navbar-item.navbar-topics:hover,
+ a.navbar-link.navbar-topics:hover {
text-decoration: underline;
text-decoration-color: var(--navbar-hover-font-color);
}
@@ -224,6 +286,22 @@ body {
background: var(--navbar-menu-background);
padding: 0.5rem 0;
}
+
+ .navbar-link::after {
+ border-width: 0 0 2px 2px;
+ border-style: solid;
+ content: " ";
+ display: block;
+ height: 0.5em;
+ pointer-events: none;
+ position: absolute;
+ transform: rotate(-45deg);
+ width: 0.5em;
+ margin-top: 0.6em;
+ margin-right: 1rem;
+ right: 0;
+ top: 40%;
+ }
}
@media screen and (min-width: 1024px) {
diff --git a/antora-ui-camel/src/js/04-mobile-navbar.js b/antora-ui-camel/src/js/04-mobile-navbar.js
index ba5cb09..e79236b 100644
--- a/antora-ui-camel/src/js/04-mobile-navbar.js
+++ b/antora-ui-camel/src/js/04-mobile-navbar.js
@@ -9,4 +9,11 @@ document.addEventListener('DOMContentLoaded', function () {
document.documentElement.classList.toggle('is-clipped--navbar')
})
})
+
+ var menuDropDowns = Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+ menuDropDowns.forEach(function (el) {
+ el.addEventListener('click', function (e) {
+ el.classList.toggle('is-active')
+ })
+ })
})