[BUG/FEAT] os team testing fixes/changes (#254)

* bookreader should default to single page if < 800px width #245 * fix header z-index dropdown issue in firefox #249 * update typeahead with search icon, fix padding around search filters for scrollbar overlap #251 * small style change to input/margin after chatting with Kimmy #251 * fix for main content clipping issue covering footer on mobile #243 * scroll to top of item page on ark/doi link click #253 * fix for tif image load breaking render in ff #252 * update main content minheight so it doesnt exceed shorter content (browse page, browse formats, etc) #243 * fix for mosaic tiles not rendering with correct heights #247 * bugfix for browse page heights #243 * change fast links to be search links #257 * update mailto link to just go to library profile #260 * remove margin-top on item description markdown element #263 * clip bottom of creator images #261 * style updates for mobile/shrink layout on home page #269 * bookreader render issue fix when position not in order/start at position 1 #256 #258 * fix for selected image thumbnail with imagelist #268 * fix for refresh page showing correct selected thumbnail #268 * bugfix for #268 * add fullscreen control to video #259 * fix download label/button heights to scale better in different resolutions #246 * update citation dropdown to be left aligned, style fix for toast copy message #248 * date filter styles #262
ucd-library · Nov 26, 2024 · 99c0bfc · 99c0bfc
1 parent 1dda701
commit 99c0bfc
Show file tree

Hide file tree

Showing 27 changed files with 260 additions and 149 deletions.
diff --git a/...ices/fin/ucd-lib-client/client/public/elements/components/bookreader/ucdlib-bookreader.js b/...ices/fin/ucd-lib-client/client/public/elements/components/bookreader/ucdlib-bookreader.js
@@ -338,8 +338,8 @@ export default class UcdlibBookreader extends Mixin(LitElement)
   _renderPageSizeSingle(readerHeight, readerWidth, page) {
     let realReaderHeight = readerHeight;
     this._setPageDimensions(readerHeight, readerWidth, page);
-    page.renderOffsetTop = (realReaderHeight*page.index)+this.pageBuffer;
-    page.renderOffsetTopForScroll = realReaderHeight*page.index;
+    page.renderOffsetTop = (realReaderHeight*page.displayIndex)+this.pageBuffer;
+    page.renderOffsetTopForScroll = realReaderHeight*page.displayIndex;
     page.renderOffsetLeft = 0;
 
     if( page.renderRatioDimension === 'width' ) {
@@ -360,7 +360,7 @@ export default class UcdlibBookreader extends Mixin(LitElement)
   _renderPageSizeDouble(readerHeight, readerWidth, page) {
     // even pages are on the right
     // odd pages are on the left 
-    let isRight = page.index % 2 === 0;
+    let isRight = page.displayIndex % 2 === 0;
 
     this._setPageDimensions(readerHeight, readerWidth/2, page);
     page.renderOffsetTop = Math.floor((readerHeight - page.renderHeight) / 2);

diff --git a/services/fin/ucd-lib-client/client/public/elements/components/citation.tpl.js b/services/fin/ucd-lib-client/client/public/elements/components/citation.tpl.js
@@ -77,6 +77,7 @@ return html`
       outline: 0;
       padding-right: 1.5rem;
       margin-right: .7rem;
+      text-align: left;
     }
 
     .cite-graphic {

diff --git a/...-lib-client/client/public/elements/components/sections/dams-highlighted-collection.tpl.js b/...-lib-client/client/public/elements/components/sections/dams-highlighted-collection.tpl.js
@@ -50,7 +50,7 @@ return html`
   .text-container {
     flex-grow: 1;
     align-self: flex-start;
-    padding: 2rem;
+    padding: 2rem 0;
   }
   .title {
     /* color: var(--color-h3);
@@ -92,6 +92,7 @@ return html`
     }
     .text-container {
       align-self: center;
+      padding: 2rem;
     }
   }
 

diff --git a/services/fin/ucd-lib-client/client/public/elements/fin-app.js b/services/fin/ucd-lib-client/client/public/elements/fin-app.js
@@ -117,7 +117,10 @@ export class FinApp extends Mixin(LitElement)
    * @method _onAppStateUpdate
    */
   async _onAppStateUpdate(e) {
-    if( e.location.page === 'browse' ) this._updateScrollPosition(e);
+    if( e.location.page === 'browse' ) {
+      this._updateViewHeight(e.location.page);
+      this._updateScrollPosition(e);
+    }
     if (e.location.page === this.currentPage) return;
 
     if( e.location.page !== 'browse' ) this._updateScrollPosition(e);
@@ -136,6 +139,8 @@ export class FinApp extends Mixin(LitElement)
     await this.loadedPages[page];
 
     this.page = page;
+    this._updateViewHeight();
+
     this.pathInfo = e.location.pathname.split('/media')[0];
 
     if( this.page === 'collection' ) {
@@ -177,6 +182,37 @@ export class FinApp extends Mixin(LitElement)
     });
   }
 
+  async _updateViewHeight(page=this.page) {
+    // main-content should be height of the selected page, or 100vh during page load (so footer is at bottom during latent load)
+    let mainContent = this.querySelector(".main-content");
+    if( !mainContent ) return;
+
+    let selectedPage = this.querySelector('ucdlib-pages').querySelector('#'+page);
+    await selectedPage.updateComplete;
+
+    if( page === 'browse' ) {
+      let browseByType = this.AppStateModel.location.path[1];
+      if( browseByType ) {
+        selectedPage = selectedPage.querySelector('#'+browseByType);
+      } else {
+        // browse landing page
+        let browseSection = selectedPage.querySelector('.browse-selection-section');
+        if( browseSection ) browseSection.removeAttribute('hidden');
+      }
+      if( selectedPage ) {
+        selectedPage.removeAttribute('hidden');
+        selectedPage.style.display = '';
+      }
+    }
+
+    if( selectedPage?.offsetHeight ) {
+      let height = selectedPage.offsetHeight;
+      mainContent.style.minHeight = height+'px';
+    } else {
+      mainContent.style.minHeight = '100vh';
+    }
+  }
+
   /**
    * @method loadPage
    * @description code splitting done here.  dynamic import a page based on route

diff --git a/services/fin/ucd-lib-client/client/public/elements/fin-app.tpl.js b/services/fin/ucd-lib-client/client/public/elements/fin-app.tpl.js
@@ -51,7 +51,6 @@ export default function render() {
 
       app-search-header {
         position: relative;
-        z-index: 2000;
       }
 
       .loading-dots {
@@ -127,81 +126,81 @@ export default function render() {
       </ucdlib-pages>
 
       <app-404 id="404" ?hidden="${this.page !== '404'}"></app-404>
+    </div>
 
-      <div class="footer site-frame">
-        <ucdlib-site-footer>
-          <ucdlib-site-footer-column header="Digital Collections">
-            <ul>
-              <li><a href="/browse/collections">Collections</a></li>
-              <li><a href="/search">Items</a></li>
-              <li><a href="/about">About Digital Collections</a></li>
-              <!-- <li><a href="">FAQ</a></li> -->
-            </ul>
-          </ucdlib-site-footer-column>
-          <ucdlib-site-footer-column header="Library Info">
-            <ul>
-              <li>
-                <a
-                  href="https://library.ucdavis.edu/special-collections/"
-                  target="_blank"
-                  rel="noopener"
-                  >Archives and Special Collections</a
-                >
-              </li>
-              <li>
-                <a
-                  href="https://library.ucdavis.edu/library/"
-                  target="_blank"
-                  rel="noopener"
-                  >Visit the Library</a
-                >
-              </li>
-              <li>
-                <a
-                  href="https://library.ucdavis.edu/news/"
-                  target="_blank"
-                  rel="noopener"
-                  >Library News</a
-                >
-              </li>
-              <li>
-                <a
-                  href="http://give.ucdavis.edu/ULIB"
-                  target="_blank"
-                  rel="noopener"
-                  >Give to the Library</a
-                >
-              </li>
-            </ul>
-          </ucdlib-site-footer-column>
-          <ucdlib-site-footer-column header="Account">
-            <ul>
-              <li><app-auth-footer></app-auth-footer></li>
-              <li class="fin-admin" ?hidden="${!this.isAdmin}">
-                <a href="/fin/admin/${this.pathInfo.length > 1 ? '#path-info' + this.pathInfo : ''}">Fin Admin</a>
-              </li>
-            </ul>
-          </ucdlib-site-footer-column>
-          <div insert-into="below-address" ?hidden="${this.showVersion}">
-            <div><b>Build Information</b></div>
-            <div>App Version: ${this.appVersion}</div>
-            <div>Build Time: ${this.localBuildTime}</div>
-            <div>Build Number: ${this.buildNum}</div>
-            <div>Client Env: ${this.clientEnv}</div>
-            <div>Fin App Version: ${this.finAppVersion}</div>
-            <div>Fin Branch Name: ${this.finBranchName}</div>
-            <div>Fin Repo Tag: ${this.finRepoTag}</div>
-            <div>Fin Server Image: ${this.finServerImage}</div>
-            <div>Fin Server Repo Hash: ${this.finServerRepoHash}</div>
-            <div>DAMS Deployment Branch: ${this.damsDeployBranch}</div>
-            <div>DAMS Deployment SHA: ${this.damsDeploySha}</div>
-            <div>DAMS Deployment Tag: ${this.damsDeployTag}</div>
-            <div>DAMS Repo Branch: ${this.damsRepoBranch}</div>
-            <div>DAMS Repo SHA: ${this.damsRepoSha}</div>
-            <div>DAMS Repo Tag: ${this.damsRepoTag}</div>
-          </div>
-        </ucdlib-site-footer>
-      </div>
+    <div class="footer site-frame">
+      <ucdlib-site-footer>
+        <ucdlib-site-footer-column header="Digital Collections">
+          <ul>
+            <li><a href="/browse/collections">Collections</a></li>
+            <li><a href="/search">Items</a></li>
+            <li><a href="/about">About Digital Collections</a></li>
+            <!-- <li><a href="">FAQ</a></li> -->
+          </ul>
+        </ucdlib-site-footer-column>
+        <ucdlib-site-footer-column header="Library Info">
+          <ul>
+            <li>
+              <a
+                href="https://library.ucdavis.edu/special-collections/"
+                target="_blank"
+                rel="noopener"
+                >Archives and Special Collections</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://library.ucdavis.edu/library/"
+                target="_blank"
+                rel="noopener"
+                >Visit the Library</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://library.ucdavis.edu/news/"
+                target="_blank"
+                rel="noopener"
+                >Library News</a
+              >
+            </li>
+            <li>
+              <a
+                href="http://give.ucdavis.edu/ULIB"
+                target="_blank"
+                rel="noopener"
+                >Give to the Library</a
+              >
+            </li>
+          </ul>
+        </ucdlib-site-footer-column>
+        <ucdlib-site-footer-column header="Account">
+          <ul>
+            <li><app-auth-footer></app-auth-footer></li>
+            <li class="fin-admin" ?hidden="${!this.isAdmin}">
+              <a href="/fin/admin/${this.pathInfo.length > 1 ? '#path-info' + this.pathInfo : ''}">Fin Admin</a>
+            </li>
+          </ul>
+        </ucdlib-site-footer-column>
+        <div insert-into="below-address" ?hidden="${this.showVersion}">
+          <div><b>Build Information</b></div>
+          <div>App Version: ${this.appVersion}</div>
+          <div>Build Time: ${this.localBuildTime}</div>
+          <div>Build Number: ${this.buildNum}</div>
+          <div>Client Env: ${this.clientEnv}</div>
+          <div>Fin App Version: ${this.finAppVersion}</div>
+          <div>Fin Branch Name: ${this.finBranchName}</div>
+          <div>Fin Repo Tag: ${this.finRepoTag}</div>
+          <div>Fin Server Image: ${this.finServerImage}</div>
+          <div>Fin Server Repo Hash: ${this.finServerRepoHash}</div>
+          <div>DAMS Deployment Branch: ${this.damsDeployBranch}</div>
+          <div>DAMS Deployment SHA: ${this.damsDeploySha}</div>
+          <div>DAMS Deployment Tag: ${this.damsDeployTag}</div>
+          <div>DAMS Repo Branch: ${this.damsRepoBranch}</div>
+          <div>DAMS Repo SHA: ${this.damsRepoSha}</div>
+          <div>DAMS Repo Tag: ${this.damsRepoTag}</div>
+        </div>
+      </ucdlib-site-footer>
     </div>
   `;
 }
diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/about/app-about.tpl.js b/services/fin/ucd-lib-client/client/public/elements/pages/about/app-about.tpl.js
@@ -124,7 +124,7 @@ export default function render() {
       <h4>Contact</h4>
       <div>
         <ul class="list--arrow">
-          <li><a href="mailto:eanebeker@ucdavis.edu">Eric A Nebeker</a> (Digital Assets Specialist)</li>
+          <li><a href="https://www.library.ucdavis.edu/person/eric-nebeker">Eric A Nebeker</a> (Digital Assets Specialist)</li>
         </ul>
       </div>
       

diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/browse/app-browse.tpl.js b/services/fin/ucd-lib-client/client/public/elements/pages/browse/app-browse.tpl.js
@@ -20,7 +20,7 @@ export default function render() {
       }
 
       .vertical-link--circle .vertical-link__figure:after {
-        opacity: 1;
+        opacity: 1 !important;
       }
 
       /* STYLES BELOW ARE ACTUALLY USED. NEED TO AUDIT ANYTHING ABOVE */
@@ -90,7 +90,7 @@ export default function render() {
       }
     </style>
 
-    <div ?hidden="${this.page !== "/browse"}">
+    <div class="browse-selection-section" ?hidden="${this.page !== "/browse"}">
       <div class="title-section">
         <h1>Browse<br /><span class="fw-light">Digital Collections</span></h1>
       </div>

diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/collection/app-collection.tpl.js b/services/fin/ucd-lib-client/client/public/elements/pages/collection/app-collection.tpl.js
@@ -557,8 +557,7 @@ export default function render() {
         <span class="collection-label">Subjects: </span> 
           ${this.subjects.map(
             (about, index) =>
-              html`${index > 0 ? ", " : ""}<a href="${about["@id"]}"
-                  >${about["name"] || about["@id"]}</a>`
+              html`${index > 0 ? ", " : ""}<a href="${utils.getSubjectUrl(this.RecordModel, about["name"] || about["@id"])}">${about["name"] || about["@id"]}</a>`
           )}
       </div>
       <div style="margin-bottom: .4rem;" ?hidden="${!this.material}">

diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js b/services/fin/ucd-lib-client/client/public/elements/pages/home/app-home.tpl.js
@@ -458,9 +458,15 @@ export default function render() {
       float: none;
       padding: none;
     }    
+    .fg-header.centered {
+      display: block;
+      width: 100%;
+      margin: initial;
+      text-align: left
+    }
   }
   .about-content {
-    padding: 0 2rem 2rem 2rem;
+    padding: 0 5% 2rem 5%;
   }
 
   @media (min-width: 768px) {
@@ -523,7 +529,7 @@ export default function render() {
   }
 
   .about-content {
-    padding-right: 2rem;
+    /* padding-right: 2rem; */
     margin: auto;
   }
 

diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/record/app-media-download.tpl.js b/services/fin/ucd-lib-client/client/public/elements/pages/record/app-media-download.tpl.js
@@ -108,30 +108,23 @@ export default function render() {
         align-items: center;
       }
 
-      .layout.btns > * {
-        max-width: 30%;
-      }
-
       .radio {
         margin-bottom: 10px;
       }
 
       .downloadBtn {
         padding: 13px 0;
         font-size: 0.9rem;
-        min-width: 6rem;
+        width: 6rem;
         text-transform: none;
+        height: 1.5rem;
       }
 
       .downloadBtn:hover {
         background-color: var(--color-aggie-blue);
         color: var(--color-aggie-gold);
       }
 
-      .downloadBtn.archive {
-        width: 115px;
-      }
-
       #format {
         height: 50px;
         background-color: var(--color-aggie-blue-50);
@@ -150,13 +143,11 @@ export default function render() {
         font-weight: bold;
         padding: 11px 1rem;
         border: solid 2px var(--color-aggie-blue-50);
+        height: 1.5rem;
+        white-space: nowrap;
       }
 
       @media (max-width: 600px) {
-        .layout.btns > * {
-          width: 33%;
-          max-width: 33%;
-        }
         .downloadBtn {
           min-width: auto;
           text-overflow: clip;

diff --git a/services/fin/ucd-lib-client/client/public/elements/pages/record/app-record.js b/services/fin/ucd-lib-client/client/public/elements/pages/record/app-record.js
@@ -198,6 +198,13 @@ class AppRecord extends Mixin(LitElement)
     await this._parseDisplayData();
   }
 
+  _arkDoiClick(e) {
+    e.preventDefault();
+
+    history.pushState(null, '', e.target.getAttribute('href'));
+    window.scrollTo(0, 0);
+  }
+
   _updateSlimStyles() {
     let select = this.querySelector('ucd-theme-slim-select');
     if( !select ) return;