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,10 +14,7 @@
       return queryParams;
     }
 
-    $(window).on("scroll", function() {
+    function loadNextPage() {
-      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,
@@ -38,6 +35,23 @@
         activateBlogBoxOnClick();
       })
     }
+
+    $(window).on("scroll", function() {
+      if (window.loading_page || !window.has_next_page) return;
+      var distanceFromBottom = $(document).height() - ($(window).scrollTop() + $(window).height());
+      var isDesktop = window.matchMedia('(min-width: 800px)').matches;
+
+      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>
+{% if has_next_page %}
+  <button class="view-next-page btn-green small">{{_('View more')}}</button>
+{% endif %}