0d4b77d7b1
Popover works by first creating a DOM element with display none then having jquery calculate its width and new position and then setting display to table. This does not work with p2p connection stats, which are much wider than the default width of the popover. What will happen is when display table is set, the width will increase greatly so the positioning will be off. The workaround here is to set display table as the default display but toggle visibility instead.
93 lines
2.2 KiB
SCSS
93 lines
2.2 KiB
SCSS
.jitsipopover {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: $jitsipopoverZ;
|
|
display: table;
|
|
visibility: hidden;
|
|
max-width: 300px;
|
|
min-width: 100px;
|
|
text-align: left;
|
|
color: $popoverFontColor;
|
|
background-color: $popoverBg;
|
|
background-clip: padding-box;
|
|
border-radius: $borderRadius;
|
|
/*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
|
|
/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
|
|
white-space: normal;
|
|
margin-top: -$popoverMenuPadding;
|
|
|
|
|
|
&__menu-padding,
|
|
&__menu-padding-top {
|
|
position: absolute;
|
|
width: 100px;
|
|
}
|
|
|
|
/**
|
|
* Invisible padding is added to the bottom of the popover to extend its
|
|
* height so it does not close when moving the mouse from the trigger
|
|
* element towards the popover itself.
|
|
*/
|
|
&__menu-padding {
|
|
bottom: -$popoverMenuPadding;
|
|
height: $popoverMenuPadding;
|
|
}
|
|
|
|
/**
|
|
* Invisible padding is added to the top of the popover to extend its height
|
|
* so it does not close automatically when its height is shrunk from showing
|
|
* less video statistics.
|
|
*/
|
|
&__menu-padding-top {
|
|
height: 20px;
|
|
top: -20px;
|
|
}
|
|
|
|
&__showmore {
|
|
display: block;
|
|
text-align: center;
|
|
width: 90px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
> .arrow {
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
bottom: -5px;
|
|
margin-left: -5px;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-top-color: $popoverBg;
|
|
border-style: solid;
|
|
border-width: 5px;
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
/**
|
|
* Override default "top" styles to support popovers appearing from the
|
|
* left of the popover trigger element.
|
|
*/
|
|
&.left {
|
|
margin-left: -$popoverMenuPadding;
|
|
margin-top: 0;
|
|
|
|
.arrow {
|
|
border-color: transparent transparent transparent $popoverBg;
|
|
border-width: 5px 0px 5px 5px;
|
|
margin-left: 0;
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.jitsipopover {
|
|
&__menu-padding {
|
|
bottom: 0;
|
|
height: 100%;
|
|
width: $popoverMenuPadding;
|
|
}
|
|
}
|
|
}
|
|
}
|