diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 3e67f36a..5b07b261 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -32,14 +32,14 @@ const Popover = { const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top } const content = this.$refs.content // Minor optimization, don't call a slow reflow call if we don't have to - const parentBounds = + const parentBounds = this.boundTo && (this.boundTo.x === 'container' || this.boundTo.y === 'container') && this.$el.offsetParent.getBoundingClientRect() const padding = this.padding || {} // What are the screen bounds for the popover? Viewport vs container // when using viewport, using default padding values to dodge the navbar - const xBounds = this.boundTo.x === 'container' ? { + const xBounds = this.boundTo && this.boundTo.x === 'container' ? { min: parentBounds.left + (padding.left || 0), max: parentBounds.right - (padding.right || 0) } : { @@ -47,7 +47,7 @@ const Popover = { max: window.innerWidth - (padding.right || 10) } - const yBounds = this.boundTo.y === 'container' ? { + const yBounds = this.boundTo && this.boundTo.y === 'container' ? { min: parentBounds.top + (padding.top || 0), max: parentBounds.bottom - (padding.bottom || 0) } : { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index d376f609..2d1219f2 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -42,88 +42,6 @@ border-radius: var(--btnRadius, $fallback--btnRadius); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); - - .popover-arrow { - width: 0; - height: 0; - border-style: solid; - position: absolute; - margin: 5px; - border-color: $fallback--bg; - border-color: var(--bg, $fallback--bg); - } - - &[x-placement^="top"] { - margin-bottom: 5px; - - .popover-arrow { - border-width: 5px 5px 0 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - bottom: -4px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; - } - } - - &[x-placement^="bottom"] { - margin-top: 5px; - - .popover-arrow { - border-width: 0 5px 5px 5px; - border-left-color: transparent !important; - border-right-color: transparent !important; - border-top-color: transparent !important; - top: -4px; - left: calc(50% - 5px); - margin-top: 0; - margin-bottom: 0; - } - } - - &[x-placement^="right"] { - margin-left: 5px; - - .popover-arrow { - border-width: 5px 5px 5px 0; - border-left-color: transparent !important; - border-top-color: transparent !important; - border-bottom-color: transparent !important; - left: -4px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; - } - } - - &[x-placement^="left"] { - margin-right: 5px; - - .popover-arrow { - border-width: 5px 0 5px 5px; - border-top-color: transparent !important; - border-right-color: transparent !important; - border-bottom-color: transparent !important; - right: -4px; - top: calc(50% - 5px); - margin-left: 0; - margin-right: 0; - } - } - - &[aria-hidden='true'] { - visibility: hidden; - opacity: 0; - transition: opacity .15s, visibility .15s; - } - - &[aria-hidden='false'] { - visibility: visible; - opacity: 1; - transition: opacity .15s; - } } .dropdown-menu { diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js index 35baac3e..cb55f67e 100644 --- a/src/components/status_popover/status_popover.js +++ b/src/components/status_popover/status_popover.js @@ -19,7 +19,6 @@ const StatusPopover = { if (!this.status) { this.$store.dispatch('fetchStatus', this.statusId) } - console.log(this.$el.offsetParent) } } } diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue index 518e3f69..63436ee8 100644 --- a/src/components/status_popover/status_popover.vue +++ b/src/components/status_popover/status_popover.vue @@ -47,28 +47,6 @@ box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: var(--popupShadow); - .popover-arrow::before { - position: absolute; - content: ''; - left: -7px; - border: solid 7px transparent; - z-index: -1; - } - - &[x-placement^="bottom-start"] .popover-arrow::before { - top: -2px; - border-top-width: 0; - border-bottom-color: $fallback--border; - border-bottom-color: var(--border, $fallback--border); - } - - &[x-placement^="top-start"] .popover-arrow::before { - bottom: -2px; - border-bottom-width: 0; - border-top-color: $fallback--border; - border-top-color: var(--border, $fallback--border); - } - .status-el.status-el { border: none; }