From c70ff706125c03983efa8fabb6f12a02a366e91c Mon Sep 17 00:00:00 2001 From: "Steven R. Loomis" Date: Thu, 5 Sep 2024 10:56:02 -0500 Subject: [PATCH] CLDR-17803 site: improve top nav (#4023) --- docs/site/_layouts/page.html | 14 +++++----- docs/site/assets/css/page.css | 42 +++++++++++++++++++++++------ docs/site/assets/js/cldrsite.js | 47 +++++++++++++++++++++++++-------- 3 files changed, 76 insertions(+), 27 deletions(-) diff --git a/docs/site/_layouts/page.html b/docs/site/_layouts/page.html index 5961ee550f1..01c2cc7fbe2 100644 --- a/docs/site/_layouts/page.html +++ b/docs/site/_layouts/page.html @@ -11,15 +11,13 @@
-
[Unicode]   - - - This navigation UI is temporary, just to give access to the pages. +
+
+
This navigation UI is temporary, just to give access to the pages.
+
diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css index 8fef6bdf28a..4cc90e94ab5 100644 --- a/docs/site/assets/css/page.css +++ b/docs/site/assets/css/page.css @@ -6,23 +6,28 @@ section.body { header { width: "100%"; background-color: #5555ff; + border-bottom: 0.5em solid #EEEEFE; + padding: 0.5em; +} + +header div.navparent { display: flex; flex-direction: row; flex-wrap: wrap; - border-bottom: 0.5em solid #EEEEFE; - padding: 0.5em; } -header > div { +header .navparent a.icon { display: table-cell; + margin-top: 40; } -header > div.icon { - flex-grow: 1; +header .navparent > div { + display: table-cell; } header .title { - color: white; + display: table-cell; + color: yellow; font-size: 1.5em; } @@ -30,12 +35,33 @@ header .nav, header .nav > div { display: inline; } -header .nav a, header .nav .title { +header .nav a { color: white; } header .nav ul b { - color: yellow; + color: gray; +} + +header .nav .crumb { + color: white; + margin: .5em; +} + +header .nav ul { + display: inline-flexbox; + width: 90%; +} + +header .nav ul li { + display: inline-flex; + padding: .5em; + margin: 0; +} + +header .message { + color: lightblue; + display: list-item; } footer { diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js index fbfac161684..e229fb988b3 100644 --- a/docs/site/assets/js/cldrsite.js +++ b/docs/site/assets/js/cldrsite.js @@ -155,29 +155,54 @@ const app = Vue.createApp( thePages = [...thePages, ...this.tree?.value?.allDirs["index"].pages]; } const c = new Intl.Collator([]); + const t = this; return thePages .map((path) => ({ path, html: md2html(path), title: this.tree.value.title[path] ?? path, })) - .sort((a, b) => c.compare(a.title, b.title)); + .sort((a, b) => c.compare(a.title, b.title)) + .filter(({html}) => html != t.path); // skip showing the index page in the subpage list }, + ancestorPages() { + const pages = []; + // if we are not loaded, or if we're at the root, then exit + if (!this.tree?.value || !this.path || this.path == 'index.html') return pages; + // traverse + let path = this.path; + do { + // calculate the immediate ancestor + const pathMd = html2md(path); + const dir = path2dir(path); + const nextIndex = this.tree.value.allDirs[dir].index || 'index.md'; // falls back to top + const nextIndexHtml = md2html(nextIndex); + const nextIndexTitle = this.tree.value.title[nextIndex]; + // prepend + pages.push({ + href: '/'+nextIndexHtml, + title: nextIndexTitle, + }); + if (nextIndexHtml == path) { + console.error('Loop detected from ' + this.path); + path = 'index.html'; // exit + } + path = nextIndexHtml; + } while(path && path != 'index.html'); // we iterate over 'path', so html + pages.reverse(); + return pages; + } }, template: `
{{ status }}
Loading…
- - {{ rootTitle }} | - - - - {{ ourIndexTitle }} - - | + [Unicode]   + + + {{ ancestor.title }}❱ {{ ourTitle }}