fbievan
/
Website-Redesign
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

if navtype is circles and infinite scrolling is enabled load more link looks more like a button, similar to the circles pagination

This commit is contained in:
Gabriele Musco 2021-04-15 00:00:53 +02:00
parent 0d3aeb96fa
commit bc28510322
No known key found for this signature in database
GPG Key ID: 8539FD3454380B83
2 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/scss/style.scss
View File

@ -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;
}
}
}
}

46
layouts/partials/paginator.html
View File

@ -1,28 +1,28 @@
{{ if .Site.Params.infiniteScrolling }} {{ if .Site.Params.infiniteScrolling }}
{{- partial "js_paginator.html" . -}} {{- partial "js_paginator.html" . -}}
<script> <script>
var nextPage = '/index.json'; var nextPage = '/index.json';
function getNext(first=false) { function getNext(first=false) {
if (!nextPage) return; if (!nextPage) return;
fetch(nextPage).then(res => res.json()) fetch(nextPage).then(res => res.json())
.then(res => { .then(res => {
nextPage = res['next']; nextPage = res['next'];
if (first) { if (first) {
document.getElementById('getNextBtnContainer').innerHTML += ` document.getElementById('getNextBtnContainer').innerHTML += `
<div style="text-align: center; font-size: 1.3em; font-weight: bold;"> <div class="loadMoreButton {{ if eq .Site.Params.navtype "circles"}}buttonLike{{ end }}">
<a style="cursor: pointer" onclick="getNext();"> <a style="cursor: pointer" onclick="getNext();">
Load more articles Load more articles
</a> </a>
</div> </div>
`; `;
return; return;
} }
if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = ''; if (!nextPage) document.getElementById('getNextBtnContainer').innerHTML = '';
renderArticles(res['articles']); renderArticles(res['articles']);
}); });
} }
getNext(true); getNext(true);
</script> </script>
{{ end }} {{ end }}
{{ if .Site.Params.infiniteScrolling }}<noscript>{{ end }} {{ if .Site.Params.infiniteScrolling }}<noscript>{{ end }}
{{ if gt .Paginator.TotalPages 1 }} {{ if gt .Paginator.TotalPages 1 }}