diff --git a/client/galaxy/scripts/layout/menu.js b/client/galaxy/scripts/layout/menu.js index 416e3e5dc963..b1f82ae02d6a 100644 --- a/client/galaxy/scripts/layout/menu.js +++ b/client/galaxy/scripts/layout/menu.js @@ -443,7 +443,7 @@ var Tab = Backbone.View.extend({ } } else { if (this.$link.popover) { - this.$link.popover("destroy"); + this.$link.popover("dispose"); } this.$link .popover({ @@ -456,8 +456,8 @@ var Tab = Backbone.View.extend({ }) .popover("show"); window.setTimeout(() => { - this.$link.popover("destroy"); - }, 5000); + this.$link.popover("dispose"); + }, 3000); } }, diff --git a/client/galaxy/scripts/mvc/ui/ui-popover.js b/client/galaxy/scripts/mvc/ui/ui-popover.js index bdfedb49e002..e5aeb042906b 100644 --- a/client/galaxy/scripts/mvc/ui/ui-popover.js +++ b/client/galaxy/scripts/mvc/ui/ui-popover.js @@ -43,7 +43,7 @@ var View = Backbone.View.extend({ this.$title.html(this.options.title); this.$el .removeClass() - .addClass("ui-popover popover fade in") + .addClass("ui-popover popover in") .addClass(this.options.placement); this.$el.css(this._get_placement(this.options.placement)); diff --git a/client/galaxy/style/scss/ui.scss b/client/galaxy/style/scss/ui.scss index d57afc5ea7ad..58f0227ea823 100644 --- a/client/galaxy/style/scss/ui.scss +++ b/client/galaxy/style/scss/ui.scss @@ -105,6 +105,7 @@ $ui-margin-horizontal-large: 10px; .ui-modal { display: none; + overflow: auto; .modal-header.no-separator { border: none !important; padding-bottom: 0px !important; @@ -724,11 +725,6 @@ $ui-margin-horizontal-large: 10px; .popover-content { padding: 0.6em 1rem; } -} - -.popover { - text-align: left; - white-space: normal; .arrow { border-width: 0.68rem; } @@ -736,54 +732,53 @@ $ui-margin-horizontal-large: 10px; border-width: 0.68rem; content: ""; } -} - -.popover .arrow, -.popover .arrow::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-bottom-color: transparent; - border-style: solid; -} - -.popover.bottom { - .arrow { - left: 50%; - margin-left: -0.65rem; - border-top-width: 0; - border-bottom-color: #999; - border-bottom-color: rgba(0, 0, 0, 0.25); - top: -0.72rem; - } + .arrow, .arrow::after { - content: " "; - top: 0.05rem; - margin-left: -0.6rem; - border-top-width: 0; - border-bottom-color: #ffffff; - } -} + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-bottom-color: transparent; + border-style: solid; + } + &.bottom { + .arrow { + left: 50%; + margin-left: -0.65rem; + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, 0.25); + top: -0.72rem; + } + + .arrow::after { + content: " "; + top: 0.05rem; + margin-left: -0.6rem; + border-top-width: 0; + border-bottom-color: #ffffff; + } -.popover.top { - margin-top: -0.6rem; - .arrow { - left: 50%; - margin-left: -0.65rem; - border-width: 0.4rem; - border-bottom-width: 0; - border-top-color: #999; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -0.65rem; } - .arrow::after { - content: " "; - bottom: 0.05rem; - margin-left: -0.6rem; - border-bottom-width: 0; - border-top-color: #ffffff; + &.top { + margin-top: -0.6rem; + .arrow { + left: 50%; + margin-left: -0.65rem; + border-width: 0.4rem; + border-bottom-width: 0; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, 0.25); + bottom: -0.65rem; + } + .arrow::after { + content: " "; + bottom: 0.05rem; + margin-left: -0.6rem; + border-bottom-width: 0; + border-top-color: #ffffff; + } } } diff --git a/static/style/blue/base.css b/static/style/blue/base.css index c35abe1cf59c..7ea427638a2b 100644 --- a/static/style/blue/base.css +++ b/static/style/blue/base.css @@ -10316,7 +10316,8 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close { word-wrap: break-word; } .ui-modal, .ui-modal-styled { - display: none; } + display: none; + overflow: auto; } .ui-modal .modal-header.no-separator, .ui-modal-styled .modal-header.no-separator { border: none !important; padding-bottom: 0px !important; } @@ -10773,57 +10774,49 @@ html[dir="rtl"] .select2-container-multi .select2-search-choice-close { border-radius: 0.25rem 0.25rem 0 0; } .ui-popover .popover-content { padding: 0.6em 1rem; } - -.popover { - text-align: left; - white-space: normal; } - .popover .arrow { + .ui-popover .arrow { border-width: 0.68rem; } - .popover .arrow::after { + .ui-popover .arrow::after { border-width: 0.68rem; content: ""; } - -.popover .arrow, -.popover .arrow::after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-bottom-color: transparent; - border-style: solid; } - -.popover.bottom .arrow { - left: 50%; - margin-left: -0.65rem; - border-top-width: 0; - border-bottom-color: #999; - border-bottom-color: rgba(0, 0, 0, 0.25); - top: -0.72rem; } - -.popover.bottom .arrow::after { - content: " "; - top: 0.05rem; - margin-left: -0.6rem; - border-top-width: 0; - border-bottom-color: #ffffff; } - -.popover.top { - margin-top: -0.6rem; } - .popover.top .arrow { + .ui-popover .arrow, + .ui-popover .arrow::after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-bottom-color: transparent; + border-style: solid; } + .ui-popover.bottom .arrow { left: 50%; margin-left: -0.65rem; - border-width: 0.4rem; - border-bottom-width: 0; - border-top-color: #999; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -0.65rem; } - .popover.top .arrow::after { + border-top-width: 0; + border-bottom-color: #999; + border-bottom-color: rgba(0, 0, 0, 0.25); + top: -0.72rem; } + .ui-popover.bottom .arrow::after { content: " "; - bottom: 0.05rem; + top: 0.05rem; margin-left: -0.6rem; - border-bottom-width: 0; - border-top-color: #ffffff; } + border-top-width: 0; + border-bottom-color: #ffffff; } + .ui-popover.top { + margin-top: -0.6rem; } + .ui-popover.top .arrow { + left: 50%; + margin-left: -0.65rem; + border-width: 0.4rem; + border-bottom-width: 0; + border-top-color: #999; + border-top-color: rgba(0, 0, 0, 0.25); + bottom: -0.65rem; } + .ui-popover.top .arrow::after { + content: " "; + bottom: 0.05rem; + margin-left: -0.6rem; + border-bottom-width: 0; + border-top-color: #ffffff; } .ui-input, .ui-form-element .ui-form-preview, .ui-form-element-disabled .ui-form-preview, .ui-input-basic, .ui-select select, .ui-select .select2-container .select2-choice, .ui-textarea, .ui-options .ui-options-list, .ui-form-slider .ui-form-slider-text, .ui-select .select2-container-multi .select2-choices { width: 100%; @@ -12759,6 +12752,8 @@ div.unified-panel-body-background { padding: 0; margin-bottom: 0px; background-color: #2c3143; } + #masthead .popover > .arrow { + display: none; } #masthead .navbar-nav > li.active { background: black; } #masthead .navbar-nav > li .nav-link {