Fixed sidebar navigation.

resources/report/html/loot-plugin-item.html

@@ -18,7 +18,7 @@
         core-tooltip {
             margin: 0.25em;
         }
-        ::content > a {
+        div {
             padding-left: 0.75em;
         }
         </style>
@@ -30,7 +30,7 @@
             <core-tooltip id="hasUserEdits" label="Has User Metadata">
                 <core-icon icon="account-circle"></core-icon>
             </core-tooltip>
-            <content></content>
+            <div><content></content></div>
         </paper-item>
     </template>
     <script>

resources/report/js/script.js

@@ -1158,6 +1158,14 @@ function handleClearMetadata(evt) {
 function toggleDrawer(evt) {
     document.getElementById('container').togglePanel();
 }
+function handleSidebarClick(evt) {
+    if (evt.target.hasAttribute('data-index')) {
+        window.location.hash = '';
+        document.getElementById('main').querySelector('core-list').scrollToItem(evt.target.getAttribute('data-index'));
+        /* However, the scroll bar that the plugin card list uses is for the whole main content area, so the position is offset by the heights of the summary and general messages cards. Adjust to compensate. */
+        document.getElementById('main').scrollTop += document.getElementById('main').querySelector('core-list').offsetTop;
+    }
+}
 function setupEventHandlers() {
     var elements;
     /*Set up filter value and CSS setting storage read/write handlers.*/
@@ -1210,6 +1218,7 @@ function setupEventHandlers() {
     document.body.addEventListener('loot-clear-metadata', handleClearMetadata, false);
 
     document.getElementById('drawerToggle').addEventListener('click', toggleDrawer, false);
+    document.getElementById('cardsNav').addEventListener('click', handleSidebarClick, false);
 }
 function initVars() {
     loot.query('getVersion').then(function(result){

resources/report/report.html

@@ -114,8 +114,8 @@
                     </paper-item>
                     <core-list flex>
                         <template>
-                            <loot-plugin-item data-bsa?="{{model.loadsBSA}}" data-edits?="{{model.userlist != undefined}}">
-                                <a href="#{{model.id}}">{{model.name}}</a>
+                            <loot-plugin-item data-bsa?="{{model.loadsBSA}}" data-edits?="{{model.userlist != undefined}}" data-index="{{index}}">
+                                {{model.name}}
                             </loot-plugin-item>
                         </template>
                         <!-- Generated <loot-plugin-item> elements go here. -->