Remove scroll event listener on tree menu plus style cleanup for matchinfos
Change-Id: I5f78792da7e3ada06c6dec9fe2d80343a82384d6
diff --git a/dev/js/src/match/treemenu.js b/dev/js/src/match/treemenu.js
index 6a39720..1a12774 100644
--- a/dev/js/src/match/treemenu.js
+++ b/dev/js/src/match/treemenu.js
@@ -48,10 +48,44 @@
// Attach menu to
attachTo : function (e) {
+
+ // this._attached = e;
+ this._repos(e);
+ this.slider().reInit();
+
+ /*
+ * This is a suboptimal scrolling solution, see
+ * see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects
+ */
+ if (this._onscroll !== undefined) {
+ window.removeEventListener('scroll', this._onscroll);
+ };
+
+ this._onscroll = function () {
+ this._repos(e);
+ }.bind(this);
+
+ window.addEventListener('scroll', this._onscroll);
+ },
+
+
+ // Overwrite onHide method
+ onHide : function () {
+
+ // Remove listener
+ if (this._onscroll !== undefined) {
+ window.removeEventListener('scroll', this._onscroll);
+ };
+ },
+
+ _repos : function (e) {
var bounding = e.getBoundingClientRect();
this._element.style.left = bounding.left + "px";
- this._element.style.top = (bounding.top + bounding.height - this._element.clientHeight) + "px";
- this.slider().reInit();
+ this._element.style.top = (
+ bounding.top +
+ bounding.height -
+ this._element.clientHeight
+ ) + "px";
}
};
});
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index d1ccbf5..3abe319 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -38,48 +38,6 @@
height: auto;
font-size: 10pt;
text-align: left;
-
- // TODO: This may not be necessary anymore
- // REMOVE!
- /*
- > p.addtree {
- position: relative;
- @include choose-item;
- border: {
- width: $border-size;
- style: solid;
- radius: $standard-border-radius;
- }
-
- font-size: inherit;
- width: $left-width;
- margin: $border-size $border-size 0 $border-size !important;
- text-align: center;
- cursor: pointer;
- padding: 0 !important;
-
- &:hover {
- cursor:pointer;
- @include choose-hover;
- }
- */
- /*
- *.menu {
- border-top-right-radius: 8px;
- position: absolute;
- width: $left-width;
- left: 0;
- bottom: 0;
- text-align: left;
- margin: -1* $border-size;
- margin-top: 0;
- > li:first-of-type {
- border-top-right-radius: 5px;
- }
- }
-}
-*/
-
p.queryfragment {
position:relative;
@include choose-item;
@@ -192,26 +150,6 @@
> tr:nth-of-type(1) > th {
border-top-color: transparent;
}
- /**
- * Click on a row and it's highlighted.
- */
- /*
- outline: (2 * $border-size) solid $light-green;
- -moz-outline-radius: $border-size;
- outline-radius: $border-size;
- */
- /*
- > tr:focus {
- outline: none;
- background-color: $light-green;
- border-color: $light-green;
- td {
- background-color: inherit;
- color: $nearly-white;
- border-color: $light-green;
- }
- }
- */
}
tr {
/**
@@ -240,25 +178,11 @@
white-space: nowrap;
vertical-align: top;
text-align: center;
- /*
- div {
- background-color: $light-orange; // $nearly-white;
- }
- */
+
}
tr:nth-child(even) > td {
background-color: $light-orange;
- /*
- div:nth-child(even) {
- background-color: $middle-orange;
- }
-*/
}
- /*
- tr:nth-child(odd) > td > div:nth-child(odd) {
- background-color: $middle-orange;
- }
- */
// table for key-value pairs
td.matchkeyvalues {
@@ -286,7 +210,7 @@
* Label
*/
// The metatable branch was experimental
-div.matchtree { //, div.metatable {
+div.matchtree {
h6 {
display: inline;
font-size: inherit;
@@ -303,13 +227,6 @@
margin-left: $border-size;
}
}
- /*
- > div {
-
- // Override half width !
- width: $left-width;
- }
- */
}
}
@@ -331,7 +248,7 @@
margin-left: $left-distance;
margin-right: $right-match-distance;
- background-color: $light-orange; // $nearly-white; // $light-orange;
+ background-color: $light-orange;
}
}
@@ -343,7 +260,6 @@
z-index: 20;
margin: 0;
padding: 0;
- // margin-right: -1 * $right-match-distance;
width: $right-match-distance;
li {
cursor: pointer;
@@ -384,7 +300,6 @@
align-items: stretch;
width: auto;
padding-bottom: 0;
- // margin-left: $left-distance;
margin-right: $right-match-distance;
margin-top: $border-size;