From 5bc6186447dae801369db223402d9ebcd0a4be52 Mon Sep 17 00:00:00 2001
From: Roger Espinosa <roger@umich.edu>
Date: Wed, 29 Nov 2023 16:05:55 -0500
Subject: [PATCH] fixing picklists + headers + extra browse

---
 src/js/text/handlers/action-toggle-tree.js    |  21 +++
 src/js/text/main.js                           |   1 +
 styles/styles.css                             | 119 +++++++++++++++--
 templates/text/browse.xml                     |   3 +
 templates/text/dlxsclassglobals.xml           |   1 +
 templates/text/picklist.xml                   |   5 +-
 templates/text/qbat/qbat.pageviewer.xsl       |   2 +-
 templates/text/qbat/qbat.picklist.xsl         | 124 +++++++++---------
 templates/text/qbat/qbat.static.xsl           |  68 +++++++++-
 .../text/qui/includes/qui.header-common.xsl   |   2 +-
 templates/text/qui/qui.browse.xsl             |  25 +++-
 templates/text/qui/qui.picklist.xsl           |  10 +-
 templates/text/qui/qui.static.xsl             |  31 +++++
 templates/text/staticincl.xml                 |   2 +
 14 files changed, 327 insertions(+), 87 deletions(-)
 create mode 100644 src/js/text/handlers/action-toggle-tree.js

diff --git a/src/js/text/handlers/action-toggle-tree.js b/src/js/text/handlers/action-toggle-tree.js
new file mode 100644
index 0000000..cc36124
--- /dev/null
+++ b/src/js/text/handlers/action-toggle-tree.js
@@ -0,0 +1,21 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+
+  const toggleDetails = function(value) {
+    detailsEls.forEach((el) => {
+      el.open = value;
+    })
+  }
+
+  const detailsEls = document.querySelectorAll('details.tree');
+  const btnExpandAll = document.querySelector('button[data-action="expand-all"]');
+  const btnCollapseAll = document.querySelector('button[data-action="collapse-all"]');
+
+  btnExpandAll.addEventListener('click', () => {
+    toggleDetails(true);
+  })
+
+  btnCollapseAll.addEventListener('click', () => {
+    toggleDetails(false);
+  })
+
+});
\ No newline at end of file
diff --git a/src/js/text/main.js b/src/js/text/main.js
index b67207d..42c9142 100644
--- a/src/js/text/main.js
+++ b/src/js/text/main.js
@@ -16,6 +16,7 @@ import "./handlers/action-bookbag-form.js";
 
 import "./handlers/action-copy-text.js";
 import "./handlers/action-item-download.js";
+import "./handlers/action-toggle-tree.js";
 import "./handlers/item-page-navigator.js";
 import "./viewers/viewer-mirador.js";
 // import "./viewers/viewer-plaintext.js";
diff --git a/styles/styles.css b/styles/styles.css
index 00fd0b1..3bc1826 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -75,16 +75,119 @@ ul ul {
 }
 
 
-ul.list-bulleted, .text-block ul {
+ul.list-bulleted {
   list-style: initial;
   padding: revert;
 }
 
-ol.list-numbered, text-block ol {
+ol.list-numbered, text-block ol:not([class]) {
   list-style: decimal;
   padding: revert;
 }
 
+/* TREE */
+.list-tree{
+  --spacing : 1.5rem;
+  --radius  : 12px;
+}
+
+.list-tree li{
+  display      : block;
+  position     : relative;
+  padding: 1rem 0;
+  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);
+  margin-top: -4px;
+}
+
+.xxlist-tree li:last-child {
+  margin-top: -4px; /* magic! */
+}
+
+.list-tree ul{
+  margin-left  : calc(var(--radius) - var(--spacing));
+  padding-left : 0;
+}
+
+.list-tree ul li{
+  border-left : 2px solid #ddd;
+}
+
+.list-tree ul li:last-child{
+  border-color : transparent;
+}
+
+.list-tree ul li::before{
+  content      : '';
+  display      : block;
+  position     : absolute;
+  top          : calc(var(--spacing) / -2 + 1rem);
+  left         : -2px;
+  width        : calc(var(--spacing) + 2px);
+  height       : calc(var(--spacing) + 1px);
+  border       : solid #ddd;
+  border-width : 0 0 2px 2px;
+}
+
+.list-tree summary{
+  display : block;
+  cursor  : pointer;
+}
+
+.list-tree summary::marker,
+.list-tree summary::-webkit-details-marker{
+  display : none;
+}
+
+.list-tree summary:focus{
+  outline : none;
+}
+
+.list-tree summary:focus-visible{
+  outline : 1px dotted #000;
+}
+
+.list-tree li::after,
+.list-tree summary::before{
+  content       : '';
+  display       : block;
+  position      : absolute;
+  top           : calc(var(--spacing) / 2 - var(--radius) + 1rem);
+  left          : calc(var(--spacing) - var(--radius) - 1px);
+  width         : calc(2 * var(--radius));
+  height        : calc(2 * var(--radius));
+  border-radius : 50%;
+  background    : #ddd;
+}
+
+.list-tree summary::before{
+  z-index    : 1;
+  /* background : #696 url('expand-collapse.svg') 0 0; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Material Icons";
+  font-size: 24px;
+  content: "\e5ce";
+  content: "\e409";
+  content: "\e145";
+  background: var(--color-teal-300);
+  color: white;
+}
+
+.list-tree details[open] > summary::before{
+  background-position : calc(-2 * var(--radius)) 0;
+  content: "\e5cf";
+  content: "\e15b";
+}
+
+.list-tree a, .list-tree details {
+  margin-left: 1rem;
+}
+
+.list-tree a {
+  display: block;
+}
+
 svg {
   display: inline-block;
   vertical-align: middle;
@@ -128,7 +231,7 @@ main {
 
 /** Details **/
 
-details > summary {
+details.panel > summary {
   list-style: none;
   cursor: pointer;
   padding: 0.25em 0.5em;
@@ -142,31 +245,31 @@ details.panel > summary {
   border-left: 2px solid transparent;
 }
 
-details[open] {
+details.panel[open] {
   padding: 0.25em 0.5em;
 }
 
-details[open] > summary:first-of-type {
+details.panel[open] > summary:first-of-type {
   font-weight: var(--semibold);
   color: var(--color-teal-400);
   border-left: 2px solid var(--color-teal-400);
   padding: 0.25em 0.5em;
 }
 
-details > summary::after {
+details.panel > summary::after {
   font-family: "Material Icons";
   font-size: 24px;
   content: "\e5cf";
   color: var(--color-teal-400);
 }
 
-details[open] > summary::after {
+details.panel[open] > summary::after {
   font-family: "Material Icons";
   content: "\e5ce";
   color: var(--color-teal-400);
 }
 /* Removes the default arrow on Chrome */
-details > summary::-webkit-details-marker {
+details.panel > summary::-webkit-details-marker {
   display: none;
 }
 
diff --git a/templates/text/browse.xml b/templates/text/browse.xml
index f7836d4..40d5256 100644
--- a/templates/text/browse.xml
+++ b/templates/text/browse.xml
@@ -34,6 +34,9 @@
   <BrowseStringForm><?BROWSE_STRING_FORM_XML?></BrowseStringForm>
   <BrowseLevels><?BROWSE_LEVELS_XML?></BrowseLevels>
 
+
+  <?CHUNK filename="uplift.panels.xml" optional="1"?>
+
    <Footer>
     <?CHUNK filename="footer.xml"?>
   </Footer>
diff --git a/templates/text/dlxsclassglobals.xml b/templates/text/dlxsclassglobals.xml
index 9ff4e22..d279e13 100644
--- a/templates/text/dlxsclassglobals.xml
+++ b/templates/text/dlxsclassglobals.xml
@@ -16,5 +16,6 @@
 <PrintOnDemandEnabled><?POD_ENABLED_XML?></PrintOnDemandEnabled>
 <SearchHistoryHref><?SEARCH_HISTORY_LINK_XML?></SearchHistoryHref>
 
+<?CHUNK filename="collection-idno.chnk" optional="1"?>
 <?CHUNK filename="rightsmap.en.xml"?>
 <?CHUNK filename="rightsmap-extra.en.xml" optional="1"?>
\ No newline at end of file
diff --git a/templates/text/picklist.xml b/templates/text/picklist.xml
index 64741b1..e4702fd 100644
--- a/templates/text/picklist.xml
+++ b/templates/text/picklist.xml
@@ -9,8 +9,9 @@
         <Filename>../vendor/str.split.function.xsl</Filename>
         <Filename>../vendor/xslfunctions.xsl</Filename>
         <Filename>qui/components/*.xsl</Filename>
-        <Filename>qui/includes/qui.results-item.xsl</Filename>
-        <Filename>qui/includes/qui.scopedivs.xsl</Filename>
+        <Filename>qui/includes/qui.header-common.xsl</Filename>
+        <Filename>qui/includes/qui.header-reslist.xsl</Filename>
+        <!-- <Filename>qui/includes/qui.scopedivs.xsl</Filename> -->
         <Filename>qui/qui.picklist.xsl</Filename>
     </XslFallbackFileList>
 
diff --git a/templates/text/qbat/qbat.pageviewer.xsl b/templates/text/qbat/qbat.pageviewer.xsl
index 9700150..3d2031d 100644
--- a/templates/text/qbat/qbat.pageviewer.xsl
+++ b/templates/text/qbat/qbat.pageviewer.xsl
@@ -5,7 +5,7 @@
 
     <script>
       window.mUse = window.mUse || [];
-      window.mUse.push('sl-dropdown');
+      window.mUse.push('sl-dropdown', 'sl-menu', 'sl-menu-item', 'sl-dialog');
     </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/light.css" />
diff --git a/templates/text/qbat/qbat.picklist.xsl b/templates/text/qbat/qbat.picklist.xsl
index b09857f..14df3e8 100644
--- a/templates/text/qbat/qbat.picklist.xsl
+++ b/templates/text/qbat/qbat.picklist.xsl
@@ -340,35 +340,37 @@
   </xsl:template>
 
   <xsl:template match="qui:section[@type='volume']" mode="result" priority="10">
-    <section class="[ results-list--small ]" id="{@identifier}">
+    <section class="[ results-list--grid ]" id="{@identifier}">
+      <div class="[ results-list__blank ]" aria-hidden="true" data-type="inventory_2">
+      </div>
       <div class="[ results-card ]">
-        <div class="[ results-list__blank ]" aria-hidden="true" data-type="inventory_2">
-        </div>
         <div class="results-list__content flex flex-flow-column flex-grow-1">
           <h3>
             <a href="{qui:link[@rel='volume']/@href}" class="results-link">
               <xsl:apply-templates select="qui:header/qui:title" mode="title" />
             </a>
           </h3>
-          <dl class="[ results ]">
-            <div>
-              <dt>Issues</dt>
-              <xsl:for-each select="qui:section[@type='issue']">
-                <dd>
-                  <a href="{qui:link/@href}">
-                    <xsl:apply-templates select="qui:header/qui:title" mode="title" />
-                  </a>
-                </dd>
-              </xsl:for-each>
-            </div>
-          </dl>
         </div>
       </div>
+      <div class="results-details">
+        <dl class="[ results ]">
+          <div>
+            <dt>Issues</dt>
+            <xsl:for-each select="qui:section[@type='issue']">
+              <dd>
+                <a href="{qui:link/@href}">
+                  <xsl:apply-templates select="qui:header/qui:title" mode="title" />
+                </a>
+              </dd>
+            </xsl:for-each>
+          </div>
+        </dl>
+      </div>
     </section>
   </xsl:template>
 
   <xsl:template match="qui:section[@type='item']" mode="result">
-    <section class="[ results-list--small ]">
+    <section class="[ results-list--grid ]">
       <!-- <xsl:variable name="link" select="qui:link[@rel='result']" /> -->
       <xsl:variable name="link-href">
         <xsl:choose>
@@ -386,63 +388,65 @@
             <xsl:apply-templates select="qui:title" mode="title" />
           </xsl:when>
           <xsl:otherwise>
-            <xsl:apply-templates select="qui:block[@slot='metadata']//qui:field[@key='title']" mode="title" />
+            <xsl:apply-templates select="qui:metadata[@slot='metadata']//qui:field[@key='title']" mode="title" />
           </xsl:otherwise>
         </xsl:choose>
       </xsl:variable>
 
+      <xsl:choose>
+        <xsl:when test="qui:link[@rel='iiif']">
+          <img class="[ results-list__image ]" src="{qui:link[@rel='iiif']/@href}" aria-hidden="true" alt="" />
+        </xsl:when>
+        <xsl:otherwise>
+          <div class="[ results-list__blank ]" aria-hidden="true">
+            <xsl:attribute name="data-type">
+              <xsl:choose>
+                <xsl:when test="qui:link[@rel='icon']/@type='audio'">
+                  <span>volume_up</span>
+                </xsl:when>
+                <xsl:when test="qui:link[@rel='icon']/@type='doc'">
+                  <span>description</span>
+                </xsl:when>
+                <xsl:when test="qui:link[@rel='icon']/@type='pdf'">
+                  <span>description</span>
+                </xsl:when>
+                <xsl:when test="qui:link[@rel='icon']/@type='restricted'">
+                  <span>lock</span>
+                </xsl:when>
+                <xsl:otherwise>blank</xsl:otherwise>
+              </xsl:choose>
+            </xsl:attribute>
+          </div>
+        </xsl:otherwise>
+      </xsl:choose>
       <div class="results-card">
-        <xsl:choose>
-          <xsl:when test="qui:link[@rel='iiif']">
-            <img class="[ results-list__image ]" src="{qui:link[@rel='iiif']/@href}" aria-hidden="true" alt="" />
-          </xsl:when>
-          <xsl:otherwise>
-            <div class="[ results-list__blank ]" aria-hidden="true">
-              <xsl:attribute name="data-type">
-                <xsl:choose>
-                  <xsl:when test="qui:link[@rel='icon']/@type='audio'">
-                    <span>volume_up</span>
-                  </xsl:when>
-                  <xsl:when test="qui:link[@rel='icon']/@type='doc'">
-                    <span>description</span>
-                  </xsl:when>
-                  <xsl:when test="qui:link[@rel='icon']/@type='pdf'">
-                    <span>description</span>
-                  </xsl:when>
-                  <xsl:when test="qui:link[@rel='icon']/@type='restricted'">
-                    <span>lock</span>
-                  </xsl:when>
-                  <xsl:otherwise>blank</xsl:otherwise>
-                </xsl:choose>
-              </xsl:attribute>
-            </div>
-          </xsl:otherwise>
-        </xsl:choose>
         <div class="results-list__content flex flex-flow-column flex-grow-1">
           <h3>
             <a href="{$link-href}" class="results-link">
               <xsl:value-of select="$link-title" />
             </a>
           </h3>
-          <dl class="[ results ]">
-            <!-- <xsl:apply-templates select="qui:collection" /> -->
-            <xsl:apply-templates select="qui:block[@slot='metadata']//qui:field" />
-            <xsl:if test="qui:link[@rel='toc' or @rel='detail']">
-              <div>
-                <dt>Links</dt>
-                <!-- <xsl:apply-templates select="qui:link[@rel='detail']" mode="summary" /> -->
-                <xsl:apply-templates select="qui:link[@rel='toc']" mode="summary">
-                  <xsl:with-param name="title" select="normalize-space($link-title)" />
-                </xsl:apply-templates>
-              </div>
-            </xsl:if>
-            <xsl:apply-templates select="qui:block[@slot='matches']//qui:field" />
-          </dl>
-          <xsl:apply-templates select="qui:block[@slot='summary']" mode="callout">
-            <xsl:with-param name="title" select="normalize-space($link-title)" />
-          </xsl:apply-templates>
         </div>
       </div>
+      <div class="results-details">
+        <dl class="[ results ]">
+          <!-- <xsl:apply-templates select="qui:collection" /> -->
+          <xsl:apply-templates select="qui:metadata[@slot='metadata']//qui:field" />
+          <xsl:if test="qui:link[@rel='toc' or @rel='detail']">
+            <div>
+              <dt>Links</dt>
+              <!-- <xsl:apply-templates select="qui:link[@rel='detail']" mode="summary" /> -->
+              <xsl:apply-templates select="qui:link[@rel='toc']" mode="summary">
+                <xsl:with-param name="title" select="normalize-space($link-title)" />
+              </xsl:apply-templates>
+            </div>
+          </xsl:if>
+          <xsl:apply-templates select="qui:block[@slot='matches']//qui:field" />
+        </dl>
+        <xsl:apply-templates select="qui:block[@slot='summary']" mode="callout">
+          <xsl:with-param name="title" select="normalize-space($link-title)" />
+        </xsl:apply-templates>
+      </div>
 
       <xsl:variable name="form" select="qui:form[@slot='bookbag']" />
       <xsl:if test="$form">
diff --git a/templates/text/qbat/qbat.static.xsl b/templates/text/qbat/qbat.static.xsl
index 38e662b..665bdea 100644
--- a/templates/text/qbat/qbat.static.xsl
+++ b/templates/text/qbat/qbat.static.xsl
@@ -5,6 +5,7 @@
   <xsl:template name="build-extra-styles">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/themes/light.css" />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.4.0/dist/shoelace-autoloader.js"></script>
+    <link rel="stylesheet" href="{$docroot}styles/text/tabs.css" />
 
     <!-- <link rel="stylesheet" href="{$docroot}styles/text/item.css" /> -->
 
@@ -39,6 +40,9 @@
     </div>
 
     <div class="[ flex flex-flow-rw flex-gap-1 ][ aside--wrap ]">
+      <xsl:if test="//qui:nav[@role='browse']">
+        <div class="[ side-panel ]"></div>
+      </xsl:if>
       <xsl:if test="//qui:block[@slot='content']//xhtml:h2 or //qui:nav[@rel='pages']">
         <div class="[ aside ]">
           <nav class="[ page-index ]" xx-aria-labelledby="page-index-label">
@@ -55,10 +59,13 @@
           <xsl:if test="
             count(//qui:block[@slot='content']//xhtml:h2) &lt; 1
             and
-            not(//qui:nav[@rel='pages'])">
+            not(//qui:nav[@rel='pages'])
+            and
+            not(//qui:nav[@role='browse'])">
             <xsl:text> full</xsl:text>
           </xsl:if>
         </xsl:attribute>
+        <xsl:call-template name="build-browse-navigation" />
         <div class="text-block">
           <xsl:apply-templates select="//qui:block[@slot='content']">
             <!-- <xsl:with-param name="classes">[ viewport-narrow ]</xsl:with-param> -->
@@ -78,6 +85,14 @@
     </section>
   </xsl:template>
 
+  <xsl:template match="qui:block[@data-current-page='contents']//xhtml:ul[@class='list-tree']//xhtml:details" mode="copy">
+    <details>
+      <xsl:attribute name="class">tree</xsl:attribute>
+      <xsl:apply-templates select="@*" mode="copy" />
+      <xsl:apply-templates mode="copy" />
+    </details>
+  </xsl:template>
+
   <xsl:template match="qui:block[@data-current-page='contents']//xhtml:details" mode="copy">
     <details>
       <xsl:attribute name="class">panel w-100</xsl:attribute>
@@ -94,9 +109,32 @@
     </div>
   </xsl:template>
 
+  <xsl:template match="qui:block[@data-current-page]//xhtml:ul[@class='list-tree']" mode="copy" priority="101">
+    <div class="mb-1 flex flex-flow-row">
+      <button class="button button--small button--secondary" data-action="expand-all">
+        <span class="material-icons" aria-hidden="true">add</span>
+        <span>Expand All</span>
+      </button>
+      <button class="button button--small button--secondary" data-action="collapse-all">
+        <span class="material-icons" aria-hidden="true">remove</span>
+        <span>Collapse All</span>
+      </button>
+    </div>
+    <ul class="list-tree">
+      <xsl:apply-templates mode="copy" />
+    </ul>
+  </xsl:template>
+
   <xsl:template match="qui:block[@data-current-page='contents']//xhtml:ul" mode="copy">
     <ul>
-      <xsl:attribute name="class">list-unstyled</xsl:attribute>
+      <xsl:attribute name="class">
+        <xsl:choose>
+          <xsl:when test="@class">
+            <xsl:value-of select="@class" />
+          </xsl:when>
+          <xsl:otherwise>list-unstyled</xsl:otherwise>
+        </xsl:choose>  
+      </xsl:attribute>
       <xsl:apply-templates select="@*" mode="copy" />
       <xsl:apply-templates mode="copy" />
     </ul>
@@ -104,7 +142,12 @@
 
   <xsl:template match="qui:block[@data-current-page='contents']//xhtml:ul//xhtml:li" mode="copy">
     <li>
-      <xsl:attribute name="class">mb-1</xsl:attribute>
+      <!-- <xsl:attribute name="class">
+        <xsl:choose>
+          <xsl:when test="@class"><xsl:value-of select="@class" /></xsl:when>
+          <xsl:otherwise>mb-1</xsl:otherwise>
+        </xsl:choose>
+      </xsl:attribute> -->
       <xsl:apply-templates select="@*" mode="copy" />
       <xsl:apply-templates mode="copy" />
     </li>
@@ -128,4 +171,23 @@
     </div>
   </xsl:template>
 
+  <xsl:template name="build-browse-navigation">
+    <xsl:if test="//qui:nav[@role='browse']">
+      <nav aria-labelledby="maincontent" class="horizontal-navigation-container mb-2">
+        <ul class="horizontal-navigation-list">
+          <xsl:for-each select="//qui:nav[@role='browse']/qui:link">
+            <li>
+              <a href="{@href}">
+                <xsl:if test="@current = 'true'">
+                  <xsl:attribute name="aria-current">page</xsl:attribute>
+                </xsl:if>
+                <xsl:value-of select="qui:label" />
+              </a>
+            </li>
+          </xsl:for-each>
+        </ul>
+      </nav>
+    </xsl:if>
+  </xsl:template>
+    
 </xsl:stylesheet>
\ No newline at end of file
diff --git a/templates/text/qui/includes/qui.header-common.xsl b/templates/text/qui/includes/qui.header-common.xsl
index 9883889..b2aa060 100644
--- a/templates/text/qui/includes/qui.header-common.xsl
+++ b/templates/text/qui/includes/qui.header-common.xsl
@@ -450,7 +450,7 @@
 
   <xsl:template match="SOURCEDESC" mode="process-pubinfo">
     <xsl:variable name="bibl-source" select="(BIBLFULL|BIBL)" />
-    <xsl:variable name="pubstatement-source" select="($bibl-source/PUBLICATIONSTMT|$bibl-source/IMPRINT)" />
+    <xsl:variable name="pubstatement-source" select="($bibl-source/PUBLICATIONSTMT|$bibl-source/IMPRINT|$bibl-source)" />
     <xsl:call-template name="build-field">
       <xsl:with-param name="key">pubinfo</xsl:with-param>
       <xsl:with-param name="value">
diff --git a/templates/text/qui/qui.browse.xsl b/templates/text/qui/qui.browse.xsl
index 438f094..bb689f2 100644
--- a/templates/text/qui/qui.browse.xsl
+++ b/templates/text/qui/qui.browse.xsl
@@ -105,13 +105,24 @@
 
   <xsl:template name="build-browse-navigation">
     <qui:nav role="browse">
-      <xsl:if test="//CollectionIdno">
-        <qui:link key="picklist" href="/cgi/t/text/text-idx?cc={$collid};idno={//CollectionIdno}">
-          <qui:label>
-            <xsl:value-of select="key('get-lookup', 'uplift.picklist.str.morethanoneitem')" />
-          </qui:label>
-        </qui:link>
-      </xsl:if>
+      <xsl:choose>
+        <xsl:when test="//qui:panel[@slot='browse']//qui:link[@key]">
+          <xsl:for-each select="//qui:panel[@slot='browse']//qui:link[@key]">
+            <qui:link key="{@key}" href="{@href}">
+              <qui:label>
+                <xsl:value-of select="key('get-lookup', concat('uplift.str.page.', @key))" />
+              </qui:label>
+            </qui:link>
+          </xsl:for-each>
+        </xsl:when>
+        <xsl:when test="//CollectionIdno">
+          <qui:link key="picklist" href="/cgi/t/text/text-idx?cc={$collid};idno={//CollectionIdno}">
+            <qui:label>
+              <xsl:value-of select="key('get-lookup', 'uplift.picklist.str.morethanoneitem')" />
+            </qui:label>
+          </qui:link>
+        </xsl:when>
+      </xsl:choose>
       <xsl:for-each select="/Top/NavHeader/BrowseFields/Field">
         <qui:link href="{Link}" key="{Name}">
           <xsl:if test="Name = $current-browse-field">
diff --git a/templates/text/qui/qui.picklist.xsl b/templates/text/qui/qui.picklist.xsl
index 3042e75..f3e8d1d 100644
--- a/templates/text/qui/qui.picklist.xsl
+++ b/templates/text/qui/qui.picklist.xsl
@@ -99,13 +99,13 @@
         </xsl:choose>
       </xsl:variable>
 
-      <xsl:variable name="identifier" select="translate(ItemHeader/HEADER/FILEDESC/PUBLICATIONSTMT/IDNO[@TYPE='dlps'], 'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')" />
+      <xsl:variable name="identifier" select="translate(ItemHeader/HEADER/FILEDESC/PUBLICATIONSTMT/IDNO[@TYPE='dlps' or @TYPE='DLPS'], 'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')" />
 
       <qui:section type="item" identifier="{$identifier}" auth-required="{AuthRequired}" encoding-type="{$encoding-type}" encoding-level="{$item-encoding-level}">
         <qui:link rel="result" href="{Url}" />
         <qui:link rel="iiif" href="{$api_url}/cgi/t/text/api/image/{$collid}:{$identifier}:1/full/!250,250/0/default.jpg" />
-        <xsl:call-template name="build-item-metadata">
-          <xsl:with-param name="item" select="ItemHeader" />
+        <xsl:call-template name="build-header-metadata">
+          <xsl:with-param name="item" select="." />
           <xsl:with-param name="encoding-type" select="$encoding-type" />
           <xsl:with-param name="item-encoding-level" select="$item-encoding-level" />
           <xsl:with-param name="slot">metadata</xsl:with-param>
@@ -157,7 +157,7 @@
   </xsl:template>
 
   <xsl:template name="group-by-volume">
-    <qui:section type="volume" identifier="{IDNO[@TYPE='dlps']}">
+    <qui:section type="volume" identifier="{IDNO[@TYPE='dlps' or @TYPE='DLPS']}">
       <xsl:call-template name="build-volume-group" />
       <xsl:call-template name="iterate-issues" />  
     </qui:section>
@@ -199,7 +199,7 @@
         </xsl:choose>  
       </xsl:variable>
 
-      <qui:section type="issue" identifier="{IDNO[@TYPE='dlps']}">
+      <qui:section type="issue" identifier="{IDNO[@TYPE='dlps' or @TYPE='DLPS']}">
         <qui:link rel="issue" href="{Url}" />
         <qui:header>
           <qui:title>
diff --git a/templates/text/qui/qui.static.xsl b/templates/text/qui/qui.static.xsl
index 67d417c..80b431e 100644
--- a/templates/text/qui/qui.static.xsl
+++ b/templates/text/qui/qui.static.xsl
@@ -5,6 +5,9 @@
 
   <xsl:template name="get-title">
     <xsl:choose>
+      <xsl:when test="//PageTitle">
+        <xsl:value-of select="//PageTitle" />
+      </xsl:when>
       <xsl:when test="key('get-lookup', concat('uplift.str.page.', $current-page))">
         <xsl:value-of select="key('get-lookup', concat('uplift.str.page.', $current-page))" />
       </xsl:when>
@@ -24,6 +27,9 @@
     </qui:header>
 
     <xsl:call-template name="build-breadcrumbs" />
+
+    <xsl:call-template name="build-browse-navigation" />
+
     <xsl:call-template name="build-static-content" />
 
     <xsl:apply-templates select="//Navigation" />
@@ -42,6 +48,31 @@
     </xsl:if>
   </xsl:template>
 
+  <xsl:template name="build-browse-navigation">
+    <xsl:if test="//qui:panel[@slot='browse']//qui:link[@key]">
+      <qui:nav role="browse">
+        <xsl:for-each select="//qui:panel[@slot='browse']//qui:link[@key]">
+          <qui:link key="{@key}" href="{@href}">
+            <xsl:if test="//CurrentPage = @key">
+              <xsl:attribute name="current">true</xsl:attribute>
+            </xsl:if>
+            <qui:label>
+              <xsl:value-of select="key('get-lookup', concat('uplift.str.page.', @key))" />
+            </qui:label>
+          </qui:link>
+        </xsl:for-each>
+        <xsl:for-each select="/Top/NavHeader/BrowseFields/Field">
+          <qui:link href="{Link}" key="{Name}">
+            <qui:label>
+              <xsl:value-of select="key('get-lookup', concat('browse.str.', Name, '.column'))" />
+              <!-- <xsl:value-of select="dlxs:capitalize(Name)" /> -->
+            </qui:label>
+          </qui:link>
+        </xsl:for-each>
+      </qui:nav>
+    </xsl:if>    
+  </xsl:template>
+
   <xsl:template name="build-static-content">
     <qui:block slot="content" data-current-page="{$current-page}">
       <xsl:apply-templates select="//Content" mode="copy-guts" />
diff --git a/templates/text/staticincl.xml b/templates/text/staticincl.xml
index 22bcde5..e3b24d0 100644
--- a/templates/text/staticincl.xml
+++ b/templates/text/staticincl.xml
@@ -21,6 +21,8 @@
 
 <CurrentGroup><?CURRENT_GROUP_XML?></CurrentGroup>
  
+<?CHUNK filename="uplift.panels.xml" optional="1"?>
+
 <Footer>
   <?CHUNK filename="footer.xml"?>
 </Footer>