CLDR-17803 site: improve top nav (#4023)

unicode-org · Sep 5, 2024 · c70ff70 · c70ff70
1 parent 0a7ea35
commit c70ff70
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 27 deletions.
diff --git a/docs/site/_layouts/page.html b/docs/site/_layouts/page.html
@@ -11,15 +11,13 @@
 <body>
 	<!-- <h1>{{ page.title }}</h1> -->
 	<header>
-		<div class="icon"><a href="http://www.unicode.org/"> <img border="0"
-					src="http://www.unicode.org/webscripts/logo60s2.gif" align="middle" alt="[Unicode]" width="34"
-					height="33"></a>&nbsp;&nbsp;
-
-					<div id="nav" class="nav">
-						<!-- Vue mount here -->
-					</div>
-					<i>This navigation UI is temporary, just to give access to the pages.</i>
+		<div class="navparent">
+			<div id="nav" class="nav">
+				<!-- Vue mount here -->
+			</div>
 		</div>
+		<div class="message"><i>This navigation UI is temporary, just to give access to the pages.</i></div>
+
 		<!-- <div class="bar"><a href="http://www.unicode.org" class="bar">Home</a>
 			| <a href="http://www.unicode.org/search/" class="bar">Search</a></div> -->
 	</header>

diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
@@ -6,36 +6,62 @@ 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;
 }
 
 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
@@ -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: `<div>
         <div class='status' v-if="status">{{ status }}</div>
         <div class='status' v-if="!tree">Loading…</div>
-        <span v-if="path !== 'index.html'">
-        <a class='uplink' href="/">{{ rootTitle }}</a> |
-        </span>
 
-        <span v-if="path !== '' && ourIndexHtml && (ourIndexHtml != path) && (ourIndexHtml != 'index.html')">
-            <a class='uplink'
-                v-bind:href="'/'+ourIndexHtml"
-                >
-                {{ ourIndexTitle }}
-            </a>
-            |
+       <a class="icon" href="http://www.unicode.org/"> <img border="0"
+					src="/assets/img/logo60s2.gif"  alt="[Unicode]" width="34"
+					height="33"></a>&nbsp;&nbsp;
+
+        <span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
+          <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
         </span>
         <span class="title"> {{ ourTitle }} </span>
         <ul class="subpages">