From bc28510322823f70d6a2790e3ccaed5a8012abb9 Mon Sep 17 00:00:00 2001
From: Gabriele Musco <gabmus@disroot.org>
Date: Thu, 15 Apr 2021 00:00:53 +0200
Subject: [PATCH] if navtype is circles and infinite scrolling is enabled load
 more link looks more like a button, similar to the circles pagination

---
 assets/scss/style.scss          | 17 ++++++++++++
 layouts/partials/paginator.html | 46 ++++++++++++++++-----------------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index c410766..d644634 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -416,3 +416,20 @@ ul.list {
         }
     }
 }
+
+.loadMoreButton {
+    text-align: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    &.buttonLike {
+        a {
+            border-radius: 10px;
+            background-color: $highlight_bg_color;
+            padding: 15px;
+            border-bottom: none;
+            &:hover, &:focus {
+                background-color: $accent_color;
+            }
+        }
+    }
+}
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
index bdf1a13..a189cb6 100644
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@@ -1,28 +1,28 @@
 {{ if .Site.Params.infiniteScrolling }}
 {{- partial "js_paginator.html" . -}}
-<script>
-    var nextPage = '/index.json';
-    function getNext(first=false) {
-        if (!nextPage) return;
-        fetch(nextPage).then(res => res.json())
-        .then(res => {
-            nextPage = res['next'];
-            if (first) {
-                document.getElementById('getNextBtnContainer').innerHTML += `
-                    <div style="text-align: center; font-size: 1.3em; font-weight: bold;">
-                        <a style="cursor: pointer" onclick="getNext();">
-                            Load more articles
-                        </a>
-                    </div>
-                `;
-                return;
-            }
-            if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = '';
-            renderArticles(res['articles']);
-        });
-    }
-    getNext(true);
-</script>
+    <script>
+        var nextPage = '/index.json';
+        function getNext(first=false) {
+            if (!nextPage) return;
+            fetch(nextPage).then(res => res.json())
+            .then(res => {
+                nextPage = res['next'];
+                if (first) {
+                    document.getElementById('getNextBtnContainer').innerHTML += `
+                       <div class="loadMoreButton {{ if eq .Site.Params.navtype "circles"}}buttonLike{{ end }}">
+                            <a style="cursor: pointer" onclick="getNext();">
+                                Load more articles
+                            </a>
+                        </div>
+                    `;
+                    return;
+                }
+                if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = '';
+                renderArticles(res['articles']);
+            });
+        }
+        getNext(true);
+    </script>
 {{ end }}
 {{ if .Site.Params.infiniteScrolling }}<noscript>{{ end }}
 {{ if gt .Paginator.TotalPages 1 }}