Add sticky columns feature

tdx-enhanced.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         tdx-enhanced
 // @namespace    ecn
-// @version      2025-02-04-01
+// @version      2025-02-05-01
 // @description  enhanced tdx coloring & formatting. follows system color scheme.
 // @author       Purdue STEM IT - it@purdue.edu
 // @match        https://service.purdue.edu/TDNext/*
@@ -397,6 +397,15 @@
                 }
             }
         }
+
+        //apply sticky columns
+        let stickyColumns = settings('get','stickyColumns')
+        if (stickyColumns) {
+            [...document.querySelectorAll(".desktop-column")].forEach(column=>{
+                column.style.position = "sticky"
+                column.style.top = "45px"
+            });
+        }
     }
 
     function invertHex(hex) {
@@ -1034,11 +1043,15 @@
                     </div>
                 </div>
                 <div>
-                    <h5>Layout</h5>
+                    <h4>Layout</h4>
                     <select name="layout" id="layout">
                         <option value="default">Default</option>
                         <option value="1_100-66-33">100% / 66-33%</option>
                     </select>
+                    <div>
+                        <input type="checkbox" id="stickyColumns" name="stickyColumns" value="enabled" />
+                        <label for="stickyColumns">Sticky Columns</label>
+                    </div>
                 </div>
                 <div>
                     <h4>Link Behavior</h4>
@@ -1195,6 +1208,9 @@
                     if (form) {
                         let elements = form.elements
                         form[setting].value = value
+                        if (form[setting].type=="checkbox") {
+                            form[setting].checked = value=="enabled" ? true : false
+                        }
                     }
                 }
 
@@ -1210,10 +1226,6 @@
                         setColors('theme',data.theme)
                     }
                 }
-
-                if ('customHighlights' in data) {
-                    //parseCustomHighlights(data.highlightData)
-                }
                 break
             }
 
@@ -1508,6 +1520,7 @@
 #settingsForm .flex {
     display: flex;
     gap: 24px;
+    align-items: baseline;
 }
 
 #settingsForm .textBox {
@@ -1897,6 +1910,10 @@ ul.dropdown-menu .btn.btn.btn-link[data-v-0b9084d2]:hover {
     background-color: var(--bg-3);
 }
 
+div.refresh-indicator {
+    background: linear-gradient(180deg,var(--bg-1),hsla(0,0%,100%,0)) !important;
+}
+
 /* Replies */
 #ttDescription, .feed-item-text {
 	/* color: var(--txt-2); */
@@ -1949,6 +1966,14 @@ a.cke_button_disabled:active, a.cke_button_disabled:focus, a.cke_button_disabled
     background: var(--col-2) !important;
 }
 
+button.btn.btn-link.black:focus, button.btn.btn-link.dropdown.black:active, select:focus-visible {
+    outline-color: var(--col-1);
+}
+
+.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
+    outline-color: var(--col-0);
+}
+
 .cke_colorblock, .cke_colorblock a {
 	color: var(--txt-1);
 }
@@ -2087,7 +2112,7 @@ ul.nav-pills li.dropdown button.dropdown-toggle:hover {
 	background-color: var(--bg-1);
 }
 
-.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
+input[type=checkbox], input[type=checkbox], input[type=radio], input[type=radio] {
     accent-color: var(--col-1);
 }
 
@@ -2511,12 +2536,6 @@ div.feed-entry {
     border: 1px solid var(--border-0);
 }
 
-/* CUSTOM LAYOUTS */
-
-.layout-container {
-    display: flow-root;
-}
-
 
     `