hyrax 3.4.2 → 4.0.0.beta2

data/app/assets/javascripts/hyrax/batch_edit.js

@@ -9,7 +9,7 @@ function batch_edit_init () {
             var key = Pair[0];
             var val = Pair[1];
             if (Result[key] != null) {
-                if(!$.isArray(Result[key])) Result[key] = [Result[key]];
+                if(!Array.isArray(Result[key])) Result[key] = [Result[key]];
                 Result[key].push(val);
             } else
                 Result[key] = val;
@@ -159,9 +159,9 @@ function batch_edit_init () {
         setTimeout(ajaxManager.runNow(), 100);
     }
 
-    $("#permissions_visibility_save").click(runSave);
-    $("#permissions_roles_save").click(runSave);
-    $(".field-save").click(runSave);
+    $("#permissions_visibility_save").on('click', runSave);
+    $("#permissions_roles_save").on( 'click', runSave);
+    $(".field-save").on('click', runSave);
 }
 
 Blacklight.onLoad(function() {

data/app/assets/javascripts/hyrax/batch_select_all.js

@@ -5,12 +5,12 @@
     var n = $(".batch_document_selector:checked").length;
     if ((n>0) || (forceOn)) {
         $('.batch-toggle').show();
-        $('.batch-select-all').removeClass('hidden');
-        $('#batch-edit').removeClass('hidden');
-    } else if ( otherPage){
+        $('.batch-select-all').removeAttr("hidden");
+        $('#batch-edit').removeAttr("hidden");
+    } else if (otherPage){
         $('.batch-toggle').hide();
-        $('.batch-select-all').addClass('hidden');
-        $('#batch-edit').addClass('hidden');
+        $('.batch-select-all').attr("hidden", "");
+        $('#batch-edit').attr("hidden", "");
     }
     $("body").css("cursor", "auto");
   }
@@ -26,10 +26,10 @@
   function toggleStateBool (obj, state) {
     if (state){
       obj.attr("data-state", 'on');
-      obj.find('a i').addClass('glyphicon glyphicon-ok');
+      obj.find('a i').addClass('fa fa-check');
     }else {
       obj.attr("data-state", 'off');
-      obj.find('a i').removeClass('glyphicon glyphicon-ok');
+      obj.find('a i').removeClass('fa fa-check');
     }
 
   }
@@ -62,22 +62,22 @@
 
 Blacklight.onLoad(function() {
   // check the select all page cog menu item and select the entire page
-  $("[data-behavior='batch-edit-select-page']").bind('click', function(e) {
+  $("[data-behavior='batch-edit-select-page']").on('click', function(e) {
     e.preventDefault();
     select_page(true);
   });
 
   // check the select none cog menu item and de-select the entire page
-  $("[data-behavior='batch-edit-select-none']").bind('click', function(e) {
+  $("[data-behavior='batch-edit-select-none']").on('click', function(e) {
     e.preventDefault();
     select_page(false);
   });
 
   // check all check boxes
-  $("#check_all").bind('click', check_all_page);
+  $("#check_all").on('click', check_all_page);
   
   // select/deselect all check boxes 
-  $("#checkAllBox").change(function () {
+  $("#checkAllBox").on('change', function () {
     $("input:checkbox").prop('checked', $(this).prop("checked"));
   });
 
@@ -87,12 +87,12 @@ Blacklight.onLoad(function() {
   });
 
   // toggle button on or off based on boxes being clicked
-  $(".batch_document_selector").bind('click', function(e) {
+  $(".batch_document_selector").on('click', function(e) {
      toggleButtons();
   });
 
   // toggle the state of the select boxes in the cog menu if all buttons are
-  $(".batch_document_selector").bind('click', function(e) {
+  $(".batch_document_selector").on('click', function(e) {
 
       // count the check boxes currently checked
       var selectedCount = $(".batch_document_selector:checked").length;

data/app/assets/javascripts/hyrax/browse_everything.js

@@ -2,7 +2,7 @@
 //= require browse_everything/behavior
 
 // Show the files in the queue
-Blacklight.onLoad( function() {
+function showBrowseEverythingFiles() {
   // We need to check this because https://github.com/samvera/browse-everything/issues/169
   if ($('#browse-btn').length > 0) {
     $('#browse-btn').browseEverything()
@@ -12,4 +12,6 @@ Blacklight.onLoad( function() {
       $.blueimp.fileupload.prototype.options.done.call($('#fileupload').fileupload(), evt, { result: { files: files }});
     })
   }
-});
+}
+$(document).on('click', '#browse-btn', showBrowseEverythingFiles);
+

data/app/assets/javascripts/hyrax/collection_types.es6

@@ -86,7 +86,7 @@ export default class CollectionTypes {
             .remove();
           let defaultButton = $(event.target)
             .parent('div')
-            .find('.btn-default');
+            .find('.btn-secondary');
           defaultButton.trigger('click');
         }
       });

data/app/assets/javascripts/hyrax/collections/editor.es6

@@ -15,8 +15,12 @@ export default class {
   }
 
   url() {
-    let urlParts = window.location.pathname.split("/")
+    let urlParts = this.pathname().split("/")
     urlParts[urlParts.length - 1] = "files"
     return urlParts.join("/") 
   }
+
+  pathname() {
+    return window.location.pathname
+  }
 }

data/app/assets/javascripts/hyrax/dashboard_actions.js

@@ -1,6 +1,6 @@
 Blacklight.onLoad(function() {
   // toggle button on or off based on boxes being clicked
-  $(".batch_document_selector, .batch_document_selector_all").bind('click', function(e) {
+  $(".batch_document_selector, .batch_document_selector_all").on('click', function(e) {
     var n = $(".batch_document_selector:checked").length;
     if (n>0 || ($('input#check_all').length && $('input#check_all')[0].checked)) {
       $('.sort-toggle').hide();
@@ -14,21 +14,21 @@ Blacklight.onLoad(function() {
     if (array.length > 1) {
       var docId = array[1];
       $("#detail_" + docId + " .expanded-details").slideToggle();
-      $(item).toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
+      $(item).toggleClass('fa-chevron-right fa-chevron-down');
     }
   }
 
   // show/hide more information on the dashboard when clicking
   // plus/minus
-  $('.glyphicon-chevron-right').on('click', function() {
+  $('.fa-chevron-right').on('click', function() {
     show_details(this);
     return false;
   });
 
   $('a').filter( function() {
-      return $(this).find('.glyphicon-chevron-right').length === 1;
+      return $(this).find('.fa-chevron-right').length === 1;
    }).on('click', function() {
-    show_details($(this).find(".glyphicon-chevron-right")[0]);
+    show_details($(this).find(".fa-chevron-right")[0]);
     return false;
   });
 

data/app/assets/javascripts/hyrax/editor/controlled_vocabulary.es6

@@ -1,4 +1,4 @@
-//= require handlebars-v4.0.5
+//= require handlebars
 
 import { FieldManager } from 'hydra-editor/field_manager'
 import Handlebars from 'handlebars'
@@ -19,10 +19,10 @@ export default class ControlledVocabulary extends FieldManager {
         listClass:         '.listing',
         inputTypeClass:    '.controlled_vocabulary',
 
-        addHtml:           '<button type=\"button\" class=\"btn btn-link add\"><span class=\"glyphicon glyphicon-plus\"></span><span class="controls-add-text"></span></button>',
+        addHtml:           '<button type=\"button\" class=\"btn btn-link add\"><span class=\"fa fa-plus\"></span><span class="controls-add-text"></span></button>',
         addText:           'Add another',
 
-        removeHtml:        '<button type=\"button\" class=\"btn btn-link remove\"><span class=\"glyphicon glyphicon-remove\"></span><span class="controls-remove-text"></span> <span class=\"sr-only\"> previous <span class="controls-field-name-text">field</span></span></button>',
+        removeHtml:        '<button type=\"button\" class=\"btn btn-link remove\"><span class=\"fa fa-minus\"></span><span class="controls-remove-text"></span> <span class=\"sr-only\"> previous <span class="controls-field-name-text">field</span></span></button>',
         removeText:         'Remove',
 
         labelControls:      true,

data/app/assets/javascripts/hyrax/editor.es6

@@ -31,7 +31,7 @@ export default class {
   // Immediate feedback after work creation, editing.
   formInProgress() {
     $('[data-behavior~=work-form]').on('submit', function(event){
-      $('.panel-footer').toggleClass('hidden');
+      $('.card-footer.save-progress').removeAttr("hidden");
     });
   }
   
@@ -82,9 +82,9 @@ export default class {
 
   sharingTabVisiblity(visible) {
       if (visible)
-         this.sharingTabElement.removeClass('hidden')
+         this.sharingTabElement.removeAttr("hidden")
       else
-         this.sharingTabElement.addClass('hidden')
+         this.sharingTabElement.attr("hidden","")
   }
 
   relationshipsControl() {

data/app/assets/javascripts/hyrax/facets.js

@@ -1,14 +1,16 @@
 Blacklight.onLoad(function() {
+  $(".facets-header button").find("span").addClass("fa fa-bars");
+  
   /*
    * facets lists
    */
-  $("li.expandable").click(function(){
+  $("li.expandable").on("click", function() {
     $(this).next("ul").slideToggle();
-    $(this).find('i').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
+    $(this).find('i').toggleClass("fa-chevron-right fa-chevron-down");
   });
 
-  $("li.expandable_new").click(function(){
-    $(this).find('i').toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
+  $("li.expandable_new").on("click", function() {
+    $(this).find('i').toggleClass("fa-chevron-right fa-chevron-down");
   });
 
 }); //end of Blacklight.onload

data/app/assets/javascripts/hyrax/file_manager/member.es6

@@ -10,7 +10,7 @@ export class InputTracker {
     this.notifier = notifier
     this.element.data("initial-value", this.element.val())
     this.element.data("tracker", this)
-    this.element.change(this.value_changed)
+    this.element.trigger("change", this.value_changed)
   }
 
   reset() {

data/app/assets/javascripts/hyrax/file_manager/save_manager.es6

@@ -6,7 +6,7 @@ export default class SaveManager {
 
   override_save_button() {
     Blacklight.onLoad(() => {
-      this.save_button.click(this.clicked_save)
+      this.save_button.on('click', this.clicked_save)
     })
   }
 
@@ -24,7 +24,7 @@ export default class SaveManager {
   }
 
   check_button() {
-    if(this.is_changed && this.save_button.selector.valueOf("data-action") === "*[data-action='save-actions']") {
+    if (this.is_changed) {
       this.save_button.removeClass("disabled")
     } else {
       this.save_button.addClass("disabled")

data/app/assets/javascripts/hyrax/file_manager/sorting.es6

@@ -9,7 +9,7 @@ export default class SortManager {
   }
 
   initialize_sort() {
-    this.element.sortable({handle: ".panel-heading"})
+    this.element.sortable({handle: ".card-header"})
     this.element.on("sortstop", this.stopped_sorting)
     this.element.on("sortstart", this.started_sorting)
   }
@@ -104,7 +104,7 @@ export default class SortManager {
 
   initialize_alpha_sort_button() {
     let that = this
-    this.alpha_sort_button.click(function() { that.sort_alpha() } )
+    this.alpha_sort_button.on("click", function() { that.sort_alpha() } )
   }
 
   sort_alpha() {

data/app/assets/javascripts/hyrax/file_manager.es6

@@ -5,7 +5,6 @@ export default class FileManager {
   constructor() {
     this.save_manager = this.initialize_save_manager()
     this.sorting()
-    this.save_affix()
     this.member_tracking()
     this.sortable_placeholder()
     this.resource_form()
@@ -19,20 +18,6 @@ export default class FileManager {
     window.new_sort_manager = new SortManager(this.save_manager)
   }
 
-  save_affix() {
-    let tools = $("#file-manager-tools")
-    if(tools.length > 0) {
-      tools.affix({
-        offset: {
-          top: $("#file-manager-tools .actions").offset().top,
-          bottom: function() {
-            return $("#file-manager-extra-tools").outerHeight(true) + $("footer").outerHeight(true)
-          }
-        }
-      })
-    }
-  }
-
   member_tracking() {
     let sm = this.save_manager
     $("li[data-reorder-id]").each(function(index, element) {
@@ -51,13 +36,13 @@ export default class FileManager {
     $("#resource-form").parent().data("file_manager_member", manager)
     // Track thumbnail ID hidden field
     new InputTracker($("*[data-member-link=thumbnail_id]"), manager)
-    $("#sortable *[name=thumbnail_id]").change(function() {
+    $("#sortable *[name=thumbnail_id]").on("change", function() {
       let val = $("#sortable *[name=thumbnail_id]:checked").val()
       $("*[data-member-link=thumbnail_id]").val(val)
       $("*[data-member-link=thumbnail_id]").change()
     })
     new InputTracker($("*[data-member-link=representative_id]"), manager)
-    $("#sortable *[name=representative_id]").change(function() {
+    $("#sortable *[name=representative_id]").on("change", function() {
       let val = $("#sortable *[name=representative_id]:checked").val()
       $("*[data-member-link=representative_id]").val(val)
       $("*[data-member-link=representative_id]").change()

data/app/assets/javascripts/hyrax/notification.es6

@@ -19,7 +19,7 @@ export default class Notification {
     }
     else {
       this.counter.removeClass('invisible')
-      this.counter.addClass('label-danger').removeClass('label-default')
+      this.counter.addClass('badge-danger').removeClass('badge-secondary')
     }
   }
 }

data/app/assets/javascripts/hyrax/permissions/control.es6

@@ -1,6 +1,7 @@
 import { Registry } from './registry'
 import { UserControls } from './user_controls'
 import { GroupControls } from './group_controls'
+import VisibilityComponent from '../save_work/visibility_component'
 
 export default class PermissionsControl {
   /**
@@ -8,7 +9,8 @@ export default class PermissionsControl {
    * @param {jQuery} element the jquery selector for the permissions container
    * @param {String} template_id the identifier of the template for the added elements
    */
-  constructor(element, template_id) {
+  constructor(element, template_id, options = {}) {
+    const { with_visibility_component } = options
     if (element.length === 0) {
       return
     }
@@ -17,6 +19,11 @@ export default class PermissionsControl {
     this.registry = new Registry(this.element, this.object_name(), template_id)
     this.user_controls = new UserControls(this.element, this.registry)
     this.group_controls = new GroupControls(this.element, this.registry)
+    if (with_visibility_component) {
+      this.visibility_component = new VisibilityComponent(this.element)
+    } else {
+      this.visibility_component = null
+    }
   }
 
   // retrieve object_name the name of the object to create

data/app/assets/javascripts/hyrax/permissions/registry.es6

@@ -20,18 +20,18 @@ export class Registry {
 
   addError(message) {
     this.errorMessage.html(message);
-    this.error.removeClass('hidden');
+    this.error.removeAttr("hidden");
   }
 
   reset() {
-    this.error.addClass('hidden');
+    this.error.attr("hidden", "");
   }
 
   removePermission(evt) {
      evt.preventDefault();
      let button = $(evt.target);
      let container = button.closest('tr');
-     container.addClass('hidden'); // do not show the block
+     container.attr("hidden", ""); // do not show the block
      this.addDestroyField(container, button.attr('data-index'));
      this.showPermissionNote();
   }
@@ -47,7 +47,7 @@ export class Registry {
   }
 
   showPermissionNote() {
-     $('#save_perm_note').removeClass('hidden');
+     $('#save_perm_note').removeAttr("hidden");
   }
 
   addDestroyField(element, index) {

data/app/assets/javascripts/hyrax/permissions/user_controls.es6

@@ -51,7 +51,9 @@ export class UserControls {
   }
 
   userName() {
-    return this.userField.val()
+    if (this.userField.select2('data')) {
+      return this.userField.select2('data').text
+    }
   }
 
   addError(message) {

data/app/assets/javascripts/hyrax/relationships/confirm_remove_dialog.es6

@@ -25,7 +25,7 @@ export default class ConfirmRemoveDialog {
               <div class="modal-content">
               <div class="modal-body">${this.text}</div>
               <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">${this.cancel}</button>
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">${this.cancel}</button>
                 <button type="button" class="btn btn-danger" data-behavior="submit">${this.remove}</button>
               </div>
               </div>

data/app/assets/javascripts/hyrax/relationships/control.es6

@@ -86,13 +86,13 @@ export default class RelationshipsControl {
    * @param {String} message the warning message text to set
    */
   setWarningMessage(message) {
-    this.warning.text(message).removeClass("hidden");
+    this.warning.text(message).hidden= false;
   }
 
   /**
    * Hide the warning message on the appropriate row
    */
   hideWarningMessage(){
-    this.warning.addClass("hidden");
+    this.warning.hidden= true;
   }
 }

data/app/assets/javascripts/hyrax/relationships/registry_entry.es6

@@ -38,7 +38,7 @@ export default class RegistryEntry {
     removeResource(evt) {
        evt.preventDefault();
        let button = $(evt.target);
-       this.view.addClass('hidden'); // do not show the block
+       this.view.attr("hidden", ""); // do not show the block
        this.destroyed = true
        this.registry.showSaveNote();
     }

data/app/assets/javascripts/hyrax/reports-buttons.js

@@ -5,29 +5,29 @@ Blacklight.onLoad(function() {
 
   $('#monthly-btn').on('click', function() {
     $(this).addClass('btn-primary');
-    $(this).removeClass('btn-default');
+    $(this).removeClass('btn-secondary');
     summaryButton.removeClass('btn-primary');
-    summaryButton.addClass('btn-default');
+    summaryButton.addClass('btn-secondary');
     rangeButton.removeClass('btn-primary');
-    rangeButton.addClass('btn-default');
+    rangeButton.addClass('btn-secondary');
   });
 
   $('#summary-btn').on('click', function() {
     
     $(this).addClass('btn-primary');
-    $(this).removeClass('btn-default');
+    $(this).removeClass('btn-secondary');
     monthlyButton.removeClass('btn-primary');
-    monthlyButton.addClass('btn-default');
+    monthlyButton.addClass('btn-secondary');
     rangeButton.removeClass('btn-primary');
-    rangeButton.addClass('btn-default');
+    rangeButton.addClass('btn-secondary');
   });
 
   $('#range-btn').on('click', function() {
     $(this).addClass('btn-primary');
-    $(this).removeClass('btn-default');
+    $(this).removeClass('btn-secondary');
     monthlyButton.removeClass('btn-primary');
-    monthlyButton.addClass('btn-default');
+    monthlyButton.addClass('btn-secondary');
     summaryButton.removeClass('btn-primary');
-    summaryButton.addClass('btn-default');
+    summaryButton.addClass('btn-secondary');
   });
 });

data/app/assets/javascripts/hyrax/save_work/required_fields.es6

@@ -18,6 +18,6 @@ export class RequiredFields {
   reload() {
     // ":input" matches all input, select or textarea fields.
     this.requiredFields = this.form.find(':input[required]')
-    this.requiredFields.change(this.callback)
+    this.requiredFields.on('change', this.callback)
   }
 }

data/app/assets/javascripts/hyrax/save_work/save_work_control.es6

@@ -99,12 +99,12 @@ export default class SaveWorkControl {
     let $uploadsEl = this.uploads.element;
     const $cancelBtn = this.uploads.form.find('#file-upload-cancel-btn');
 
-    $uploadsEl.bind('fileuploadstart', () => {
-      $cancelBtn.removeClass('hidden');
+    $uploadsEl.on('fileuploadstart', () => {
+      $cancelBtn.hidden = false;
     });
 
-    $uploadsEl.bind('fileuploadstop', () => {
-      $cancelBtn.addClass('hidden');
+    $uploadsEl.on('fileuploadstop', () => {
+      $cancelBtn.hidden = true;
     });
   }
 
@@ -116,8 +116,8 @@ export default class SaveWorkControl {
 
   // If someone adds or removes a field on a multivalue input, fire a formChanged event.
   watchMultivaluedFields() {
-      $('.multi_value.form-group', this.form).bind('managed_field:add', () => this.formChanged())
-      $('.multi_value.form-group', this.form).bind('managed_field:remove', () => this.formChanged())
+      $('.multi_value.form-group', this.form).on('managed_field:add', () => this.formChanged())
+      $('.multi_value.form-group', this.form).on('managed_field:remove', () => this.formChanged())
   }
 
   // Called when a file has been uploaded, the deposit agreement is clicked or a form field has had text entered.

data/app/assets/javascripts/hyrax/save_work/uploaded_files.es6

@@ -3,8 +3,8 @@ export class UploadedFiles {
   constructor(form, callback) {
     this.form = form
     this.element = $('#fileupload')
-    this.element.bind('fileuploadcompleted', callback)
-    this.element.bind('fileuploaddestroyed', callback)
+    this.element.on('fileuploadcompleted', callback)
+    this.element.on('fileuploaddestroyed', callback)
   }
 
   get hasFileRequirement() {

data/app/assets/javascripts/hyrax/single_use_links_manager.js

@@ -26,7 +26,7 @@
       }
     };
 
-    $('.generate-single-use-link').click(function(event) {
+    $('.generate-single-use-link').on('click', function(event) {
       event.preventDefault()
       manager.create_link($(this))
       return false

data/app/assets/javascripts/hyrax/skip_to_content.js

@@ -1,7 +1,7 @@
 // This code is to implement skip_to_content
 
 Blacklight.onLoad(function () {
-  $(".skip-to-content").click(function(event) {
+  $(".skip-to-content").on('click', function(event) {
     event.preventDefault();
     // element to focus on
     var skipTo = '#' + $(this)[0].firstElementChild.hash.split('#')[1];

data/app/assets/javascripts/hyrax/sorting.js

@@ -4,7 +4,7 @@ Blacklight.onLoad(function() {
 	 itag.toggleClass("caret up");
   }
 
-  $(".sorts").click(function(){
+  $(".sorts").on("click", function(){
     var itag =$(this).find('i');
     toggle_icon(itag);
     sort = itag.attr('class') == "caret" ? itag.attr('id') + ' desc' :  itag.attr('id');

data/app/assets/javascripts/hyrax/trophy.js

@@ -39,7 +39,7 @@ function setAnchorAttrs(anchor, title, data) {
 
 Blacklight.onLoad( function() {
   // #this method depends on a "current_user" global variable having been set.
-  $('.trophy-class').click(function(evt){
+  $('.trophy-class').on("click", function(evt){
     evt.preventDefault();
     anchor = $(this);
     toggleTrophy(anchor.data('url'), anchor);

data/app/assets/javascripts/hyrax/uploader.js

@@ -31,11 +31,11 @@
         type: 'POST',
         dropZone: $(this).find('.dropzone')
       }, Hyrax.config.uploader, options))
-      .bind('fileuploadadded', function (e, data) {
-        $(e.currentTarget).find('button.cancel').removeClass('hidden');
+      .on('fileuploadadded', function (e, data) {
+        $(e.currentTarget).find('button.cancel').removeAttr("hidden");
       });
 
-      $(document).bind('dragover', function(e) {
+      $(document).on('dragover', function(e) {
         var dropZone = $('.dropzone'),
             timeout = window.dropZoneTimeout;
         if (!timeout) {

data/app/assets/javascripts/hyrax.js

@@ -1,23 +1,5 @@
-//= require jquery-ui/core
-//= require jquery-ui/widget
-//= require jquery-ui/widgets/menu
-//= require jquery-ui/widgets/autocomplete
-//= require jquery-ui/position
-//= require jquery-ui/effect
-//= require jquery-ui/effects/effect-highlight
-//= require jquery-ui/widgets/sortable
+//= require jquery-ui
 
-//= require bootstrap/alert
-//= require bootstrap/button
-//= require bootstrap/collapse
-//= require bootstrap/dropdown
-//= require bootstrap/modal
-//= require bootstrap/tooltip
-// Popover requires that tooltip be loaded first
-//= require bootstrap/popover
-//= require bootstrap/tab
-// Affix is used for the file manager
-//= require bootstrap/affix
 
 //= require select2
 //= require fixedsticky

data/app/assets/stylesheets/_bootstrap-default-overrides.scss

@@ -1,8 +1,8 @@
 // Brand colors
-$brand-danger: #d33a35 !default;
-$brand-success: #387f38 !default;
-$brand-info: #2c76c7 !default;
-$brand-warning: #565653 !default;
+$danger: #d33a35 !default;
+$success: #387f38 !default;
+$info: #2c76c7 !default;
+$warning: #565653 !default;
 
 // Overrides for accessibility compliance
 // Testing: WAVE evaluation tool: http://wave.webaim.org/

data/app/assets/stylesheets/hyrax/_accessibility.scss

@@ -33,5 +33,5 @@
   position: absolute;
   top: 0.5rem;
   width: auto;
-  z-index: 1005;
+  z-index: 99999; // always display on top
 }