Add color hint bars around changesets list

diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index 74b9a4e248b53288f71beeca225936659a45f934..8a3ba28ae56646ad6cdc05a4517a59c9c28e37ac 100644 (file)
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -105,6 +105,10 @@ OSM.History = function (map) {
   function displayFirstChangesets(html) {
     $("#sidebar_content .changesets").html(html);
 
+    $("#sidebar_content .changesets ol")
+      .before($("<div class='changeset-color-hint-bar opacity-75 sticky-top changeset-above-sidebar-viewport'>"))
+      .after($("<div class='changeset-color-hint-bar opacity-75 sticky-bottom changeset-below-sidebar-viewport'>"));
+
     if (location.pathname === "/history") {
       setPaginationMapHashes();
     }

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 681e898127ad5df3586184fe3a0cdacd757e6ca1..de8611e9d7bad595d8101aa888b092076f3a7949 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -618,6 +618,11 @@ tr.turn {
 }
 
 #sidebar .changesets {
+  .changeset-color-hint-bar {
+    height: 2px;
+    background: var(--changeset-border-color);
+  }
+
   li {
     &.selected {
       @extend :hover;