Merge stable head and body into one table (Novik#2860)

* Merge stable head and body into one table - Merge stable-head and stable-body into one HTML table, and thus removes the process to sync horizontal scroll position. - Fix table header split away from table body when scrolled to right end (Novik#2794). - Adjust internal styles of the s-table to fit the new table structure. * Fix various bugs - Fix move header display postion error. - Fix table sorting on mobile screens. - Fix tracker icon display issue (Novik#2849).
jevenski · Jan 26, 2025 · 8eb76bc · 8eb76bc
1 parent 53f3428
commit 8eb76bc
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 155 deletions.
diff --git a/css/stable.css b/css/stable.css
@@ -8,6 +8,7 @@
   --row-even-bg-color: #ffffff;
   --row-active-bg-color: #cfdeef;
   --row-highlight-brightness: 1;
+  position: relative;
   height: 100%;
   background-color: #FFFFFF;
   overflow: hidden;
@@ -17,72 +18,76 @@
   -moz-user-focus: normal;
   -moz-user-input: enabled;
 }
+.stable table {
+  table-layout: fixed;
+  width: 0;
+  border-spacing: 0;
+}
 .stable td {
   font: menu;
   font-family: inherit;
   font-size: inherit;
   white-space: nowrap;
-  padding: 0.25rem 0.15rem;
-  overflow: hidden;
-}
-.stable-head {
-  position: relative;  /* Need to be positioned for drag masks to be positioned properly */
-  width: 100%;
-  flex: 0 0 auto;
+  padding: 0;
   overflow: hidden;
 }
-.stable-head table {
-  table-layout: fixed;
-  width: 0;
-}
-.stable-head tr {
+.stable thead {
+  position: sticky;
+  inset-block-start: 0;
   background-color: var(--header-bg-color);
   background-image: var(--header-bg-image);
+  z-index: 2;
 }
-.stable-head td {
+.stable thead td div {
   border-bottom: 1px solid var(--header-border-color);
 }
-.stable-head td:not(:first-child) {
+.stable thead td:not(:first-child) div {
   border-left: 1px solid var(--header-border-color);
 }
-.stable-head td:not(:last-child) {
+.stable thead td:not(:last-child) div {
   border-right: 1px solid var(--header-border-color);
 }
-.stable-head td div {
+.stable thead td div {
   position: relative;
-  padding: 0 0.25rem;
+  padding: 0.25rem 0.5rem;
+  margin: 0;
 }
-.stable-head td.asc div, .stable-head td.desc div {
+.stable thead td.asc div, .stable thead td.desc div {
   padding-right: 1.5rem;
 }
-.stable-head td.asc div::after, .stable-head td.desc div::after {
+.stable thead td.asc div::after, .stable thead td.desc div::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   right: 0;
-  height: 1.35rem;
+  height: 100%;
   width: 1.35rem;
   background: no-repeat center;
   background-image: var(--header-asc-icon);
   transition: 0.5s;
 }
-.stable-head td.desc div::after {
+.stable thead td.desc div::after {
   transform: rotate(-180deg);
 }
-.stable-head div.resz {border: 1px solid #FF0000; width: 5px; height: 14px; padding: 0 !important; float: right; background: transparent url(../images/s.gif) no-repeat scroll left center; cursor: e-resize}
+.stable thead div.resz {border: 1px solid #FF0000; width: 5px; height: 14px; padding: 0 !important; float: right; background: transparent url(../images/s.gif) no-repeat scroll left center; cursor: e-resize}
 .stable-body {
-  position: relative;
   width: 100%;
   flex: 1 1 auto;
   background: #F5F5F5;
   overflow: auto;
   overflow-anchor: none;
 }
-.stable-body table {table-layout: fixed; width: 0; }
-.stable-body tr {cursor: pointer}
-.stable-body td {border-bottom: 1px solid #E0E0E0; overflow: hidden;}
-.stable-body td:first-child div {
+.stable-gadgets {
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 0;
+}
+.stable tbody tr {cursor: pointer;}
+.stable tbody tr:not(:first-child) {border-top: 1px solid #E0E0E0;}
+.stable tbody tr:not(:last-child) {border-bottom: 1px solid #E0E0E0;}
+.stable tbody td:first-child div {
   display: flex;
   align-items: center;
   gap: 0.35rem;
@@ -97,29 +102,47 @@
   background: url(../images/tstatus.png) no-repeat;
 }
 .stable-lpad {width: 5px; height: 16px; margin: 0; padding: 0; float: left; }
-.stable-body td div {
-  font-size: 11px;
+.stable tbody td div {
+  overflow: hidden;
+  padding: 0.15rem 0.25rem;
+  margin: 0.15rem 0.25rem;
+}
+.konqueror .stable tbody td div { margin: 0 0px 0 0px !important }
+.stable tbody tr.selected td {background: var(--row-active-bg-color) !important;}
+.stable tbody tr:hover td {filter: brightness(var(--row-highlight-brightness));}
+.stable tbody tr td {background: var(--row-even-bg-color);}
+.stable.alternate tbody tr:nth-child(odd) td {background: var(--row-odd-bg-color);}
+.stable.alternate tbody tr:nth-child(even) td {background: var(--row-even-bg-color);}
+.stable-move-header {
+  position: absolute;
+  background: transparent url(../images/header_move.gif) repeat-x scroll center top;
+  top: 0px;
+  font: menu;
+  padding: 2px 12px 2px 4px;
+  line-height: 12px;
+  border: 1px solid #0099FF;
   overflow: hidden;
-  height: 16px !important;
-  margin: 0 2px !important;
-}
-.konqueror .stable-body td div { margin: 0 0px 0 0px !important }
-.stable-body tr.selected td {background: var(--row-active-bg-color) !important;}
-.stable-body tr:hover td {filter: brightness(var(--row-highlight-brightness));}
-.stable-body tr td {background: var(--row-even-bg-color);}
-.alternate .stable-body tr:nth-child(odd) td {background: var(--row-odd-bg-color);}
-.alternate .stable-body tr:nth-child(even) td {background: var(--row-even-bg-color);}
-.stable-move-header {position: absolute; background: transparent url(../images/header_move.gif) repeat-x scroll center top rgba(255,255,255,0.7); top: 0px; font: menu; padding: 2px 12px 2px 4px; line-height: 12px; visibility: visible; border: 1px solid #0099FF; overflow: hidden; }
+  z-index: 300;
+}
 .webkit .stable-move-header {background: rgba(255,255,255,0.7);}
 .opera .stable-move-header {background: rgba(255,255,255,0.7);}
 .stable-active-header {border-color: threedface !important}
-.stable-separator-header {position: absolute; top: 0px; left: 0px; font: menu; height: 1em; width: 1px; overflow: hidden; background: #0099FF; padding: 3px 0px}
-.stable-virtpad {width: 10px; height: 0px}
+.stable-separator-header {
+  position: absolute;
+  top: 0px;
+  font: menu;
+  height: 1.5rem;
+  width: 2px;
+  background: #0099FF;
+  padding: 3px 0px;
+  z-index: 200;
+}
 .stable-scrollpos {width: 80%; height: 16px; left: 10%; top: 50%; position: absolute; padding: 0 5px; margin-top: -8px; background: #FFFFFF; color: #AAAAAA; font-size: 11px; font-weight: bold; text-align: center; overflow: hidden; display: none; white-space: nowrap}
 .stable-resize-header {
   position: absolute;
   background-color: var(--col-resize-sep-bg-color);
   width: 1px;
+  height: 100%;
   overflow: hidden;
   z-index: 100;
 }
@@ -134,8 +157,21 @@
   display: none;
 }
 
-.meter-value { float: left; background-color: #99D699; border: 1px inset #BBBBBB; border-bottom: none;}
-.meter-text { position: relative; text-align: center; float: left; width: 100%; height: 0px; overflow: visible; font-size: 11px; z-index: 1; }
+.meter-value {
+  float: left;
+  height: 1.5rem;
+  background-color: #99D699;
+  border: 1px inset #BBBBBB;
+}
+.meter-text {
+  position: relative;
+  text-align: center;
+  float: left;
+  top: 0.25rem;
+  width: 100%;
+  height: 0px;
+  overflow: visible;
+}
 
 .meter-value-start-color { background-color: #FFFF00 }
 .meter-value-end-color { background-color: #99D699 }

diff --git a/js/objects.js b/js/objects.js
@@ -32,17 +32,20 @@ class DnD {
 			this.options.onRun = function() {};
 		if (!this.options.onFinish)
 			this.options.onFinish = function() {};
+		this.options.allowMobile = !!this.options.allowMobile;
 		header.off("mousedown");
 		header.on("mousedown", this, this.start);
 	}
 
 	start(e) {
-		// allow dnd only for medium-sized screens and up
-		if ($(window).width() < 768) return false;
+		const self = e.data;
+		// allow dnd on small-sized screens only when explicitly allowed to
+		if (($(window).width() < 768) && !self.options.allowMobile){
+			return false;
+		}
 		// disallow dnd on links
 		if (e.target.tagName === "A") return false;
 
-		const self = e.data;
 		if (self.options.onStart(e)) {
 			$(document).on("mousemove", self, self.run);
 			$(document).on("mouseup", self, self.finish);