Highlight related sidebar row when result .entry is hovered

Author: sukhwinder33445

public/css/schedule.less

@@ -54,12 +54,20 @@
 
 /* Design */
 
-.schedule-detail .entry.highlighted {
-  outline: 2px solid var(--entry-border-color);
-  outline-offset: 1px;
-}
+.schedule {
+  .entry.highlighted {
+    outline: 2px solid var(--entry-border-color);
+    outline-offset: 1px;
+  }
 
-.schedule-detail .step.highlighted {
-  background-color: @gray-lighter;
-  border-color: @gray-light;
+  .sidebar .row-title.highlighted,
+  .step.highlighted {
+    background-color: @gray-lighter;
+    border-color: @gray-light;
+  }
+
+  .sidebar .row-title.highlighted {
+    margin-top: -1px; // cover the border-top area
+    padding-top: 1px;
+  }
 }

public/js/schedule.js

@@ -79,12 +79,15 @@
             const entry = event.currentTarget;
             const overlay = entry.parentElement;
             const grid = overlay.previousSibling;
+            const sideBar = grid.previousSibling;
 
             let relatedElements;
             if ('rotationPosition' in entry.dataset) {
-                relatedElements = grid.querySelectorAll(
-                    '[data-y-position="' + entry.dataset.rotationPosition + '"]'
+                relatedElements = Array.from(
+                    grid.querySelectorAll('[data-y-position="' + entry.dataset.rotationPosition + '"]')
                 );
+
+                relatedElements.push(sideBar.childNodes[Number(entry.dataset.rotationPosition)]);
             } else {
                 relatedElements = overlay.querySelectorAll(
                     '[data-rotation-position="' + entry.dataset.entryPosition + '"]'
@@ -101,12 +104,15 @@
             const entry = event.currentTarget;
             const overlay = entry.parentElement;
             const grid = overlay.previousSibling;
+            const sideBar = grid.previousSibling;
 
             let relatedElements;
             if ('rotationPosition' in entry.dataset) {
-                relatedElements = grid.querySelectorAll(
-                    '[data-y-position="' + entry.dataset.rotationPosition + '"]'
+                relatedElements = Array.from(
+                    grid.querySelectorAll('[data-y-position="' + entry.dataset.rotationPosition + '"]')
                 );
+
+                relatedElements.push(sideBar.childNodes[Number(entry.dataset.rotationPosition)]);
             } else {
                 relatedElements = overlay.querySelectorAll(
                     '[data-rotation-position="' + entry.dataset.entryPosition + '"]'