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 1fb4005 CAMEL-15140: Improve Main Menu for Mobile Screens,
CAMEL-15238: Alternative & Minimal Navbar Menu
1fb4005 is described below
commit 1fb4005694d4ddc8c9c3af6c87b9f4984874f77e
Author: Aemie Jariwala <44139348+aem...@users.noreply.github.com>
AuthorDate: Wed Aug 12 14:48:17 2020 +0530
CAMEL-15140: Improve Main Menu for Mobile Screens, CAMEL-15238: Alternative
& Minimal Navbar Menu
* feat: improvize on the navbar layout
* feat: remove unrelated links related to dropdown
* CAMEL-15140: improvize the navbar styling for smaller width
update the layout
* feat: modification to images within the mobile screen navbar
* CAMEL-15140: update the community icon to fit with the theme
* feat: improvize on the icons within navbar
* feat: modify config toml to include images
* modify css file
* remove hover on color from navbar
fix another issue
---
antora-ui-camel/src/css/header.css | 91 +++++++++++++++++-----
antora-ui-camel/src/helpers/withMenuData.js | 2 +
antora-ui-camel/src/img/blog.svg | 3 +
antora-ui-camel/src/img/community.svg | 3 +
antora-ui-camel/src/img/documentation.svg | 7 ++
antora-ui-camel/src/img/download.svg | 3 +
.../src/js/{05-mobile-navbar.js => 05-navbar.js} | 9 +--
antora-ui-camel/src/partials/header-content.hbs | 16 +---
config.toml | 10 ++-
layouts/partials/header.html | 5 +-
10 files changed, 108 insertions(+), 41 deletions(-)
diff --git a/antora-ui-camel/src/css/header.css
b/antora-ui-camel/src/css/header.css
index e94728c..59d54fc 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -22,6 +22,11 @@ body {
width: 100%;
word-wrap: break-word;
z-index: var(--z-index-navbar);
+ box-shadow: none;
+}
+
+html:not([data-scroll='0']) .navbar {
+ box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
}
.navbar a {
@@ -38,8 +43,21 @@ body {
text-transform: uppercase;
}
- .navbar-end > a.navbar-item:hover {
- color: var(--color-asf-dark-blue);
+ .navbar-end > .navbar-item::after {
+ transition: all ease-in-out 0.2s;
+ content: '';
+ position: absolute;
+ height: 2px;
+ width: 0;
+ background-color: var(--color-asf-dark-blue);
+ }
+
+ .navbar-end > .navbar-item:hover::after {
+ width: calc(100% - 2rem);
+ }
+
+ .navbar-item img {
+ display: none;
}
}
@@ -93,9 +111,9 @@ body {
}
.navbar-burger.is-active span:nth-child(1) {
- margin-left: -5px;
- transform: rotate(40deg);
+ transform: rotate(45deg);
transform-origin: left top;
+ margin-top: -0.75rem;
}
.navbar-burger.is-active span:nth-child(2) {
@@ -103,8 +121,7 @@ body {
}
.navbar-burger.is-active span:nth-child(3) {
- margin-left: -5px;
- transform: rotate(-40deg);
+ transform: rotate(-45deg);
transform-origin: left bottom;
}
@@ -120,13 +137,6 @@ body {
position: relative;
}
-.navbar-divider {
- background-color: var(--navbar-menu-border-color);
- border: none;
- height: 1px;
- margin: 0.25rem 0;
-}
-
@media screen and (max-width: 1023px) {
.navbar-menu.is-active {
display: block;
@@ -137,14 +147,51 @@ body {
top: 8rem;
left: 0;
right: 0;
- padding: 1rem 2rem;
+ padding: 1rem;
}
.navbar-item {
+ width: calc(50% - 1rem);
+ height: 10rem;
+ background: var(--color-camel-orange);
+ border-radius: 15px;
+ margin: 0.5rem;
font-weight: bold;
flex: none;
- margin: 1rem;
- color: var(--color-camel-orange);
+ }
+
+ .navbar-item img {
+ display: block;
+ margin-left: calc(50% - 2.5rem);
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+ height: 5rem;
+ width: 5rem;
+ }
+
+ .navbar-item.navbar-topics {
+ text-align: center;
+ color: var(--navbar-background);
+ text-transform: uppercase;
+ font-size: 1.25rem;
+ }
+
+ @media screen and (min-width: 480px) and (max-width: 626px) {
+ .navbar-item.navbar-topics {
+ font-size: 1.125rem;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .navbar-item.navbar-topics {
+ font-size: 0.9rem;
+ }
+ }
+
+ @media screen and (max-width: 375px) {
+ .navbar-item.navbar-topics {
+ font-size: 0.85rem;
+ }
}
a.navbar-item.navbar-topics:hover {
@@ -174,7 +221,8 @@ body {
align-items: flex-end;
display: flex;
font-weight: bold;
- padding: 1rem 1.5rem 1rem 0;
+ padding: 1.5rem 1rem 1rem 1rem;
+ text-transform: uppercase;
}
.navbar-end {
@@ -308,8 +356,8 @@ body {
}
.navbar-tools .brand-icon {
- height: 1.2em;
- width: 1.2em;
+ height: 1.5em;
+ width: 1.5em;
margin: 0.35rem;
fill: var(--navbar-font-color);
}
@@ -320,6 +368,11 @@ body {
height: var(--navbar-mobile-height);
}
+ .navbar-end {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
.navbar-brand {
flex-wrap: wrap;
}
diff --git a/antora-ui-camel/src/helpers/withMenuData.js
b/antora-ui-camel/src/helpers/withMenuData.js
index 5d179c4..a0381d6 100644
--- a/antora-ui-camel/src/helpers/withMenuData.js
+++ b/antora-ui-camel/src/helpers/withMenuData.js
@@ -21,6 +21,7 @@ const createMenu = (item) => {
return {
url: item.url || '#',
name: item.name,
+ pre: item.pre,
children: mainMenu.filter((child) => child.parent ===
item.identifier).map(createMenu),
}
}
@@ -42,6 +43,7 @@ const mapItem = (item, siteRootPath) => {
return {
url,
name: item.name,
+ pre: item.pre,
children: item.children.map((child) => mapItem(child, siteRootPath)),
}
}
diff --git a/antora-ui-camel/src/img/blog.svg b/antora-ui-camel/src/img/blog.svg
new file mode 100644
index 0000000..560a66f
--- /dev/null
+++ b/antora-ui-camel/src/img/blog.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" id="Layer_1" x="0px"
y="0px" viewBox="0 0 38 31" enable-background="new 0 0 38 31"
xml:space="preserve">
+<path fill-rule="evenodd" clip-rule="evenodd"
d="M34.098,24.095L34.082,31l-5.635-6.376H16.519c-3.548,0-6.425-2.877-6.425-6.426
v-7.476c0-3.548,2.876-6.425,6.425-6.425h15.035c3.548,0,6.425,2.877,6.425,6.425v7.476C37.979,20.843,36.379,23.109,34.098,24.095z
M8.023,10.703v5.354l-4.794,5.357l-0.009-5.805C1.327,14.784,0,12.9,0,10.703V5.354C0,2.396,2.396,0,5.355,0h12.719
c1.743,0,3.277,0.846,4.254,2.135H16.59C11.858,2.135,8.023,5.97,8.023,10.703z"
fill="#fff"/>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/img/community.svg
b/antora-ui-camel/src/img/community.svg
new file mode 100644
index 0000000..bfa66d7
--- /dev/null
+++ b/antora-ui-camel/src/img/community.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24">
+<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M16 11c1.66 0
2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0
2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7
3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97
1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/img/documentation.svg
b/antora-ui-camel/src/img/documentation.svg
new file mode 100644
index 0000000..c57763e
--- /dev/null
+++ b/antora-ui-camel/src/img/documentation.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" id="Layer_1" x="0px"
y="0px" viewBox="0 0 309.267 309.267" xml:space="preserve">
+<g>
+ <path style="fill:#fff;"
d="M260.944,43.491H125.64c0,0-18.324-28.994-28.994-28.994H48.323c-10.67,0-19.329,8.65-19.329,19.329
v222.286c0,10.67,8.659,19.329,19.329,19.329h212.621c10.67,0,19.329-8.659,19.329-19.329V62.82
C280.273,52.15,271.614,43.491,260.944,43.491z"/>
+ <path style="fill:#e97826;"
d="M28.994,72.484h251.279v77.317H28.994V72.484z"/>
+ <path style="fill:#fff;"
d="M19.329,91.814h270.609c10.67,0,19.329,8.65,19.329,19.329l-19.329,164.298
c0,10.67-8.659,19.329-19.329,19.329H38.658c-10.67,0-19.329-8.659-19.329-19.329L0,111.143C0,100.463,8.659,91.814,19.329,91.814z
"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/img/download.svg
b/antora-ui-camel/src/img/download.svg
new file mode 100644
index 0000000..e5e6082
--- /dev/null
+++ b/antora-ui-camel/src/img/download.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; viewBox="0 0 24 24">
+<path d="M0 0h24v24H0z" fill="none"/><path fill="#fff" d="M19 3h-4.18C14.4
1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1
0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1
1-1zm0 15l-5-5h3V9h4v4h3l-5 5z"/>
+</svg>
diff --git a/antora-ui-camel/src/js/05-mobile-navbar.js
b/antora-ui-camel/src/js/05-navbar.js
similarity index 67%
rename from antora-ui-camel/src/js/05-mobile-navbar.js
rename to antora-ui-camel/src/js/05-navbar.js
index 85c98f0..8fb95f0 100644
--- a/antora-ui-camel/src/js/05-mobile-navbar.js
+++ b/antora-ui-camel/src/js/05-navbar.js
@@ -10,11 +10,8 @@ document.addEventListener('DOMContentLoaded', function () {
})
})
- var menuDropDowns =
Array.prototype.slice.call(document.querySelectorAll('.has-dropdown'), 0)
- menuDropDowns.forEach(function (el) {
- el.addEventListener('click', function (e) {
- e.stopPropagation()
- el.classList.toggle('is-active')
- })
+ document.documentElement.dataset.scroll = 0
+ document.addEventListener('scroll', () => {
+ document.documentElement.dataset.scroll = window.scrollY
})
})
diff --git a/antora-ui-camel/src/partials/header-content.hbs
b/antora-ui-camel/src/partials/header-content.hbs
index 152d672..51b77f8 100644
--- a/antora-ui-camel/src/partials/header-content.hbs
+++ b/antora-ui-camel/src/partials/header-content.hbs
@@ -6,18 +6,10 @@
<div class="navbar-end">
{{#withMenuData}}
{{#each @items}}
- {{#if children}}
- <div class="navbar-item has-dropdown is-hoverable">
- <a class="navbar-link navbar-topics" href="#">{{name}}</a>
- <div class="navbar-dropdown">
- {{#each children}}
- <a class="navbar-item" href="{{url}}">{{name}}</a>
- {{/each}}
- </div>
- </div>
- {{else}}
- <a class="navbar-item navbar-topics"
href="{{url}}">{{name}}</a>
- {{/if}}
+ <a class="navbar-item-section navbar-item navbar-topics"
href="{{url}}">
+ <img src="{{pre}}">
+ {{name}}
+ </a>
{{/each}}
{{/withMenuData}}
</div>
diff --git a/config.toml b/config.toml
index db7d39e..bacbd8b 100644
--- a/config.toml
+++ b/config.toml
@@ -35,24 +35,28 @@ timeout = 300000
weight = 2
identifier = "blog"
url = "/blog/"
+ pre = "/_/img/blog.svg"
[[menu.main]]
name = "Documentation"
identifier = "docs"
- weight = 4
+ weight = 3
url = "/docs/"
+ pre = "/_/img/documentation.svg"
[[menu.main]]
name = "Community"
identifier = "community"
- weight = 5
+ weight = 4
url = "/community/"
+ pre = "/_/img/community.svg"
[[menu.main]]
name = "Download"
- weight = 6
+ weight = 5
identifier = "download"
url = "/download/"
+ pre = "/_/img/download.svg"
[module]
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ed2dd01..5d7cf80 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -37,7 +37,10 @@
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
{{ range .Site.Menus.main }}
- <a class="navbar-item navbar-topics" href="{{ .URL |
relURL }}">{{ .Name }}</a>
+ <a class="navbar-item-section navbar-item
navbar-topics" href="{{ .URL | relURL }}">
+ <img src="{{ .Pre }}">
+ {{ .Name }}
+ </a>
{{ end }}
</div>
</div>
