Fix feed scroll on mobile

judge/views/feed.py

@@ -27,6 +27,7 @@ class FeedView(InfinitePaginationMixin, ListView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+        context["has_next_page"] = context["page_obj"].has_next()
         try:
             context["feed_content_url"] = reverse(self.url_name)
         except Exception as e:

resources/base.scss

@@ -853,6 +853,13 @@ select {
     color: #808080;
 }
 
+.view-next-page {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
 @media (max-width: 799px) {
     #user-links, .anon {
         padding-right: 0.5em;
@@ -877,4 +884,7 @@ select {
         padding: 2em;
         border-radius: 1em;
     }
+    .view-next-page {
+        display: none;
+    }
 }

templates/feed/feed_js.html

@@ -1,6 +1,6 @@
 <script>
   window.page = {{page_obj.number}};
-  window.has_next_page = {{1 if page_obj.has_next() else 0}};
+  window.has_next_page = {{1 if has_next_page else 0}};
   window.loading_page = false;
   $(function() {
     function getQueryParams() {
@@ -14,30 +14,44 @@
       return queryParams;
     }
 
+    function loadNextPage() {
+      window.loading_page = true;
+      var params = {
+        "only_content": 1,
+        "page": window.page + 1,
+      };
+
+      params = Object.assign({}, getQueryParams(), params);
+
+      $.get("{{feed_content_url}}", params)
+        .done(function(data) {
+        $(".has_next").remove();
+        $(".middle-content").append(data);
+        window.loading_page = false;
+        window.has_next_page = parseInt($(".has_next").attr("value"));
+        window.page++;
+        MathJax.typeset($('.middle-content')[0]);
+        onWindowReady();
+        activateBlogBoxOnClick();
+      })
+    }
+
     $(window).on("scroll", function() {
       if (window.loading_page || !window.has_next_page) return;
       var distanceFromBottom = $(document).height() - ($(window).scrollTop() + $(window).height());
-      if (distanceFromBottom < 500) {
-        window.loading_page = true;
-        var params = {
-          "only_content": 1,
-          "page": window.page + 1,
-        };
+      var isDesktop = window.matchMedia('(min-width: 800px)').matches;
 
-        params = Object.assign({}, getQueryParams(), params);
-
-        $.get("{{feed_content_url}}", params)
-          .done(function(data) {
-          $(".has_next").remove();
-          $(".middle-content").append(data);
-          window.loading_page = false;
-          window.has_next_page = parseInt($(".has_next").attr("value"));
-          window.page++;
-          MathJax.typeset($('.middle-content')[0]);
-          onWindowReady();
-          activateBlogBoxOnClick();
-        })
+      if (isDesktop && distanceFromBottom < 500) {
+        loadNextPage();
       }
     });
+
+    $(document).on("click", ".view-next-page", () => {
+      if (window.loading_page || !window.has_next_page) return;
+      var isDesktop = window.matchMedia('(min-width: 800px)').matches;
+      if (isDesktop) return;
+      $(".view-next-page").remove();
+      loadNextPage();
+    });
   });
 </script>

templates/feed/has_next.html

@@ -1 +1,4 @@
-<div class="has_next" style="display: none;" value="{{1 if has_next_page else 0}}"></div>
+<div class="has_next" style="display: none;" value="{{1 if has_next_page else 0}}"></div>
+{% if has_next_page %}
+  <button class="view-next-page btn-green small">{{_('View more')}}</button>
+{% endif %}