Add scroll, highlight to check nearby libraries

Clicking the check nearby libraries header in the read button will smoothly scroll the user to the check nearby libraries panel and highlight it with a border animation. See PR 7125 for similar implementation with star ratings.

Author: SivanC

openlibrary/macros/ReadButton.html

@@ -54,7 +54,7 @@
           </a>
         </li>
         <li>
-          <a class="cta-btn cta-btn--available cta-btn--w-icon">
+          <a class="cta-btn cta-btn--available cta-btn--w-icon" onclick="location.href='#bookLocateSection';">
             <span class="btn-icon map"></span>
             <span class="btn-label">Check Nearby Libraries</span>
           </a>

openlibrary/macros/databarWork.html

@@ -66,7 +66,7 @@ <h3 class="header">
     </div>
 
     <div class="panel desktop-vendor">
-      <div class="btn-notice">
+      <div id="bookLocateSection" class="btn-notice book-locate-panel">
         $:worldcat_links
 
         <div class="cta-section">

static/css/components/generic-dropper.less

@@ -114,7 +114,6 @@
   background-position: center;
 }
 
-
 .cta-dropper {
   display: flex;
   margin-bottom: 10px;

static/css/components/read-panel.less

@@ -182,6 +182,34 @@
   .cta-button-group.desktop {
     display: flex;
   }
+  // scroll margin and animation when clicking "Check Nearby Libraries" in
+  // read button dropper
+  html {
+    scroll-behavior: smooth;
+  }
+  .book-locate-panel {
+    scroll-margin-top: 100px;
+    -webkit-transition: all 1s linear;
+    position: sticky;
+    top: 0;
+  }
+  @keyframes highlight {
+    0% {
+      border: 1px solid transparent;
+      box-shadow: 0 0 10px transparent;
+    }
+    50% {
+      border: 1px solid @link-blue;
+      box-shadow: 0 0 10px @link-blue;
+    }
+    100% {
+      border: 1px solid transparent;
+      box-shadow: 0 0 10px transparent;
+    }
+  }
+  .book-locate-panel:target {
+    animation: highlight 3s;
+  }
   /* stylelint-enable selector-max-specificity */
 }