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/07/14 18:38:07 UTC
[GitHub] [camel-website] AemieJ opened a new pull request #428: CAMEL-15185: Footer design
AemieJ opened a new pull request #428:
URL: https://github.com/apache/camel-website/pull/428
This PR deals with the new design for the footer of the website layout. It covers the following :
* Use a light soothing background with `#f5f5f5` shade.
* Include the required and sufficient navigation links to ease the navigation for the users to different pages.
* Create a systematic layout for presentation
* Privacy policy link to be included after the PR is merged related to it.
* Basic Social Icons added to the bottom of the footer.
An additional feature for mobile footer menu :
* An option to toggle so the footer is easy to scroll through and takes in less amount of vertical space.
> This footer is created in account with the best practices for a footer.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ removed a comment on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ removed a comment on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660474374
@zregvart I have made use of checkbox for the toggling effect instead of using javascript for the same now. Also as the toggling works with CSS itself, can we adapt this for the dropdown menu item toggling within the navbar as well and the navbar burger as this will minimize the use of javascript as a whole?
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-661624880
@zregvart this is achievable I was just unsure whether we require it or not. I will make the required changes based on @aashnajena version soon and update the PR.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r456762637
##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
Review comment:
While the `:target` selector works with toggling, it causes unnecessary scrolling in pages. I will try with the use of a `:checked` selector as well but if it works toggling with the checked selector in this scenario, I think in that way we could minimize the use of javascript for navbar burger toggling and the dropdown menu toggling for the mobile version.
----------------------------------------------------------------
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
[GitHub] [camel-website] aashnajena commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
aashnajena commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660640371
I think we can reduce the vertical space between headings on smaller screens. This way all the headings can fit into the display at once.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r455232658
##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
Review comment:
* Well that's a creative checkbox hack and I am aware of it but I prevented using it 'cause it is a CSS hack.
* Another point I would like to raise is even if I were to use a CSS hack with a checkbox for toggling for the footer scenario then we shouldn't use javascript for the navbar burger and dropdown arrow toggling as well, I believe.
* I prefer javascript for toggling personally, it's not a hack and is certain to work in any case.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ edited a comment on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ edited a comment on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-663374570
@zregvart does this PR require any further changes or it's fine with the current changes?
----------------------------------------------------------------
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
[GitHub] [camel-website] zregvart merged pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
zregvart merged pull request #428:
URL: https://github.com/apache/camel-website/pull/428
----------------------------------------------------------------
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
[GitHub] [camel-website] zregvart commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
zregvart commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-661419548
@AemieJ I think @aashnajena is talking about the vertical padding between two items on the version of the footer for smaller screens. I think that padding can be a bit smaller, the one on @aashnajena version looks okay to me. @aashnajena perhaps you can add a [suggestion](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/reviewing-proposed-changes-in-a-pull-request#starting-a-review) with the change you made on your end.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ edited a comment on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ edited a comment on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660680724
@aashnajena I am not completely sure 'cause reducing vertical space here creates a clustering effect for me than the current changes. I would like opinions on it from @zregvart and @Delawen as well before I think about bringing in this change.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ edited a comment on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ edited a comment on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660474374
@zregvart I have made use of checkbox for the toggling effect instead of using javascript for the same now. Also as the toggling works with CSS itself, can we adapt this for the dropdown menu item toggling within the navbar as well and the navbar burger as this will minimize the use of javascript as a whole?
----------------------------------------------------------------
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
[GitHub] [camel-website] zregvart commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r461120721
##########
File path: antora-ui-camel/src/partials/footer-content.hbs
##########
@@ -3,41 +3,86 @@
</div>
<footer>
<div class="footer">
- <figure class="logo">
- <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo" aria-label="white silhouette of a camel in front of a sand dune">
- </figure>
<dl>
+ <figure class="logo">
+ <img src="{{siteRootPath}}/_/img/logo-d.svg" class="logo-small mt-60" alt="Apache Camel Logo"
+ aria-label="white silhouette of a camel in front of a sand dune">
+ </figure>
<dt>Overview</dt>
- <dd><a href="{{siteRootPath}}/blog/">Blog</a></dd>
- <dd><a href="{{siteRootPath}}/components/latest/">Components</a></dd>
- <dd><a href="{{siteRootPath}}/download/">Download</a></dd>
- <dd><a href="{{siteRootPath}}/manual/latest/getting-started.html">Getting started</a></dd>
- <dd><a href="{{siteRootPath}}/manual/latest/faq/index.html">FAQ</a></dd>
+ <input type="checkbox" id="show-overview"/>
+ <label for="show-overview"><img class="show-menu" src="{{siteRootPath}}/_/img/show-footer-menu.svg"></label>
+ <label for="show-overview"><img class="hide-menu" src="{{siteRootPath}}/_/img/hide-footer-menu.svg"></label>
+ <div class="footer-menu">
+ <dd><a href="{{siteRootPath}}/blog/">Blog</a></dd>
+ <dd><a href="{{siteRootPath}}/docs/">Documentation</a></dd>
+ <dd><a href="{{siteRootPath}}/community/support">COmmunity</a></dd>
Review comment:
@AemieJ this needs to be:
```suggestion
<dd><a href="{{siteRootPath}}/community/support/">Community</a></dd>
```
Note the `/` at the end of `support/`, without it the URL would point to a file, with it it points to `index.html` in the `support` directory.
----------------------------------------------------------------
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
[GitHub] [camel-website] zregvart commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r454947695
##########
File path: antora-ui-camel/src/css/footer.css
##########
@@ -90,3 +125,92 @@ footer .footer dl dd {
border-radius: 0.4rem 0.4rem 0 0;
height: 2rem;
}
+
+footer .footer .break-row-footer {
+ display: block;
+ flex-basis: 100%;
+ height: 0;
+}
+
+footer .footer .footer-icons {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ line-height: 1.6;
+ padding: 0.5rem;
+ font-weight: bold;
+}
+
+footer .footer .footer-icons .brand-icon {
+ height: 2em;
+ width: 1.75em;
+ margin: 0.35rem;
+ fill: var(--navbar-font-color);
+}
+
+footer .footer .show-menu,
+footer .footer .hide-menu {
+ display: none;
+}
+
+@media screen and (max-width: 626px) {
Review comment:
I'd put this breakpoint at 1023px, we do that for the majority of responsive design and if we wish to prevent wrapping About to the second row, it wraps on 667px as well:
##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
Review comment:
Perhaps we can do a version without JavaScript? Using `<label>` for `<input type=checkbox>` and based on [`:checked` selector](https://css-tricks.com/almanac/selectors/c/checked/).
----------------------------------------------------------------
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
[GitHub] [camel-website] zregvart commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
zregvart commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r455963444
##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
Review comment:
I think it's debatable if the using `:checked` selector and checkboxes should or should not be used. I think it's fairly common practice that got labeled a hack in the beginning and can't shake this image. For me it's about the simplicity of the solution rather than the technique, and I think in this case we do not need to use JavaScript.
Perhaps more appropriate no-JavaScript solution could be using the [`:target` CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) selector.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660474374
@zregvart I have made use of checkbox for the toggling effect instead of using javascript for the same now! Also as the toggling works with CSS itself, can we adapt this for the dropdown menu item toggling within the navbar as well and the navbar burger as this will minimize the use of javascript as a whole?
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-660680724
@aashnajena I am not completely sure 'cause reducing vertical space here creates a clustering effect for me than the current changes. I would like opinions on it from @zregvart as well before I think about bringing in this change.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on a change in pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on a change in pull request #428:
URL: https://github.com/apache/camel-website/pull/428#discussion_r455232658
##########
File path: antora-ui-camel/src/js/06-mobile-footer.js
##########
@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function () {
Review comment:
* Well that's a creative checkbox hack and I am aware of it but I prevented using it 'cause it is a CSS hack.
* Another point I would like to raise is even if I were to use a CSS hack with a checkbox for toggling for the footer scenario then we shouldn't use javascript for the navbar burger and dropdown arrow toggling as well, I believe.
----------------------------------------------------------------
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
[GitHub] [camel-website] AemieJ commented on pull request #428: CAMEL-15185: Footer design
Posted by GitBox <gi...@apache.org>.
AemieJ commented on pull request #428:
URL: https://github.com/apache/camel-website/pull/428#issuecomment-663374570
@zregvart does this PR require any further changes or it's fine now?
----------------------------------------------------------------
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