You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jena.apache.org by ki...@apache.org on 2023/02/12 11:44:47 UTC
[jena-site] branch main updated (5b20ed08d -> 2fae5d700)
This is an automated email from the ASF dual-hosted git repository.
kinow pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/jena-site.git
from 5b20ed08d Create an automatic Table of Contents, position it as a sidebar (large screen) or at the top of page (smaller than large screen)
new dec578591 Change z-index of the sidebar
new ec25f7770 Add a scroll bar to the ToC sidebar
new 5d4621abe Re-write the active menu item function, fixing JS error
new 2fae5d700 Fix ToC display for smaller viewports (alignment)
The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
assets/sass/jena.scss | 46 +++++++++++++++++++++++++++++++++-----------
layouts/_default/baseof.html | 39 ++++++++++++++++++++++++++++++-------
layouts/_default/single.html | 8 +++++---
3 files changed, 72 insertions(+), 21 deletions(-)
[jena-site] 03/04: Re-write the active menu item function, fixing JS error
Posted by ki...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kinow pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena-site.git
commit 5d4621abe249cacfc456347b491da9040dd5e396
Author: Bruno P. Kinoshita <ki...@users.noreply.github.com>
AuthorDate: Sun Feb 12 00:22:05 2023 +0100
Re-write the active menu item function, fixing JS error
---
layouts/_default/baseof.html | 39 ++++++++++++++++++++++++++++++++-------
1 file changed, 32 insertions(+), 7 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b6b29530c..276a62ad6 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -176,15 +176,40 @@
<script src="/js/improve.js" type="text/javascript"></script>
<!-- for marking links as active in the navbar-menu -->
<script type="text/javascript">
-const link = document.querySelector(`a[href="${window.location.pathname}"]`);
-if (link !== undefined && link !== null) {
- const parents = link.parentElement
- for (const parent of parents) {
- if (parent.tagName === 'ul' || parent.tagName === 'li') {
- parent.style += 'active';
+(function() {
+ 'use strict'
+ /*
+ * Find the link in the menu that corresponds to the currently open page.
+ * NOTE: We call .querySelectorAll because we may have more than one link
+ * in the page for the same entry, e.g. the Logo and Home link to
+ * the same page.
+ */
+ const links = document.querySelectorAll(`a[href="${window.location.pathname}"]`)
+ if (links !== undefined && links !== null) {
+ for (const link of links) {
+ // We may call add twice for this link, but that is fine.
+ link.classList.add('active')
+ let parentElement = link.parentElement
+ let count = 0
+ const levelsLimit = 4
+ // Keep iterating while we have the parent being UL's and LI's, with a hard-limit
+ // (to prevent possibly crashing some tabs with deeply nested and/or long menus).
+ // N.B.: In Bootstrap 5 the navigation menus are composed with UL's, that contain
+ // LI's, that contain either other UL's (sub-menus) or A's (links). We are
+ // after the A's.
+ while (['UL', 'LI'].includes(parentElement.tagName) && count <= levelsLimit) {
+ if (parentElement.tagName === 'LI') {
+ // Here we can rely on the JS API to search the first child A element,
+ // and if found add the active class. In Bootstrap 5 the link elements
+ // are marked as active, different than in previous version.
+ parentElement.querySelector('a:first-child').classList.add('active')
+ }
+ parentElement = parentElement.parentElement
+ count++
+ }
}
}
-}
+})()
</script>
</body>
[jena-site] 04/04: Fix ToC display for smaller viewports (alignment)
Posted by ki...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kinow pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena-site.git
commit 2fae5d700196daa76947c68ed7af09bed05092e4
Author: Bruno P. Kinoshita <ki...@users.noreply.github.com>
AuthorDate: Sun Feb 12 00:33:44 2023 +0100
Fix ToC display for smaller viewports (alignment)
---
assets/sass/jena.scss | 39 +++++++++++++++++++++++++++++----------
layouts/_default/single.html | 4 +++-
2 files changed, 32 insertions(+), 11 deletions(-)
diff --git a/assets/sass/jena.scss b/assets/sass/jena.scss
index 0903aaba7..8d87d7a48 100644
--- a/assets/sass/jena.scss
+++ b/assets/sass/jena.scss
@@ -72,26 +72,45 @@ main {
max-width: 100%;
}
}
- aside.d-xl-flex {
- width: 17rem;
- border-left: 1px solid var(--bs-secondary-bg);
+ aside {
+ &.d-xl-flex {
+ width: 17rem;
+ border-left: 1px solid var(--bs-secondary-bg);
+ overflow-y: scroll;
+ max-height: 100vh;
+ h2 {
+ margin-left: 1rem;
+ background-color: var(--bs-body-bg);
+ }
+ nav {
+ ul {
+ padding: 0 0 0 1rem;
+ }
+ }
+ }
+ &.d-xl-none {
+ nav {
+ ul {
+ padding: 0;
+ li {
+ ul {
+ padding: 0 0 0 1rem;
+ }
+ }
+ }
+ }
+ }
/* The top dropdown menu has the Bootstrap default z-index of 1000.
* The sticky-top that we use in the aside element gets a z-index of
* 1020 from Bootstrap, causing the menu to be under this sidebar.
* This value fixes that.
*/
- overflow-y: scroll;
- max-height: 100vh;
z-index: 999;
- h2 {
- margin-left: 1rem;
- background-color: var(--bs-body-bg);
- }
+
nav {
margin-top: 0.5rem;
ul {
list-style: none;
- padding: 0 0 0 1rem;
margin: 0;
}
}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 56e7f93a2..df9233fce 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,12 +1,14 @@
{{ define "main" }}
<main class="d-flex flex-xl-row flex-column">
- <aside class="text-muted align-self-start mb-3 px-2 d-xl-none d-block">
+ <!-- This one is for mobile and small viewport. -->
+ <aside class="text-muted align-self-start mb-3 p-0 d-xl-none d-block">
<h2 class="h6 my-2">On this page</h2>
{{ .TableOfContents }}
</aside>
<article class="flex-column me-lg-4">
{{ .Content }}
</article>
+ <!-- This one is for large viewport. -->
<aside class="text-muted align-self-start mb-3 mb-xl-5 p-0 d-none d-xl-flex flex-column sticky-top">
<h2 class="h6 sticky-top m-0 p-2 bg-body-tertiary">On this page</h2>
{{ .TableOfContents }}
[jena-site] 02/04: Add a scroll bar to the ToC sidebar
Posted by ki...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kinow pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena-site.git
commit ec25f777034e677d7ff8bb6c26f837e093ad7cb5
Author: Bruno P. Kinoshita <ki...@users.noreply.github.com>
AuthorDate: Sat Feb 11 23:15:46 2023 +0100
Add a scroll bar to the ToC sidebar
---
assets/sass/jena.scss | 13 ++++++-------
layouts/_default/single.html | 4 ++--
2 files changed, 8 insertions(+), 9 deletions(-)
diff --git a/assets/sass/jena.scss b/assets/sass/jena.scss
index 9ab153329..0903aaba7 100644
--- a/assets/sass/jena.scss
+++ b/assets/sass/jena.scss
@@ -1,8 +1,3 @@
-/** Colors **/
-:root {
- --color-border: #c9c9c9;
-}
-
/* Tables */
table td {
vertical-align: top;
@@ -79,17 +74,21 @@ main {
}
aside.d-xl-flex {
width: 17rem;
- border-left: 1px solid var(--color-border);
+ border-left: 1px solid var(--bs-secondary-bg);
/* The top dropdown menu has the Bootstrap default z-index of 1000.
* The sticky-top that we use in the aside element gets a z-index of
* 1020 from Bootstrap, causing the menu to be under this sidebar.
* This value fixes that.
*/
+ overflow-y: scroll;
+ max-height: 100vh;
z-index: 999;
h2 {
- padding: 0 0 0 1rem;
+ margin-left: 1rem;
+ background-color: var(--bs-body-bg);
}
nav {
+ margin-top: 0.5rem;
ul {
list-style: none;
padding: 0 0 0 1rem;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4b1ca4eb1..56e7f93a2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,8 +7,8 @@
<article class="flex-column me-lg-4">
{{ .Content }}
</article>
- <aside class="text-muted align-self-start mb-3 mb-xl-5 px-2 d-none d-xl-flex flex-column sticky-top">
- <h2 class="h6 my-2">On this page</h2>
+ <aside class="text-muted align-self-start mb-3 mb-xl-5 p-0 d-none d-xl-flex flex-column sticky-top">
+ <h2 class="h6 sticky-top m-0 p-2 bg-body-tertiary">On this page</h2>
{{ .TableOfContents }}
</aside>
</main>
[jena-site] 01/04: Change z-index of the sidebar
Posted by ki...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
kinow pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/jena-site.git
commit dec578591d04b69afeb804aaa40f35efb41b318f
Author: Bruno P. Kinoshita <ki...@users.noreply.github.com>
AuthorDate: Sat Feb 11 22:50:21 2023 +0100
Change z-index of the sidebar
---
assets/sass/jena.scss | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/assets/sass/jena.scss b/assets/sass/jena.scss
index b4481110c..9ab153329 100644
--- a/assets/sass/jena.scss
+++ b/assets/sass/jena.scss
@@ -80,6 +80,12 @@ main {
aside.d-xl-flex {
width: 17rem;
border-left: 1px solid var(--color-border);
+ /* The top dropdown menu has the Bootstrap default z-index of 1000.
+ * The sticky-top that we use in the aside element gets a z-index of
+ * 1020 from Bootstrap, causing the menu to be under this sidebar.
+ * This value fixes that.
+ */
+ z-index: 999;
h2 {
padding: 0 0 0 1rem;
}