Emergency Banner with JavaScript

Developer

Blake Galbreath, Washington State University

Description

Adds an emergency alert bar under the Primo search box that allows the inclusion of links.

Emergency banner in WSU's Primo.

System Components

PBO, Package Manager

Skillset Requirements

PBO, JavaScript, and CSS

Accessibility

Has not been tested for accessibility.

Browser Support

Tested on Chrome and Firefox.

Mobile Support

Tested on iPhone.

Implementation

  1. In the custom.js file, add the following line of code within the anonymous function (that is, before the closing brackets at the end of the file):

    app.component('prmSearchBarAfter', {
    template: '<br/><hr/><p style="text-align: center; font-size: 20px; color: white;">ADD EMERGENCY MESSAGE HERE <a href="https://www.orbiscascade.org/" style="color:#fff; text-decoration:underline">ADD LINK TEXT HERE</a> for more information.</p><hr/>'
    });
  2. Be sure to edit “ADD EMERGENCY MESSAGE HERE”, https://www.orbiscascade.org/, and “ADD LINK TEXT HERE” with the content you want.
  3. In your local package, in the custom1.css file, add the following CSS to avoid issues with advanced search displays.

    /* Fix Non-Chrome Search Bar pushing prmSearchBarAfter */
    prm-search-bar .layout-fill {
    min-height: initial;
    height: initial;
    }

    /* Clear Advanced Search Screen Backdrop */
    prm-search-bar .advanced-search-backdrop {
    background-color: transparent;
    }
  4. Zip and upload your package in the PBO.
  5. Deploy your view.