You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by GitBox <gi...@apache.org> on 2020/03/21 09:41:37 UTC
[GitHub] [camel-website] aashnajena opened a new pull request #254: Improve
Mobile Menu
aashnajena opened a new pull request #254: Improve Mobile Menu
URL: https://github.com/apache/camel-website/pull/254
- Added drop-downs for menu items having sub-menus
- Made menu full length and adjusted width
- Fixed padding issues
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
[GitHub] [camel-website] aashnajena commented on a change in pull request
#254: [CAMEL-14695] Improve Mobile Main-Menu
Posted by GitBox <gi...@apache.org>.
aashnajena commented on a change in pull request #254: [CAMEL-14695] Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254#discussion_r397222277
##########
File path: antora-ui-camel/src/js/04-mobile-navbar.js
##########
@@ -9,4 +9,21 @@ document.addEventListener('DOMContentLoaded', function () {
document.documentElement.classList.toggle('is-clipped--navbar')
})
})
+
+ var menuDropDowns = Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+ var maxMobileWidth = 1023
+ menuDropDowns.forEach(function (el) {
+ el.addEventListener('click', function (e) {
+ var dropDownMenu = el.querySelectorAll('.navbar-dropdown')[0]
+ if (window.innerWidth <= maxMobileWidth) {
+ if (dropDownMenu.style.display === 'block') {
+ dropDownMenu.style.display = 'none'
+ } else {
+ dropDownMenu.style.display = 'block'
+ }
+ } else {
+ dropDownMenu.style.display = 'none'
+ }
+ })
+ })
Review comment:
Thanks! This is definitely a better way of doing it. I hope the changes are fine now. I have toggled the class and added the necessary css to change the display and invert the arrow.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
[GitHub] [camel-website] zregvart commented on a change in pull request
#254: [CAMEL-14695] Improve Mobile Main-Menu
Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #254: [CAMEL-14695] Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254#discussion_r397076870
##########
File path: antora-ui-camel/src/js/04-mobile-navbar.js
##########
@@ -9,4 +9,21 @@ document.addEventListener('DOMContentLoaded', function () {
document.documentElement.classList.toggle('is-clipped--navbar')
})
})
+
+ var menuDropDowns = Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+ var maxMobileWidth = 1023
+ menuDropDowns.forEach(function (el) {
+ el.addEventListener('click', function (e) {
+ var dropDownMenu = el.querySelectorAll('.navbar-dropdown')[0]
+ if (window.innerWidth <= maxMobileWidth) {
+ if (dropDownMenu.style.display === 'block') {
+ dropDownMenu.style.display = 'none'
+ } else {
+ dropDownMenu.style.display = 'block'
+ }
+ } else {
+ dropDownMenu.style.display = 'none'
+ }
+ })
+ })
Review comment:
This I'm not to keen on. I'd prefer if we just toggeled the class, the Anotra UI already does. Then we would not have to put the width here but we can have the CSS rules depending on the resolution determine the style. i.e. display can be toggled by CSS rules only.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
[GitHub] [camel-website] aashnajena commented on a change in pull request
#254: [CAMEL-14695] Improve Mobile Main-Menu
Posted by GitBox <gi...@apache.org>.
aashnajena commented on a change in pull request #254: [CAMEL-14695] Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254#discussion_r397222277
##########
File path: antora-ui-camel/src/js/04-mobile-navbar.js
##########
@@ -9,4 +9,21 @@ document.addEventListener('DOMContentLoaded', function () {
document.documentElement.classList.toggle('is-clipped--navbar')
})
})
+
+ var menuDropDowns = Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
+ var maxMobileWidth = 1023
+ menuDropDowns.forEach(function (el) {
+ el.addEventListener('click', function (e) {
+ var dropDownMenu = el.querySelectorAll('.navbar-dropdown')[0]
+ if (window.innerWidth <= maxMobileWidth) {
+ if (dropDownMenu.style.display === 'block') {
+ dropDownMenu.style.display = 'none'
+ } else {
+ dropDownMenu.style.display = 'block'
+ }
+ } else {
+ dropDownMenu.style.display = 'none'
+ }
+ })
+ })
Review comment:
I agree, I hope the changes are fine now. I have toggled the class and added the necessary css to change the display and invert the arrow.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
[GitHub] [camel-website] zregvart merged pull request #254: CAMEL-14695:
Improve Mobile Main-Menu
Posted by GitBox <gi...@apache.org>.
zregvart merged pull request #254: CAMEL-14695: Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
[GitHub] [camel-website] zregvart commented on issue #254: [CAMEL-14695]
Improve Mobile Main-Menu
Posted by GitBox <gi...@apache.org>.
zregvart commented on issue #254: [CAMEL-14695] Improve Mobile Main-Menu
URL: https://github.com/apache/camel-website/pull/254#issuecomment-604486478
Preview is [here](https://builds.apache.org/job/Camel.website/job/PR-254/Preview/index.html).
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services