You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@hop.apache.org by ha...@apache.org on 2021/03/12 14:53:52 UTC
[incubator-hop-website] branch master updated: HOP-2603 fixed
mobile header and navigation
This is an automated email from the ASF dual-hosted git repository.
hansva pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-hop-website.git
The following commit(s) were added to refs/heads/master by this push:
new e9ef816 HOP-2603 fixed mobile header and navigation
new 85096b8 Merge pull request #27 from bamaer/HOP-2603
e9ef816 is described below
commit e9ef816dab69da2a8cd2a283a695b69308fc56f9
Author: Bart Maertens <ba...@know.bi>
AuthorDate: Fri Mar 12 15:28:42 2021 +0100
HOP-2603 fixed mobile header and navigation
---
antora-ui-hop/src/css/header.css | 230 +++++++++++++++++++++++++-
antora-ui-hop/src/css/nav.css | 8 +-
antora-ui-hop/src/partials/header-content.hbs | 5 +-
layouts/partials/header.html | 7 +-
4 files changed, 239 insertions(+), 11 deletions(-)
diff --git a/antora-ui-hop/src/css/header.css b/antora-ui-hop/src/css/header.css
index bf0c5c4..ace30a0 100644
--- a/antora-ui-hop/src/css/header.css
+++ b/antora-ui-hop/src/css/header.css
@@ -6,6 +6,12 @@ body {
padding-top: var(--navbar-height);
}
+@media screen and (max-width: 1024px) {
+ body {
+ padding-top: var(--navbar-mobile-height);
+ }
+}
+
.navbar {
background: var(--navbar-background);
color: var(--navbar-font-color);
@@ -69,6 +75,7 @@ body {
width: 2.75rem;
margin-left: auto;
padding: 0;
+ order: 8;
}
.navbar-burger:focus {
@@ -116,6 +123,7 @@ body {
.navbar-menu {
display: none;
+ order: 2;
}
.navbar-item,
@@ -292,11 +300,12 @@ body {
.navbar-tools {
display: flex;
align-items: flex-end;
- flex-grow: 1;
+ /* flex-grow: 1; */
justify-content: flex-end;
line-height: 1.6;
padding: 0.5rem;
font-weight: bold;
+ order: 5;
}
.navbar-tools .brand-icon {
@@ -317,12 +326,225 @@ body {
}
}
+.navbar-fill {
+ flex-grow: 1;
+ order: 3;
+}
+
+.break-row {
+ display: none;
+ flex-basis: 100%;
+ height: 0;
+}
+
.navbar-search {
+ padding: 0.5rem;
+ text-align: right;
+ order: 4;
+}
+
+.navbar-search input {
+ border: 1px solid var(--nav-panel-divider-color);
+ border-radius: 4px 4px;
+ width: 14rem;
+ margin-top: 0.5rem;
+ padding: 0.4rem 1.5rem 0.4rem 1.9rem;
+ font-family: Open Sans, sans-serif;
+ font-size: 1rem;
+ caret-color: #ed8225;
+ background: no-repeat 0.4rem/1rem url(../img/search.svg);
+ background-color: var(--color-smoke-50);
+ outline: 0;
+}
+
+.navbar-search input:focus-within {
+ background-color: var(--navbar-background);
+ border-color: #eaeaec;
+ outline: 0;
+
+ @media screen and (prefers-reduced-motion: reduce) {
+ box-shadow: none;
+ transform: none;
+ }
+}
+
+#search-cancel {
+ position: relative;
+ bottom: calc(50% + 0.1rem);
+ left: calc(100% - 1.25rem);
+ height: 1rem;
+ display: none;
+ cursor: pointer;
+}
+
+#search_results {
+ top: 3.38rem;
+ background: var(--navbar-background);
+ text-align: left;
+ box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
+ position: absolute;
+ margin-right: 10px;
+ overflow-y: auto;
+ max-height: 80vh;
+ scrollbar-width: thin; /* Firefox */
+}
+
+#search_results::-webkit-scrollbar {
+ width: var(--scrollbar-thickness);
+}
+
+#search_results::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+#search_results::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+#search_results::-webkit-scrollbar-thumb:hover,
+#search_results::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-thumb-active-color);
+}
+
+.result_header {
+ font-weight: 600;
+ color: var(--color-asf-dark-blue);
+ padding-right: 0.5rem;
+}
+
+#search_results div.result {
+ padding: 0.25rem;
+ pointer-events: none;
+}
+
+#search_results div.result:hover {
+ background: var(--color-smoke-50);
+}
+
+#search_results div.heading {
display: flex;
- align-items: flex-end;
+ flex-wrap: wrap;
+}
+
+#search_results dt {
+ padding: 0.5rem 0 0.5rem 0.5rem;
+ color: var(--color-camel-orange);
+ text-transform: uppercase;
+ font-weight: 700;
+ flex-grow: 1;
+}
+
+#search_results dt.version {
+ height: 1.75rem;
+ padding: 0.3rem;
+ border: 2px solid var(--color-camel-orange);
+ border-radius: 25px;
+ text-align: center;
flex-grow: 0;
- justify-content: flex-end;
- line-height: 1.6;
+}
+
+#search_results dd {
+ margin-right: 2rem;
+ word-break: break-word;
+}
+
+#search_results a {
+ pointer-events: auto;
padding: 0.5rem;
+}
+
+#search_results a:hover {
+ text-decoration: underline;
+ text-decoration-color: var(--color-gray-10);
+}
+
+.result_summary {
+ color: var(--color-jet-50);
+ padding-top: 0.3rem;
+}
+
+#search_results div.footer-search {
+ display: inline-flex;
+ width: 100%;
+ padding: 0.75rem;
+}
+
+div.footer-search h4 {
+ color: var(--color-asf-dark-blue);
+ width: 5rem;
+}
+
+.no_search_results {
+ padding: 1rem;
font-weight: bold;
+ color: var(--color-asf-dark-blue);
+ border-bottom: 2px solid var(--color-smoke-50);
+}
+
+.algolia-docsearch-suggestion--highlight {
+ font-weight: bold;
+ color: var(--color-jet-50);
+}
+
+.results-hidden #search_results {
+ display: none;
+}
+
+/* Styling for mobile use */
+@media (max-width: 1024px) {
+ .navbar {
+ height: var(--navbar-mobile-height);
+ }
+
+ .navbar-end {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .navbar-brand {
+ flex-wrap: wrap;
+ }
+
+ .break-row {
+ display: block;
+ order: 6;
+ }
+
+ .navbar-tools {
+ display: flex;
+ align-items: flex-end;
+ justify-content: flex-end;
+ padding: 0.3 0.5rem;
+ order: 5;
+ }
+
+ .navbar-tools .brand-icon {
+ height: 2rem;
+ width: 1.75rem;
+ margin: 0.75rem 0.35rem -0.5rem;
+ }
+
+ .navbar-search {
+ order: 7;
+ }
+
+ .navbar-search input {
+ width: calc(100vw - 4rem);
+ }
+
+ .navbar-burger {
+ display: block;
+ }
+
+ #search-cancel {
+ margin-top: 0.75rem;
+ }
+
+ #search_results {
+ left: 0;
+ width: 100vw;
+ top: var(--navbar-mobile-height);
+ }
}
diff --git a/antora-ui-hop/src/css/nav.css b/antora-ui-hop/src/css/nav.css
index ba2ce89..0d39c49 100644
--- a/antora-ui-hop/src/css/nav.css
+++ b/antora-ui-hop/src/css/nav.css
@@ -291,10 +291,10 @@ html.is-clipped--nav {
.nav-logo {
background-image: url('../img/hop-logo.svg');
background-repeat: no-repeat;
- background-size: 73px;
- background-position-x: center;
- background-position-y: center;
- width: 180px;
+ background-size: 4rem;
+ background-position-y: -16px;
+ width: 4rem;
+ order: 1;
}
.nav-logo span {
diff --git a/antora-ui-hop/src/partials/header-content.hbs b/antora-ui-hop/src/partials/header-content.hbs
index 28bd578..dae8ccc 100644
--- a/antora-ui-hop/src/partials/header-content.hbs
+++ b/antora-ui-hop/src/partials/header-content.hbs
@@ -26,7 +26,9 @@
{{/withMenuData}}
</div>
</div>
- <div class="navbar-search">
+ <div class="navbar-fill"></div>
+ <div class="break-row"></div>
+ <div class="navbar-search results-hidden">
<input id="search-input" type="text" placeholder="Search docs" class="ds-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
</div>
<div class="navbar-tools">
@@ -44,3 +46,4 @@
</div>
</nav>
</header>
+<a id="top"></a>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index ae8df37..e9f82b6 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -17,7 +17,7 @@
<link rel="stylesheet" href="{{ path.Join "_" (index .Site.Data "rev-manifest" "css/site.css") | relURL }}">
</head>
-<body class="article">
+<body class="{{ if .Page.IsHome }}homepage {{ end }}article">
<div class="cookie-banner" id="cookies-eu-banner" style="display: none;">
<div id="cookies-eu-content">
By continuing to visit this site, you accept the use of <a href ="{{ .Site.BaseURL}}cookie-info/">cookies.</a>
@@ -48,7 +48,9 @@
{{ end }}
</div>
</div>
- <div class="navbar-search">
+ <div class="navbar-fill"></div>
+ <div class="break-row"></div>
+ <div class="navbar-search results-hidden">
<input id="search-input" type="text" placeholder="Search docs" class="ds-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto">
</div>
<div class="navbar-tools">
@@ -66,3 +68,4 @@
</div>
</nav>
</header>
+ <a id="top"></a>