From 2319c8e19e323552112d99eb440a76771cffd3de Mon Sep 17 00:00:00 2001
From: Jesse Plamondon-Willard <Pathoschild@users.noreply.github.com>
Date: Mon, 17 Feb 2020 23:55:28 -0500
Subject: make compatibility list header sticky

---
 src/SMAPI.Web/wwwroot/Content/css/mods.css | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/SMAPI.Web/wwwroot/Content')

diff --git a/src/SMAPI.Web/wwwroot/Content/css/mods.css b/src/SMAPI.Web/wwwroot/Content/css/mods.css
index 1c2b8056..697ba514 100644
--- a/src/SMAPI.Web/wwwroot/Content/css/mods.css
+++ b/src/SMAPI.Web/wwwroot/Content/css/mods.css
@@ -86,6 +86,11 @@ table.wikitable > caption {
     font-size: 0.9em;
 }
 
+#mod-list thead tr {
+    position: sticky;
+    top: 0;
+}
+
 #mod-list th.header {
     background-repeat: no-repeat;
     background-position: center right;
-- 
cgit 


From 7f63e065917f8879f42dbac92748702bfb6d044d Mon Sep 17 00:00:00 2001
From: Jesse Plamondon-Willard <Pathoschild@users.noreply.github.com>
Date: Tue, 18 Feb 2020 00:31:36 -0500
Subject: fix anchor position for new sticky header

---
 src/SMAPI.Web/Views/Mods/Index.cshtml    |  4 ++--
 src/SMAPI.Web/wwwroot/Content/js/mods.js | 24 +++++++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

(limited to 'src/SMAPI.Web/wwwroot/Content')

diff --git a/src/SMAPI.Web/Views/Mods/Index.cshtml b/src/SMAPI.Web/Views/Mods/Index.cshtml
index 5b310d55..b1d9ae2c 100644
--- a/src/SMAPI.Web/Views/Mods/Index.cshtml
+++ b/src/SMAPI.Web/Views/Mods/Index.cshtml
@@ -8,11 +8,11 @@
     TimeSpan staleAge = DateTimeOffset.UtcNow - Model.LastUpdated;
 }
 @section Head {
-    <link rel="stylesheet" href="~/Content/css/mods.css?r=20190302" />
+    <link rel="stylesheet" href="~/Content/css/mods.css?r=20200218" />
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.0/dist/js/jquery.tablesorter.combined.min.js" crossorigin="anonymous"></script>
-    <script src="~/Content/js/mods.js?r=20190302"></script>
+    <script src="~/Content/js/mods.js?r=20200218"></script>
     <script>
         $(function() {
             var data = @Json.Serialize(Model.Mods, new JsonSerializerSettings { Formatting = Formatting.None });
diff --git a/src/SMAPI.Web/wwwroot/Content/js/mods.js b/src/SMAPI.Web/wwwroot/Content/js/mods.js
index 0394ac4f..35098b60 100644
--- a/src/SMAPI.Web/wwwroot/Content/js/mods.js
+++ b/src/SMAPI.Web/wwwroot/Content/js/mods.js
@@ -102,7 +102,7 @@ smapi.modList = function (mods, enableBeta) {
     app = new Vue({
         el: "#app",
         data: data,
-        mounted: function() {
+        mounted: function () {
             // enable table sorting
             $("#mod-list").tablesorter({
                 cssHeader: "header",
@@ -115,11 +115,7 @@ smapi.modList = function (mods, enableBeta) {
                 $("#search-box").focus();
 
             // jump to anchor (since table is added after page load)
-            if (location.hash) {
-                var row = $(location.hash).get(0);
-                if (row)
-                    row.scrollIntoView();
-            }
+            this.fixHashPosition();
         },
         methods: {
             /**
@@ -144,6 +140,18 @@ smapi.modList = function (mods, enableBeta) {
                 }
             },
 
+            /**
+             * Fix the window position for the current hash.
+             */
+            fixHashPosition: function () {
+                if (!location.hash)
+                    return;
+
+                var row = $(location.hash);
+                var target = row.prev().get(0) || row.get(0);
+                if (target)
+                    target.scrollIntoView();
+            },
 
             /**
              * Get whether a mod matches the current filters.
@@ -151,7 +159,7 @@ smapi.modList = function (mods, enableBeta) {
              * @param {string[]} searchWords The search words to match.
              * @returns {bool} Whether the mod matches the filters.
              */
-            matchesFilters: function(mod, searchWords) {
+            matchesFilters: function (mod, searchWords) {
                 var filters = data.filters;
 
                 // check hash
@@ -249,7 +257,9 @@ smapi.modList = function (mods, enableBeta) {
         }
     });
     app.applyFilters();
+    app.fixHashPosition();
     window.addEventListener("hashchange", function () {
         app.applyFilters();
+        app.fixHashPosition();
     });
 };
-- 
cgit