CLDR-17803 site: improved popup (#4029)

unicode-org · Sep 9, 2024 · be67120 · be67120
1 parent 1479662
commit be67120
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
@@ -36,20 +36,31 @@ header .nav > div {
   display: inline;
 }
 
-header .nav a {
+header .nav a.uplink {
   color: white;
 }
 
-header .nav ul b {
-  color: gray;
+header .nav div.subpages {
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    background-color: white;
+    position: absolute;
+    color: black;
+    padding: 0.5em;
 }
 
-.title ul.subpages {
-  display: none;
+div.subpages .hamburger {
+    left: 1em;
+    top: 1em;
+    color: darkslateblue;
 }
 
-.title:hover ul.subpages {
-  display: block;
+.subpages .hamburger:hover {
+    color: gray;
+}
+
+header .nav ul b {
+  color: gray;
 }
 
 header .nav .crumb {
@@ -59,19 +70,19 @@ header .nav .crumb {
 
 header .nav ul {
   display: inline;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  background-color: navy;
-  padding: 0.5em;
 }
 
 header .nav ul li {
   display: block;
-  padding: 0.5em;
+  padding: 0.25em;
   font-size: medium;
   margin: 0;
 }
 
+.subpages .li a {
+    color: black !important;
+}
+
 header .message {
   color: lightblue;
   display: list-item;

diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
@@ -73,12 +73,17 @@ async function siteData() {
 const app = Vue.createApp(
   {
     setup(props) {
+      // the tree.json data
       const tree = ref({});
+      // loading status for tree.json
       const status = ref(null);
+      // is the popup menu shown?
+      const popup = ref(false);
 
       return {
         tree,
         status,
+        popup,
       };
     },
     mounted() {
@@ -211,18 +216,24 @@ const app = Vue.createApp(
          <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
        </span>
        <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
-       <div v-else class="title"><span class="hamburger">≡</span>
+       <div v-else class="title"  @mouseover="popup = true"><span class="hamburger" @click="popup = !popup">≡</span>
             {{ ourTitle }}
-        <ul class="subpages">
-            <li v-for="subpage of siblingPages" :key="subpage.path">
-                <span v-if="path == subpage.html">
-                    <b>{{ subpage.title }}</b>
-                </span>
-                <a v-else v-bind:href="'/'+subpage.html">
-                    {{ subpage.title }}
-                </a>
-            </li>
-        </ul>
+
+        <div class="subpages" v-if="popup">
+          <span class="hamburger" @click="popup=false">✕</span>
+          <ul class="subpages" >
+              <li v-for="subpage of siblingPages" :key="subpage.path">
+                  <span v-if="path == subpage.html">
+                      <b>{{ subpage.title }}</b>
+                  </span>
+                  <a v-else v-bind:href="'/'+subpage.html">
+                      {{ subpage.title }}
+                  </a>
+              </li>
+          </ul>
+        </div>
+
+
       </div>
 
     </div>`,